Ffbd4d66521a7fc0756a4dc7990b1f34
SwiftUI复用UIKit历史代码之等待提示框的制作教程(有视频)

SwiftUI目前还在发展阶段,有些视图还未能提供。但是苹果给我们提供复用机制,很容易将历史代码移植到SwiftUI世界中。下面介绍一下如何通过UIViewRepresentable将UIKit的UIActivityIndicator封装成SwiftUI控件。

先来看效果

SwiftUI等待框的制作

SwiftUI等待框的制作

这个小例子实现了当等待框弹出时,背景进行了毛玻璃效果处理。为了给大家演示等待框的显示与隐藏方法,我们还制作了两个个性化按钮。

好了,效果看完了接下来我们一起来看看实际代码吧。

代码实现

第一步 新建个项目

项目名称就叫SwiftUI Loading 。
第一步 新建个项目

第一步 新建个项目

第二步 封装个ActivityIndi​​cator View

首先,我们将UIActivityIndi​​cator包装到一个ActivityIndi​​cator视图中。封装完成后,我们就可以在SwiftUI中随意使用了。另外,为了方便控制可以增加一个变量 isAnimating来作为动画的开关。

请将下面代码复制到刚才我们创建项目到ContentView.swift中

import SwiftUI

struct ActivityIndicator: UIViewRepresentable {

    @Binding var isAnimating: Bool
    let style: UIActivityIndicatorView.Style

    func makeUIView(context: UIViewRepresentableContext<ActivityIndicator>) -> UIActivityIndicatorView {
        return UIActivityIndicatorView(style: style)
    }

    func updateUIView(_ uiView: UIActivityIndicatorView, context: UIViewRepresentableContext<ActivityIndicator>) {
        isAnimating ? uiView.startAnimating() : uiView.stopAnimating()
    }
}

在实际开发中,我们很少单独使用UIActivityIndi​​cator,因为实在太单调了。我通常用UILabel来告知用户我们正在处理的事项,例如:加载,计算,载入等,在SwiftUI世界里我们用Text就可以很好的完成这个任务。

将ActivityIndi​​cator封装成作为SwiftUI控件后,我们就可以轻松地利用SwiftUI强大组合功能,联合其他View来创建功能强大的HUD(Head up Display))提示框了。

下面我们就用新做的等待控件,来组装一个内容丰富的等待提示框吧

第三步 组装一个等待提示框

代码有些长,没关系我们先将他们复制到ContentView.swift中吧。

struct LoadingView<Content>: View where Content: View {

    @Binding var isShowing: Bool
    @State var isAnimating: Bool = true
    var content: () -> Content

    var body: some View {
        GeometryReader { geometry in
            ZStack(alignment: .center) {

                self.content()
                    .disabled(self.isShowing)
                    .blur(radius: self.isShowing ? 3 : 0)


                VStack {
                    Text("Loading...")
                    ActivityIndicator(isAnimating: self.$isAnimating, style: .large)
                    Button(action:{
                        self.isShowing = false
                        //self.isAnimating = false

                    }){
                        Text(" Hide ")
                    }.background(Color.white)
                        .cornerRadius(2.0)
                    .shadow(radius: 2)
                }

                .frame(width: geometry.size.width / 2,
                       height: geometry.size.height / 5)
                    .background(Color.secondary.colorInvert())
                    .foregroundColor(Color.primary)
                    .cornerRadius(20)
                    .opacity(self.isShowing ? 1 : 0)

            }
        }
    }

}

好了,等待提示页面已经制作好了,接下来我们来制作主页面

第四步 主页面制作

我们先看看主界面的最终效果
主界面的最终效果

主界面的最终效果

我们先添加一个控制显示的变量

  @State var isShowing: Bool = true

剩下的界面代码如下,请用下面的代码替换ContentView中的代码
```
struct ContentView: View {
@State var isShowing: Bool = true
var body: some View {

    LoadingView(isShowing:self.$isShowing) {
        VStack{
            Button(action:{
                self.isShowing = !self.isShowing
                //self.isAnimating = false

            }){
                Text(" Show loading ").foregroundColor(.white)
            }.background(Color.orange)
                .cornerRadius(2.0)
            .shadow(radius: 2)
top Created with Sketch.