網路載入視圖,在一個聯網的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,群主喜歡看熱鬧,當吃瓜人員。進來時填寫你在哪裡看到此文章的,並介紹下自己,一句話就行。