網路載入視圖，在一個聯網的APP上可以講得上是必須要的組件，在SwiftUI中它並沒有提供如 UIKit 中的UIActivityIndicatorView直接提供給我們調用，但是我們可以通過 SwiftUI 中的UIViewRepresentable協議封裝UIActivityIndicatorV... ...
概述
網路載入視圖，在一個聯網的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，群主喜歡看熱鬧，當吃瓜人員。進來時填寫你在哪裡看到此文章的，並介紹下自己，一句話就行。
