Shulou(Shulou.com)06/03 Report--

This article is about how to use SwiftUI to implement a scalable image previewer. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Realization process

A preliminary conception of the procedure

To make a program, the first thing is to give it a name. Since it is a picture previewer (ImagePreviewer), plus my own used prefix LBJ, let's name it LBJImagePreviewer.

Since it is a picture previewer, we need an external image to provide us; then it is scalable, so we need a maximum zoom multiple. With these thoughts, LBJImagePreviewer can be simply defined as:

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}

In the above code, a default value is set for maxScale.

In addition, you can also see that the default value of maxScale is set by LBJImagePreviewerConstants.defaultMaxScale instead of writing 16 directly. The purpose of doing this is to organize the numerical values and empirical values used in the code into one place to facilitate subsequent modifications. This is a good programming habit.

Careful readers may also notice that LBJImagePreviewerConstants is an enum type. Why not use struct or class? Click here to find the answer > >

Show UIImage

When the user clicks on the picture previewer, of course, they want the picture to occupy the whole picture previewer in equal proportion, so they need to know the current size of the picture previewer and the picture size, so as to make the picture equal proportion occupy the whole picture previewer by calculation.

The current size of the image previewer can be obtained through GeometryReader; the image size can be obtained directly from UIImage. So we can put

The body definition for LBJImagePreviewer is as follows:

Public struct LBJImagePreviewer: View {public var body: some View {GeometryReader {geometry in / / is used to obtain the size occupied by the image previewer let imageSize = imageSize (fits: geometry) / / calculate the size ScrollView ([. Vertical, .preview]) {imageContent .frame (width: imageSize.width) when the picture is laid all over the previewer in equal proportion. Height: imageSize.height) .padding (.adding, (max (0) Geometry.size.height-imageSize.height) / 2)) / / Center the picture in the vertical direction of the previewer} .background (Color.black)} .resolresSafeArea ()} private extension LBJImagePreviewer {var imageContent: some View {Image (uiImage: uiImage) .resizable () .aspectRatio (contentMode: .fit)} / / calculates the number of images that fill the entire previewer with equal proportions Size 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 times CGFloat static func * (lhs: Self, rhs: CGFloat)-> CGSize {CGSize (width: lhs.width * rhs, height: lhs.height * rhs)}}

So we show the picture in ScrollView.

Double-click Zoom

If you want the content of ScrollView to scroll, you must make it larger than the size of ScrollView. Along this line of thinking, we can modify the size of the imageContent to zoom in and out, that is, modify the following frame:

ImageContent .frame (width: imageSize.width, height: imageSize.height)

We can change the size of the frame by multiplying the return value of imageSize (fits: geometry) by a multiple. This multiple is the multiple of magnification. So we define a variable record multiple, and then by double-clicking the gesture to change it, we can zoom in and out of the picture. The changed code is as follows:

/ / current magnification @ Stateprivate var zoomScale: CGFloat = 1public var body: some View {GeometryReader {geometry in let zoomedImageSize = zoomedImageSize (fits: geometry) ScrollView ([.zoom, .zoom]) {imageContent .gesture (doubleTapGesture ()) .frame (width: zoomedImageSize.width, height: zoomedImageSize.height) .padding (.adding, (max (0) Geometry.size.height-zoomedImageSize.height) / 2)} .background (Color.black)} .ResSafeArea ()} / double-click gesture func doubleTapGesture ()-> some Gesture {TapGesture (count: 2) .onEnded {withAnimation {if zoomScale > 1} else {background = maxScale} / / when zooming The size of the picture func zoomedImageSize (fits geometry: GeometryProxy)-> CGSize {imageSize (fits: geometry) * zoomScale} enlarge the gesture zoom

The principle of magnifying gesture zooming is the same as double-clicking, which is to find a way to zoom the picture by modifying the zoomScale. The magnifying gesture in SwiftUI is MagnificationGesture. The code changes are as follows:

/ / stable magnification of magnification, based on which the gesture is enlarged to change the value of zoomScale @ Stateprivate var steadyStateZoomScale: CGFloat = 1amp / magnify the change in magnification during gesture zooming @ GestureStateprivate var gestureZoomScale: CGFloat = 1max / becomes read-only The magnification of the current image var zoomScale: CGFloat {steadyStateZoomScale * gestureZoomScale} func zoomGesture ()-> some Gesture {MagnificationGesture () .upwards ($gestureZoomScale) {latestGestureScale, gestureZoomScale, _ in / / during zooming, constantly update the value of `gestureZoomScale` gestureZoomScale = latestGestureScale} .onEnded {gestureScaleAtEnd in / / the end of the gesture, update the value of steadyStateZoomScale / / at this point, the gestureZoomScale value will be reset to the initial value 1 steadyStateZoomScale * = gestureScaleAtEnd makeSureZoomScaleInBounds ()}} / / make sure the magnification is within the range set by us; Haptics is plus the vibration effect 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 ()}}

So far, our picture previewer has been implemented. Isn't it easy? ???

But a closer look at the code shows that currently this image previewer only supports UIImage previews. What if the user of the previewer views a picture of Image? Or any other picture that is displayed through View? So we need to further enhance the availability of the previewer.

Preview any View

Since it's an arbitrary View, it's easy to think of generics. We can define LBJImagePreviewer as generic. The code changes are as follows:

Public struct LBJImagePreviewer: 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(uiImage: UIImage(named: "IMG_0001")!) 如果不加上 就会报错，这显然是不合理的设计。我们还得进一步优化。 将 UIImage 从 LBJImagePreviewer 剥离 在预览 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: 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: - Subviewsprivate extension LBJViewZoomer { @ViewBuilder var imageContent: some View { if let image = contentInfo.content as? Image { image .resizable() .aspectRatio(contentMode: .fit) } else { contentInfo.content } }}// MARK: - Gesturesprivate 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 () .upended ($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 Methodsprivate 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}}

In addition, to make it easy to preview pictures of type Image, we can define a type:

Public typealias LBJImagePreviewer = LBJViewZoomer

At this point, our picture previewer is really complete. We have exposed three types to the outside world:

LBJUIImagePreviewerLBJImagePreviewerLBJViewZoomer, thank you for your reading! On "how to use SwiftUI to achieve scalable picture previewer" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.