SwiftUI - 一步一步教你使用UIViewRepresentable封裝網絡加載視圖（UIActivityIndicatorView）

SwiftUI – 一步一步教你使用UIViewRepresentable封裝網絡加載視圖（UIActivityIndicatorView）

2020 年 4 月 18 日
筆記
iOS, SwiftUI, UIActivityIndicatorView, UIViewRepresentable, 手機開發

概述

網絡加載視圖，在一個聯網的APP上可以講得上是必須要的組件，在SwiftUI中它並沒有提供如 UIKit 中的UIActivityIndicatorView直接提供給我們調用，但是我們可以通過 SwiftUI 中的UIViewRepresentable協議封裝UIActivityIndicatorView來使用它。

介紹 UIViewRepresentable

那麼UIViewRepresentable到底有着什麼樣的作用呢？

它可以將 UIKit 封裝成 SwiftUI View，這意味着我們可以通過它來搭建橋樑，可以很方便地復用以往在 UIKit 所有的組件，這很強大。

接下來介紹它的兩個必須實現的協議。

/// 創建一個 UIView 的視圖組件用於展示
func makeUIView(context: Self.Context) -> Self.UIViewType

/// 更新視圖組件到最新的內容
func updateUIView(_ uiView: Self.UIViewType, context: Self.Context)

封裝網絡加載視圖（UIActivityIndicatorView）

我們開始封裝網絡加載視圖（UIActivityIndicatorView），創建一個實現了 UIViewRepresentable 協議的結構體。

struct GCIndicatorView: UIViewRepresentable {}

接下來的步驟均按照Xcode的提示進行，不做任何的簡化操作，如果你們想要知道如何簡化，可以評論或私信告訴我，我下期補這個內容。

Xcode 提示缺少內容，點擊紅色小框後點擊 Fix 按鈕，將會補全缺失代碼。

struct GCIndicatorView: UIViewRepresentable {
    typealias UIViewType = UIActivityIndicatorView
}

將視圖類型改成我們所需要的 UIActivityIndicatorView ，這裡定義好之後，makeUIView 和 updateUIView 方法定義都會返回此處定義的視圖類型。接下來 Xcode 還會提示缺失代碼，我們繼續重複上一步。

在 makeUIView 方法體內創建 UIActivityIndicatorView 視圖，它接受一個參數 UIActivityIndicatorView.Style，因此我們使用 let 定義一個 type 類型為 UIActivityIndicatorView.Style 的屬性。

let style: UIActivityIndicatorView.Style
    
func makeUIView(context: UIViewRepresentableContext<GCIndicatorView>) -> UIActivityIndicatorView {
    return UIActivityIndicatorView(style: style)
}

因為 Style 類型是定義在 UIActivityIndicatorView 裏面的，所以在使用的時候提示是 UIActivityIndicatorView.Style，這樣的好處是不會污染項目的命名空間，它只有兩個類型可選。

public enum Style : Int {
      @available(iOS 13.0, *)
      case medium /// 尺寸是中等

      @available(iOS 13.0, *)
      case large // 尺寸是大的
}

我們再定義一個 color 屬性，用於改變加載視圖的顏色。在初始化視圖時，為了可以選擇忽略此屬性，因此我們使用 var 定義為可變屬性。

var color: UIColor? = nil
    
func makeUIView(context: UIViewRepresentableContext<GCIndicatorView>) -> UIActivityIndicatorView {
    let activityIndicatorView = UIActivityIndicatorView(style: style)
    activityIndicatorView.color = color
    return activityIndicatorView
}

這裡有一個小技巧，不知道你們發現了沒有？我在定義 color 屬性的時候，設定了它的默認值是 nil，這有什麼好處呢？這裡先看一下初始化時的代碼提示。

它的作用就是可以讓你在初始化視圖時，有兩個方法讓你選擇，明確地告訴你可以忽略有 color 或者沒有 color 的定義。當然你不特定去設定默認值為 nil，你也可以在初始化時手動刪除 color 字段，但我覺得按我這樣的方法會更清晰一點，在調用的時侯。

我們在開始請求網絡時顯示加載視圖，在網絡請求後隱藏加載視圖，為了實現這個操作，我們定義一個布爾類型的 isShowing 屬性，同時還需使用 @Binding 修飾屬性。

使用 @Binding 修飾的屬性，屬性會變成一個引用類型，從父視圖傳遞給子視圖，這樣父子視圖的狀態就可以關聯起來了，當屬性變化時會同時改變父子視圖。

在 UIViewRepresentable 里，它的改變會調起 updateUIView 方法，我們可以在此方法中更新視圖。

func updateUIView(_ uiView: UIActivityIndicatorView, context: UIViewRepresentableContext<GCIndicatorView>) {
    isShowing ? uiView.startAnimating() : uiView.stopAnimating()
}

小知識： UIActivityIndicatorView 組件需要調起 startAnimating 時才會顯示視圖，否則它是隱藏的

使用封裝好的加載視圖 GCIndicatorView

我們需要讓加載視圖顯示在界面的正中間，因此使用 ZStack，它可以使在其內的組件疊加起來。同時需要定義一個布爾型的 isShowing 屬性，並使用 @State 修飾它。使用 @State 修飾的屬性，可以在其值發生變更時同時更新其關聯的所有視圖。

我們在界面上創建一個 ZStack，裏面包含有一個按鈕，點擊按鈕時將顯示加載視圖，在3秒後自動消失。通過條件語句判斷 isShowing 為 true 時才顯示視圖，否則隱藏視圖。

在某些情況下，在顯示加載視圖的時候不允許用戶點擊其它視圖，需要等待網絡請求完成後才能進行操作，因此需要給 ZStack 加上 disabled 方法，用于禁止操作事件。

struct GCHomeView: View {
    @State var isShowing = false
    
    var body: some View {
        ZStack {
            Button(action: {
                self.isShowing = true
                DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
                    self.isShowing = false
                }
            }) {
                Text("網絡請求開始")
            }
            if isShowing {
                GCIndicatorView(isShowing: $isShowing, style: .large)
            }
        }
        .disabled(isShowing)
    }
}

效果預覽

Tags: iOS SwiftUI UIActivityIndicatorView UIViewRepresentable 手機開發