SwiftUI - 一步一步教你使用UIViewRepresentable封裝網路載入視圖(UIActivityIndicatorView)

来源:https://www.cnblogs.com/GarveyCalvin/archive/2020/04/18/representtable-uikit.html
-Advertisement-
Play Games

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • mysql的inner join等價於where條件連接查詢 內連接 inner join 省略形式 join 外連接 左連接 left outer join 省略形式 left join 右連接 right outer join 省略形式 right join 兩張表內容: mysql> use ...
  • 首先要明白為什麼要用 mysql 的主從複製: 1–在從伺服器可以執行查詢工作 (即我們常說的讀功能),降低主伺服器壓力;(主庫寫,從庫讀,降壓) 2–在從主伺服器進行備份,避免備份期間影響主伺服器服務;(確保數據安全) 3–當主伺服器出現問題時,可以切換到從伺服器。(提升性能) 來說一下主從複製的 ...
  • 開發多用戶、資料庫驅動的應用時,最大的難點是:一方面要最大程度的利用資料庫的併發訪問,一方面還要確保每個用戶能以一致的方式讀取和修改數據,為此有了鎖的機制。 6.1 什麼是鎖 鎖機制用於管理對共用資源的併發訪問。InnoDB除了會在行級別上對錶數據上鎖,也會在資料庫內部其他多個地方上鎖,從而允許對多 ...
  • mysql 分頁使用 limit關鍵字,limit x,y (x代表從哪條數據開始,y代表頁面大小。mysql第一條數據在limit計算時索引為0) limit 10 前10條 limit 0,10 從第1條開始的10條 limit 10,10 從第 11 條開始的 10 條 limit 100,1 ...
  • 一、quicklist簡介 Redis列表是簡單的字元串列表,按照插入順序排序。你可以添加一個元素到列表的頭部(左邊)或者尾部(右邊)。 一個列表最多可以包含 232 - 1 個元素 (4294967295, 每個列表超過40億個元素)。 其底層實現所依賴的內部數據結構就是quicklist,主要特 ...
  • 微信公眾號中(這裡)看到一個關於MySQL的innodb_deadlock_detect與併發相關的細節,覺得比較有意思,也即innodb_deadlock_detect這個參數的設置問題 死鎖檢測是一個MySQL Server層的自動檢測機制,可以及時發現兩個或者多個session間互斥資源的申請 ...
  • 一、什麼是存儲過程 Oracle存儲過程可以說是一個記錄集吧,它是由一些PL/SQL語句組成的代碼塊,這些PL/SQL語句代碼像一個方法一樣實現一些功能(對單表或多表的增刪改查),然後再給這個代碼塊取一個名字,在用到這個功能的時候調用他就行了。 存儲過程的好處: 由於資料庫執行動作時,是先編譯後執行 ...
  • 前言: 說起HBase這門技術,在認知上對於稍微接觸或使用過它的人來講,可能只是百千資料庫中一個很普通的庫,大概就像我對Redis的認知一樣:緩存嘛!可對於HBase,我確實是帶著某些感情在的。今日突然萌生了一個生趣的想法,想拋開技術的視角,從情感的角度,像寫小說一樣,寫寫這位老朋友,這可能會有點滑 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...