如何利用SwiftUI實現可縮放的圖片預覽器

Posted on 2021-09-15 by WalkonNet

前言

在開發中，我們經常會遇到點擊圖片查看大圖的需求。在 Apple 的推動下，iOS 開發必定會從 UIKit 慢慢向 SwiftUI 轉變。為瞭更好地適應這一趨勢，今天我們用 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 呢？

在 Swift 中定義靜態方法，class / struct / enum 三者如何選擇？

在開發過程中，我們經常會遇到需要定義一些靜態方法的需求。通常我們會想到用 class 和 struct 去定義，然而卻忽略瞭 enum 也可以擁有靜態方法。那麼問題來瞭：既然三者都可以定義靜態方法，那麼我們應該如何選擇？
下面直接給出答案：

class：class 是引用類型，支持繼承。如果你需要這兩個特性，那麼選擇 class。
struct：struct 是值類型，不支持繼承。如果你需要值類型，並且某些時候需要這個類型的實例，那麼用 struct。
enum：enum 也是值類型，一般用來定義一組相關的值。如果我們想要的靜態方法是一系列的工具，不需要任何的實例化和繼承，那麼用 enum 最合適。

另外，其實這個規則也適用於靜態變量。

顯示 UIImage

當用戶點開圖片預覽器，當然是希望圖片等比例占據整個圖片預覽器，所以需要知道圖片預覽器當前的尺寸和圖片尺寸，從而通過計算讓圖片等比例占據整個圖片預覽器。

圖片預覽器當前的尺寸可以通過 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

既然是任意 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 從 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<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

源碼

我已經將圖片預覽器制作成一個 Swift Package，大傢可以點擊查看。LBJImagePreviewer

在源碼中，我在 LBJViewZoomer 多添加瞭一個屬性 doubleTapScale，表示雙擊放大時的倍數，進一步優化用戶使用體驗。

總結

這個圖片預覽器的實現難度並不高，關鍵點在於對 ScrollView 和放大手勢的理解。
存在問題

雙擊放大時，圖片隻能從中間位置放大，無法在點擊位置放大。（目前 ScrollView 無法手動設置 contentOffset，等待 ScrollView 更新以解決這個問題。）

到此這篇關於如何利用SwiftUI實現可縮放圖片預覽器的文章就介紹到這瞭,更多相關SwiftUI可縮放圖片預覽器內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

如何利用SwiftUI實現可縮放的圖片預覽器

目錄

前言

實現過程

程序的初步構想

顯示 UIImage

雙擊縮放

放大手勢縮放

預覽任意 View

將 UIImage 從 LBJImagePreviewer 剝離

源碼

總結

推薦閱讀：

發佈留言取消回覆

近期文章

目錄

前言

實現過程

程序的初步構想

顯示 UIImage

雙擊縮放

放大手勢縮放

預覽任意 View

將 UIImage 從 LBJImagePreviewer 剝離

源碼

總結

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆