概述

網路載入檢視，在一個聯網的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)
    }
}

效果預覽

Demo 原始碼下載

我已經把 Demo 上傳至 GitHub 上面，有需要的朋友可以去下載執行一下，當然你也可以跟著文章去做一遍，這樣更有利於你掌握此方面的知識。

文章篇幅有點長，雖然教的東西也挺簡單，但概述得比較詳細。任何東西都是先從簡單入手的，才不會造成勸退不是嗎？哈哈，此文章針對於新手而言還是很友好的，對於已經會的人來講就可能廢話有點多了，如果必須要噴，請輕噴，我比較玻璃心。

如果你覺得本文章對你有幫助，請關注我，你的關注就是我寫文章的動力，下期會更精彩噢！

關於作者

博文作者：GarveyCalvin

微博：https://weibo.com/feiyueharia

部落格園：https://www.cnblogs.com/GarveyCalvin

本文版權歸作者，歡迎轉載，但必須保留此段宣告，並給出原文連結，謝謝合作！

公眾號

作者第一次運營公眾號，請你們一定要關注我的公眾號，給我點動力，後期主要運營公眾號為主。這是第一篇釋出文章，需要你們的支援，謝謝你們！

QQ群

一起討論 SwiftUI，群主喜歡看熱鬧，當吃瓜人員。進來時填寫你在哪裡看到此文章的，並介紹下自己，一句話就行。

相關推薦