前言
在开发中，我们经常会遇到点击图片查看大图的需求。在 Apple 的推动下，iOS 开发必定会从 UIKit 慢慢向 SwiftUI 转变。为了更好地适应这一趋势，今天我们用 SwiftUI 实现一个可缩放的图片预览器。
实现过程
程序的初步构想
要做一个程序，首先肯定是给它起个名字。既然是图片预览器（Image Previewer），再加上我自己习惯用的前缀 LBJ，就把它命名为 LBJImagePreviewer 吧。
既然是图片预览器，所以需要外部提供图片给我们；然后是可缩放，所以需要一个最大的缩放倍数。有了这些思考，可以把 LBJImagePreviewer 简单定义为：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
import SwiftUIpublic struct LBJImagePreviewer: View { private let uiImage: UIImage private let maxScale: CGFloat public init(uiImage: UIImage, maxScale: CGFloat = LBJImagePreviewerConstants.defaultMaxScale) { self.uiImage = uiImage self.maxScale = maxScale } public var body: some View { EmptyView() }}public enum LBJImagePreviewerConstants { public static let defaultMaxScale: CGFloat = 16} |
在上面代码中，给 maxScale 设置了一个默认值。
另外还可以看到 maxScale 的默认值是通过 LBJImagePreviewerConstants.defaultMaxScale 来设置的，而不是直接写 16，这样做的目的是把代码中用到的数值和经验值等整理到一个地方，方便后续的修改。这是一个好的编程习惯。
细心的读者可能还会注意到 LBJImagePreviewerConstants 是一个 enum 类型。为什么不用 struct 或者 class 呢？
在 Swift 中定义静态方法，class / struct / enum 三者如何选择？
在开发过程中，我们经常会遇到需要定义一些静态方法的需求。通常我们会想到用 class 和 struct 去定义，然而却忽略了 enum 也可以拥有静态方法。那么问题来了：既然三者都可以定义静态方法，那么我们应该如何选择？
下面直接给出答案：
- class：class 是引用类型，支持继承。如果你需要这两个特性，那么选择 class。
- struct：struct 是值类型，不支持继承。如果你需要值类型，并且某些时候需要这个类型的实例，那么用 struct。
- enum：enum 也是值类型，一般用来定义一组相关的值。如果我们想要的静态方法是一系列的工具，不需要任何的实例化和继承，那么用 enum 最合适。
另外，其实这个规则也适用于静态变量。
显示 UIImage
当用户点开图片预览器，当然是希望图片等比例占据整个图片预览器，所以需要知道图片预览器当前的尺寸和图片尺寸，从而通过计算让图片等比例占据整个图片预览器。
图片预览器当前的尺寸可以通过 GeometryReader 得到；图片大小可以直接从 UIImage 得到。所以我们可以把
LBJImagePreviewer 的 body 定义如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
public struct LBJImagePreviewer: View { public var body: some View { GeometryReader { geometry in // 用于获取图片预览器所占据的尺寸 let imageSize = imageSize(fits: geometry) // 计算图片等比例铺满整个预览器时的尺寸 ScrollView([.vertical, .horizontal]) { imageContent .frame( width: imageSize.width, height: imageSize.height ) .padding(.vertical, (max(0, geometry.size.height - imageSize.height) / 2)) // 让图片在预览器垂直方向上居中 } .background(Color.black) } .ignoresSafeArea() }}private extension LBJImagePreviewer { var imageContent: some View { Image(uiImage: uiImage) .resizable() .aspectRatio(contentMode: .fit) } /// 计算图片等比例铺满整个预览器时的尺寸 func imageSize(fits geometry: GeometryProxy) -> CGSize { let hZoom = geometry.size.width / uiImage.size.width let vZoom = geometry.size.height / uiImage.size.height return uiImage.size * min(hZoom, vZoom) }}extension CGSize { /// CGSize 乘以 CGFloat static func * (lhs: Self, rhs: CGFloat) -> CGSize { CGSize(width: lhs.width * rhs, height: lhs.height * rhs) }} |
这样我们就把图片用 ScrollView 显示出来了。
双击缩放
想要 ScrollView 的内容可以滚动起来，必须要让它的尺寸大于 ScrollView 的尺寸。沿着这个思路可以想到，我们可修改 imageContent 的大小来实现放大缩小，也就是修改下面这个 frame:
|
1
2
3
4
5
|
imageContent .frame( width: imageSize.width, height: imageSize.height ) |
我们通过用 imageSize(fits: geometry) 的返回值乘以一个倍数，就可以改变 frame 的大小。这个倍数就是放大的倍数。因此我们定义一个变量记录倍数，然后通过双击手势改变它，就能把图片放大缩小，有变动的代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
// 当前的放大倍数@Stateprivate var zoomScale: CGFloat = 1public var body: some View { GeometryReader { geometry in let zoomedImageSize = zoomedImageSize(fits: geometry) ScrollView([.vertical, .horizontal]) { imageContent .gesture(doubleTapGesture()) .frame( width: zoomedImageSize.width, height: zoomedImageSize.height ) .padding(.vertical, (max(0, geometry.size.height - zoomedImageSize.height) / 2)) } .background(Color.black) } .ignoresSafeArea()}// 双击手势func doubleTapGesture() -> some Gesture { TapGesture(count: 2) .onEnded { withAnimation { if zoomScale > 1 { zoomScale = 1 } else { zoomScale = maxScale } } }}// 缩放时图片的大小func zoomedImageSize(fits geometry: GeometryProxy) -> CGSize { imageSize(fits: geometry) * zoomScale} |
放大手势缩放
放大手势缩放的原理与双击一样，都是想办法通过修改 zoomScale 来达到缩放图片的目的。SwiftUI 中的放大手势是 MagnificationGesture。代码变动如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
// 稳定的放大倍数，放大手势以此为基准来改变 zoomScale 的值@Stateprivate var steadyStateZoomScale: CGFloat = 1// 放大手势缩放过程中产生的倍数变化@GestureStateprivate var gestureZoomScale: CGFloat = 1// 变成了只读属性，当前图片被放大的倍数var zoomScale: CGFloat { steadyStateZoomScale * gestureZoomScale}func zoomGesture() -> some Gesture { MagnificationGesture() .updating($gestureZoomScale) { latestGestureScale, gestureZoomScale, _ in // 缩放过程中，不断地更新 `gestureZoomScale` 的值 gestureZoomScale = latestGestureScale } .onEnded { gestureScaleAtEnd in // 手势结束，更新 steadyStateZoomScale 的值； // 此时 gestureZoomScale 的值会被重置为初始值 1 steadyStateZoomScale *= gestureScaleAtEnd makeSureZoomScaleInBounds() }}// 确保放大倍数在我们设置的范围内；Haptics 是加上震动效果func makeSureZoomScaleInBounds() { withAnimation { if steadyStateZoomScale < 1 { steadyStateZoomScale = 1 Haptics.impact(.light) } else if steadyStateZoomScale > maxScale { steadyStateZoomScale = maxScale Haptics.impact(.light) } }}// Haptics.swiftenum Haptics { static func impact(_ style: UIImpactFeedbackGenerator.FeedbackStyle) { let generator = UIImpactFeedbackGenerator(style: style) generator.impactOccurred() }} |
到目前为止，我们的图片预览器就实现了。是不是很简单？
