SwiftUI之ScrollView+Hosting+Representable

本篇文章主要内容是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