SwiftUI - 与UIKit集成

2019-11-08 本文已影响0人西西的一天

说到与UIKit的集成不免会觉得有些鸡肋，因为现在很难做到只支持iOS13，不过到iOS14时，这种集成就变得必不可少了吧，在此先预热一下咯 ~ 先想想使用场景：

在现有基于UIKit的App中使用SwiftUI - 这应该是最常见的一种方式；
在SwiftUI中使用UIKit - 新写的页面是用了SwiftUI，但不免会跳转到原先的页面，或是在SwiftUI要使用UIKit写的一些View，毕竟重写原先所有的view成本有些大，需要逐步替换。

UIKit中使用SwiftUI

还记得我们在SwiftUI 初识中提到的UIHostingController，它是SwiftUI的容器，同时也是UIViewController的子类。集成方式也就显而易见咯。

@IBAction func showSwiftUIByCode(_ sender: Any) {
  let vc = UIHostingController(rootView: ContentView())
  self.show(vc, sender: nil)
}

若使用的是Segue：

@IBSegueAction func openSwiftUI(_ coder: NSCoder) -> UIViewController? {
  return UIHostingController(coder: coder, rootView: ContentView())
}

在SwiftUI中使用UIKit

首先，我们来看看，如何从SwiftUI跳转到一个UIViewController。先写一个最简单的UIViewController：

class ViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = UIColor.red
  }
}

在SwiftUI中没有提供类似self.show(vc, sender: nil)的方式，需要通过一个wrapper把ViewController包装一下，可以认为这就是一个适配器。SwiftUI提供了UIViewControllerRepresentable协议，来承担适配的功能，写一个自己的ViewControllerRepresentation实现这个协议。

import SwiftUI

struct ViewControllerRepresentation: UIViewControllerRepresentable {
  typealias UIViewControllerType = ViewController
    
  func makeUIViewController(context: UIViewControllerRepresentableContext<ViewControllerRepresentation>) -> ViewControllerRepresentation.UIViewControllerType {
    return UIStoryboard(name: "Storyboard", bundle: nil).instantiateViewController(identifier: "ViewController") as! ViewController
}
    
  func updateUIViewController(_ uiViewController: ViewControllerRepresentation.UIViewControllerType, context: UIViewControllerRepresentableContext<ViewControllerRepresentation>) {}
}

其中的typealias UIViewControllerType = ViewController指明了要包裹的UIViewController的具体类型，并实现两个方法，一个是make，一个是update。其中make顾名思义，就是如何生成我们的ViewController，大家可以用自己喜欢的方式初始化它。update暂时放空，它的作用是如何更新这个VC。我们会在下个示例中来看看它的用法。
接下来，我们要在SwiftUI中来调用我们这里定义的ViewControllerRepresentation。

var body: some View {
  NavigationView {
    VStack {
      HStack {
        TargetView(showAlert: $showAlert, rTarget: rTarget, gTarget: gTarget, bTarget: bTarget)
        MatchingView(rGuess: $rGuess, gGuess: $gGuess, bGuess: $bGuess, counter: $counter.counter)
      }
      Button(action: { self.showAlert = true }) { Text("Hit me") }.alert(isPresented: $showAlert) { () -> Alert in
        Alert(title: Text("Your Score"),message: Text(String(computeScore())))
      }.frame(width: nil, height: 35, alignment: .center)
      SlideView(value: $rGuess, textColor: .red)
      SlideView(value: $gGuess, textColor: .green)
      SlideView(value: $bGuess, textColor: .blue)
      NavigationLink(destination: ViewControllerRepresentation()) {
        Text("Play BullsEye").frame(width: nil, height: 31, alignment: .center)
      }.padding(.bottom)
    }
  }
}

在底部我们放了一个NavigationLink，它就是在NavigationView中跳转至其他页面的一个链接容器，指明他的destination就是我们刚刚定义好的ViewControllerRepresentation，run一下，大功告成。

此时，不免会想，如何传递参数呢？这个UIViewController如何将一下返回值回传给SwiftUI呢？我们用下一个例子来说明，这个例子中是在SwiftUI中放置一个UIKit定义的UIView，先看code：

import SwiftUI
import UIKit

struct ColorUISlider: UIViewRepresentable {
  var color: UIColor
  @Binding var value: Double
    
  typealias UIViewType = UISlider
    
  func makeUIView(context: UIViewRepresentableContext<ColorUISlider>) -> UISlider {
    let slider = UISlider(frame: .zero)
    slider.thumbTintColor = color
    slider.value = Float(value)
    slider.addTarget(context.coordinator, action: #selector(Coordinator.valueChanged(_:)), for: .valueChanged)
    return slider
  }
    
  func updateUIView(_ uiView: UISlider, context: UIViewRepresentableContext<ColorUISlider>) {
    uiView.value = Float(value)
  }
    
  class Coordinator: NSObject {
    var value: Binding<Double>
    init(value: Binding<Double>) {
      self.value = value
    }
        
    @objc func valueChanged(_ sender: UISlider) {
      self.value.wrappedValue = Double(sender.value)
    }
  }
    
  func makeCoordinator() -> ColorUISlider.Coordinator {
    return Coordinator(value: $value)
  }
}

code有点多，我们一点点看。首先想用再SwiftUI中使用UIView，同样需要一个适配器，在UIViewController时，用了UIViewControllerRepresentable，UIView提供了同样的协议UIViewRepresentable，需要的方法也如出一辙：

typealias UIViewType = UISlider
func makeUIView(...)
func makeUIView(...)

typealias UIViewType = UISlider指定了需要包装的UIView的类型，make方法要求返回UIView的实例，这里无需指定该view的frame或约束。

还记得我们之前留下的问题么？如何从SwiftUI中传值给UIView(UIViewController是相同的)，直接给这个ColorUISlider添加属性，通过struct的默认构造函数，便可以将参数传入：

ColorUISlider(color: .red, value: .constant(0.5))

那么这个ColorUISlider如何影响其父view呢？我们看到了这个@Binding参数@Binding var value: Double（一个引用类型，如果不记得了可以查阅之前的一篇文章Data Binding），但Binding是没有办法在UIView中直接使用的，还需另一个类，Coordinator，如何使用呢？

添加内部类：

class Coordinator: NSObject {
  var value: Binding<Double>
  init(value: Binding<Double>) {
    self.value = value
  }
        
  @objc func valueChanged(_ sender: UISlider) {
    self.value.wrappedValue = Double(sender.value)
  }
}

实现UIViewRepresentable的另一个方法makeCoordinator:

func makeCoordinator() -> ColorUISlider.Coordinator {
  return Coordinator(value: $value)
}

当我们初始化UISlider的时候，给它添加了一个行为：

slider.addTarget(context.coordinator, action: #selector(Coordinator.valueChanged(_:)), for: .valueChanged)

在我们滑动滑块的时候，会触发：

@objc func valueChanged(_ sender: UISlider) {
  self.value.wrappedValue = Double(sender.value)
}

从而使Binding起作用，影响外面传入的value，进而作用于父View。

到此为止，我们集成SwiftUI的预热已经结束，还有很多细节没有涉及，比如context。毕竟是预热嘛，用到的时候再来重温咯~

SwiftUI - 与UIKit集成

UIKit中使用SwiftUI

在SwiftUI中使用UIKit

猜你喜欢

热点阅读