SwiftUI - 一步一步教你使用UIViewRepresentable封装网络加载视图（UIActivityIndicatorView）

程序员文章站 2022-07-10 21:58:12

网络加载视图，在一个联网的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 按钮，将会补全缺失代码。

SwiftUI - 一步一步教你使用UIViewRepresentable封装网络加载视图（UIActivityIndicatorView）

struct gcindicatorview: uiviewrepresentable {
    typealias uiviewtype = uiactivityindicatorview
}

将视图类型改成我们所需要的 uiactivityindicatorview ，这里定义好之后，makeuiview 和 updateuiview 方法定义都会返回此处定义的视图类型。接下来 xcode 还会提示缺失代码，我们继续重复上一步。

SwiftUI - 一步一步教你使用UIViewRepresentable封装网络加载视图（UIActivityIndicatorView）

在 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，这有什么好处呢？这里先看一下初始化时的代码提示。

SwiftUI - 一步一步教你使用UIViewRepresentable封装网络加载视图（UIActivityIndicatorView）

它的作用就是可以让你在初始化视图时，有两个方法让你选择，明确地告诉你可以忽略有 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)
    }
}