您好,登录后才能下订单哦!
这篇文章给大家分享的是有关怎么利用SwiftUI实现可缩放的图片预览器的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
要做一个程序,首先肯定是给它起个名字。既然是图片预览器(Image Previewer),再加上我自己习惯用的前缀 LBJ,就把它命名为 LBJImagePreviewer 吧。
既然是图片预览器,所以需要外部提供图片给我们;然后是可缩放,所以需要一个最大的缩放倍数。有了这些思考,可以把 LBJImagePreviewer 简单定义为:
import SwiftUI public 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 呢? 点击这里可以找到答案 >>
当用户点开图片预览器,当然是希望图片等比例占据整个图片预览器,所以需要知道图片预览器当前的尺寸和图片尺寸,从而通过计算让图片等比例占据整个图片预览器。
图片预览器当前的尺寸可以通过 GeometryReader 得到;图片大小可以直接从 UIImage 得到。所以我们可以把
LBJImagePreviewer 的 body 定义如下:
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:
imageContent .frame( width: imageSize.width, height: imageSize.height )
我们通过用 imageSize(fits: geometry) 的返回值乘以一个倍数,就可以改变 frame 的大小。这个倍数就是放大的倍数。因此我们定义一个变量记录倍数,然后通过双击手势改变它,就能把图片放大缩小,有变动的代码如下:
// 当前的放大倍数 @State private var zoomScale: CGFloat = 1 public 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。代码变动如下:
// 稳定的放大倍数,放大手势以此为基准来改变 zoomScale 的值 @State private var steadyStateZoomScale: CGFloat = 1 // 放大手势缩放过程中产生的倍数变化 @GestureState private 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.swift enum Haptics { static func impact(_ style: UIImpactFeedbackGenerator.FeedbackStyle) { let generator = UIImpactFeedbackGenerator(style: style) generator.impactOccurred() } }
到目前为止,我们的图片预览器就实现了。是不是很简单????
但是仔细回顾一下代码,目前这个图片预览器只支持 UIImage 的预览。如果预览器的用户查看的图片是 Image 呢?又或者是其他任何通过 View 来显示的图片呢?所以我们还得进一步增强预览器的可用性。
既然是任意 View,很容易想到泛型。我们可以将 LBJImagePreviewer 定义为泛型。代码变动如下:
public struct LBJImagePreviewer<Content: View>: View { private let uiImage: UIImage? private let contentInfo: (content: Content, aspectRatio: CGFloat)? private let maxScale: CGFloat public init( uiImage: UIImage, maxScale: CGFloat = LBJImagePreviewerConstants.defaultMaxScale ) { self.uiImage = uiImage self.contentInfo = nil self.maxScale = maxScale } public init( content: Content, aspectRatio: CGFloat, maxScale: CGFloat = LBJImagePreviewerConstants.defaultMaxScale ) { self.uiImage = nil self.contentInfo = (content, aspectRatio) self.maxScale = maxScale } @ViewBuilder var imageContent: some View { if let uiImage = uiImage { Image(uiImage: uiImage) .resizable() .aspectRatio(contentMode: .fit) } else if let content = contentInfo?.content { if let image = content as? Image { image.resizable() } else { content } } } func imageSize(fits geometry: GeometryProxy) -> CGSize { if let uiImage = uiImage { let hZoom = geometry.size.width / uiImage.size.width let vZoom = geometry.size.height / uiImage.size.height return uiImage.size * min(hZoom, vZoom) } else if let contentInfo = contentInfo { let geoRatio = geometry.size.width / geometry.size.height let imageRatio = contentInfo.aspectRatio let width: CGFloat let height: CGFloat if imageRatio < geoRatio { height = geometry.size.height width = height * imageRatio } else { width = geometry.size.width height = width / imageRatio } return .init(width: width, height: height) } return .zero } }
从代码中可以看到,如果是用 content 来初始化预览器,还需要传入 aspectRatio (宽高比),因为不能从传入的 content 得到它的比例,所以需要外部告诉我们。
通过修改,目前的图片预览器就可以支持任意 View 的缩放了。但如果我们就是要预览 UIImage,在初始化预览器的时候,它还要求指定泛型的具体类型。例如:
// EmptyView 可以换成其他任意遵循 `View` 协议的类型 LBJImagePreviewer<EmptyView>(uiImage: UIImage(named: "IMG_0001")!)
如果不加上 <EmptyView> 就会报错,这显然是不合理的设计。我们还得进一步优化。
在预览 UIImage 时,不需要用到任何与泛型有关的代码,所以只能将 UIImage 从 LBJImagePreviewer 剥离出来。
从复用代码的角度出发,我们可以想到新定义一个 LBJUIImagePreviewer 专门用于预览 UIImage,内部实现直接调用 LBJImagePreviewer 即可。
LBJUIImagePreviewer 的代码如下:
public struct LBJUIImagePreviewer: 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 { // LBJImagePreviewer 重命名为 LBJViewZoomer LBJViewZoomer( content: Image(uiImage: uiImage), aspectRatio: uiImage.size.width / uiImage.size.height, maxScale: maxScale ) } }
将 UIImage 从 LBJImagePreviewer 剥离后,LBJImagePreviewer 的职责只负责缩放 View,所以应该给它重命名,我将它改为 LBJViewZoomer。完整代码如下:
public struct LBJViewZoomer<Content: View>: View { private let contentInfo: (content: Content, aspectRatio: CGFloat) private let maxScale: CGFloat public init( content: Content, aspectRatio: CGFloat, maxScale: CGFloat = LBJImagePreviewerConstants.defaultMaxScale ) { self.contentInfo = (content, aspectRatio) self.maxScale = maxScale } @State private var steadyStateZoomScale: CGFloat = 1 @GestureState private var gestureZoomScale: CGFloat = 1 public var body: some View { GeometryReader { geometry in let zoomedImageSize = zoomedImageSize(in: geometry) ScrollView([.vertical, .horizontal]) { imageContent .gesture(doubleTapGesture()) .gesture(zoomGesture()) .frame( width: zoomedImageSize.width, height: zoomedImageSize.height ) .padding(.vertical, (max(0, geometry.size.height - zoomedImageSize.height) / 2)) } .background(Color.black) } .ignoresSafeArea() } } // MARK: - Subviews private extension LBJViewZoomer { @ViewBuilder var imageContent: some View { if let image = contentInfo.content as? Image { image .resizable() .aspectRatio(contentMode: .fit) } else { contentInfo.content } } } // MARK: - Gestures private extension LBJViewZoomer { // MARK: Tap func doubleTapGesture() -> some Gesture { TapGesture(count: 2) .onEnded { withAnimation { if zoomScale > 1 { steadyStateZoomScale = 1 } else { steadyStateZoomScale = maxScale } } } } // MARK: Zoom var zoomScale: CGFloat { steadyStateZoomScale * gestureZoomScale } func zoomGesture() -> some Gesture { MagnificationGesture() .updating($gestureZoomScale) { latestGestureScale, gestureZoomScale, _ in gestureZoomScale = latestGestureScale } .onEnded { gestureScaleAtEnd in steadyStateZoomScale *= gestureScaleAtEnd makeSureZoomScaleInBounds() } } func makeSureZoomScaleInBounds() { withAnimation { if steadyStateZoomScale < 1 { steadyStateZoomScale = 1 Haptics.impact(.light) } else if steadyStateZoomScale > maxScale { steadyStateZoomScale = maxScale Haptics.impact(.light) } } } } // MARK: - Helper Methods private extension LBJViewZoomer { func imageSize(fits geometry: GeometryProxy) -> CGSize { let geoRatio = geometry.size.width / geometry.size.height let imageRatio = contentInfo.aspectRatio let width: CGFloat let height: CGFloat if imageRatio < geoRatio { height = geometry.size.height width = height * imageRatio } else { width = geometry.size.width height = width / imageRatio } return .init(width: width, height: height) } func zoomedImageSize(in geometry: GeometryProxy) -> CGSize { imageSize(fits: geometry) * zoomScale } }
另外,为了方便预览 Image 类型的图片,我们可以定义一个类型:
public typealias LBJImagePreviewer = LBJViewZoomer<Image>
至此,我们的图片预览器就真正完成了。我们一共给外部暴露了三个类型:
LBJUIImagePreviewer LBJImagePreviewer LBJViewZoomer
感谢各位的阅读!关于“怎么利用SwiftUI实现可缩放的图片预览器”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。