本篇文章主要内容是Hosting+Representable，但我们首先会讲解一下在iOS14中，ScrollView新增的一个功能。
ScrollViewProxy & ScrollViewReader
在iOS14中，ScrollView新增了一个ScrollViewProxy和ScrollViewReader。
public struct ScrollViewProxy {
public func scrollTo<ID>(_ id: ID, anchor: UnitPoint? = nil) where ID : Hashable
}
@frozen public struct ScrollViewReader<Content> : View where Content : View {
public var content: (ScrollViewProxy) -> Content
@inlinable public init(@ViewBuilder content: @escaping (ScrollViewProxy) -> Content)
/// The content and behavior of the view.
public var body: some View { get }
public typealias Body = some View
}
- ScrollViewReader需要写在ScrollView内部，其目的是获取ScrollViewProxy
- ScrollViewProxy中有一个方法，能够让ScrollView滚动到某个id的位置
image
仔细观察上图，可以发现，点击最左边的按钮，确实能够让ScrollView滚动到某个指定的位置，scrollTo<ID>(_ id: ID, anchor: UnitPoint? = nil) where ID : Hashable函数中，有一个参数叫anchor，当其值为nil时，系统会自动计算出滚动到该位置最短的距离，当不为nil时区别是：
-
leading表示滚动到与ScrollView左对齐 -
.center表示滚动到ScrollView的中间 -
.trailing表示滚动到与ScrollView右对齐
用起来非常简单，但是值得注意的是，按钮必须在ScrollView中才行。代码如下：
struct Example1: View {
var body: some View {
ScrollView(.horizontal) {
ScrollViewReader { scrollViewProxy in
LazyHStack(spacing: 10) {
...
ForEach(0..<20) { index in
Text("\(index)")
.frame(width: 100, height: 240)
.background(index == 6 ? Color.green : Color.orange.opacity(0.5))
.cornerRadius(3.0)
}
}
.padding(.horizontal, 10)
}
}
.frame(height: 300, alignment: .center)
}
}
ScrollViewRepresentable
上边提到的新增的这个功能只能算是一个非常小的功能，在UIKit中，ScrollView有十分丰富的功能，我们知道，通过ScrollViewRepresentable可以让我们直接使用UIKit中的View，代码类似于：
struct Example2: View {
var body: some View {
ScrollViewRepresentable()
.frame(width: 200, height: 100)
}
struct ScrollViewRepresentable: UIViewRepresentable {
func makeUIView(context: Context) -> UIScrollView {
let scrollView = UIScrollView()
scrollView.backgroundColor = UIColor.green
return scrollView
}
func updateUIView(_ uiView: UIScrollView, context: Context) {}
}
}
在这种情况下，只能让我们访问到UIScrollView，但是如果在其上边添加SwiftUI中的View就做不到了。因此这种方案pass掉。
Hosting+Representable
所谓的Hosting指的是UIHostingController<Content>，而Representable则指的是UIViewControllerRepresentable，只需把这两者结合起来，能够获取强大的能力。
那么UIHostingController是什么呢？先给大家看一张图：
image
很明显，它就是SwiftUI和UIKit中的一个桥梁，系统会把SwiftUI中的View翻译成UIKit中的View。我们最终的目的是实现下边两张图的效果：
- 监听当前滚动的offset
- 滚动到指定的offset处
image
image
class MyScrollViewUIHostingController<Content>: UIHostingController<Content> where Content: View {
var offset: Binding<CGFloat>
let isOffsetX: Bool
var showed = false
var sv: UIScrollView?
init(offset: Binding<CGFloat>, isOffsetX: Bool, rootView: Content) {
self.offset = offset
self.isOffsetX = isOffsetX
super.init(rootView: rootView)
}
@objc dynamic required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func viewDidAppear(_ animated: Bool) {
/// 保证设置一次监听
if showed {
return
}
showed = true
/// 查找UIScrollView
sv = findScrollView(in: view)
/// 设置监听
sv?.addObserver(self,
forKeyPath: #keyPath(UIScrollView.contentOffset),
options: [.old, .new],
context: nil)
/// 滚动到指定位置
scroll(to: offset.wrappedValue, animated: false)
super.viewDidAppear(animated)
}
func scroll(to position: CGFloat, animated: Bool = true) {
if let s = sv {
if position != (self.isOffsetX ? s.contentOffset.x : s.contentOffset.y) {
let offset = self.isOffsetX ? CGPoint(x: position, y: 0) : CGPoint(x: 0, y: position)
sv?.setContentOffset(offset, animated: animated)
}
}
}
override func observeValue(forKeyPath keyPath: String?,
of object: Any?,
change: [NSKeyValueChangeKey: Any]?,
context: UnsafeMutableRawPointer?) {
if keyPath == #keyPath(UIScrollView.contentOffset) {
if let s = self.sv {
DispatchQueue.main.async {
self.offset.wrappedValue = self.isOffsetX ? s.contentOffset.x : s.contentOffset.y
}
}
}
}
func findScrollView(in view: UIView?) -> UIScrollView? {
if view?.isKind(of: UIScrollView.self) ?? false {
return view as? UIScrollView
}
for subview in view?.subviews ?? [] {
if let sv = findScrollView(in: subview) {
return sv
}
}
return nil
}
}
MyScrollViewUIHostingController中，可以直接访问到UIScrollView，并且把传过来的Content设置为rootView，上边这段代码还是非常简单的。
struct MyScrollViewControllerRepresentable<Content>: UIViewControllerRepresentable where Content: View {
var offset: Binding<CGFloat>
let isOffsetX: Bool
var content: Content
func makeUIViewController(context: Context) -> MyScrollViewUIHostingController<Content> {
MyScrollViewUIHostingController(offset: offset, isOffsetX:isOffsetX, rootView: content)
}
func updateUIViewController(_ uiViewController: MyScrollViewUIHostingController<Content>, context: Context) {
uiViewController.scroll(to: offset.wrappedValue, animated: true)
}
}
MyScrollViewControllerRepresentable实现了UIViewControllerRepresentable协议，因此可以直接在SwiftUI的View中创建。
extension View {
func scrollOffsetX(_ offsetX: Binding<CGFloat>) -> some View {
return MyScrollViewControllerRepresentable(offset: offsetX, isOffsetX: true, content: self)
}
}
extension View {
func scrollOffsetY(_ offsetY: Binding<CGFloat>) -> some View {
return MyScrollViewControllerRepresentable(offset: offsetY, isOffsetX: false, content: self)
}
}
最后，我们创建了两个View的extension，像下边的代码一样使用：
ScrollView(.horizontal) {
...
}
.scrollOffsetX(self.$offsetX)
ScrollView(.vertical) {
...
.scrollOffsetY(self.$offsetY)
总结
当我们遇到SwiftUI提供的功能不够用的时候，我们可以考虑上边用到的这种解决方案，能够为我们提供一个不错的思路。
我已经把该功能单独地抽离出来了，代码仓库地址为https://github.com/agelessman/SwiftUI_ScrollView_Offset
本篇文章的示例代码在此处可以访问：https://gist.github.com/agelessman/3bf1d4f4d7fb24495972ba962777874f
SwiftUI集合：FuckingSwiftUI
网友评论