使用视差滚动实现类似 twitter Profile 的视图

Question

我想实现以下类型的视图，其中视图可以完全滚动，并包含 2 个不同的滚动视图（主要和次要）以及无限可滚动的内容。这代表了我想要的确切东西。

1. red 视图是超级视图 - 应该垂直滚动
2. green 视图是当前视图的高度并且只是静态的。那不滚动
3. blue 视图是水平滚动视图，其中每个标签都有一个 yellow 垂直滚动无限集合视图
4. 标签在给定视频中滚动。在每个标签下都有我在第 3 点提到的集合视图

蓝色框是滚动视图，我希望滚动以这样的视差方式水平发生。

我能够以正确的方式实现上述视差，但每个标题都包含自己的collectionview。当我实现这一点时，我无法无限滚动。下面是代码：

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if scrollView == containerScrollView {
        for i in 0..<shotsData.count {
            let label = scrollView.viewWithTag(i + tagValueL) as! UILabel
            let view = scrollView.viewWithTag(i + tagValueV) as! ShotsMediaView
            let scrollContentOffset = scrollView.contentOffset.x + scrollView.frame.width
            let viewOffset = (view.center.x - scrollView.bounds.width/4) - scrollContentOffset
            label.center.x = scrollContentOffset - ((scrollView.bounds.width/4 - viewOffset)/2)
        }
    }
}

如何通过垂直无限滚动来完全实现相同的行为？我希望这些标题中的每一个都具有各自具有动态高度的集合视图。

Answer 1

我做了一个粗略的实现。

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if scrollView == colorsCollectionView {
        let newContentOffSetX = scrollView.contentOffset.x
        let distance = contentOffSetX + newContentOffSetX
        // Scroll the text collection view proportinately
        let titleScrollDistance = (distance/colorsCollectionView.frame.width * 75.0)
        titlesCollectionView.contentOffset = CGPoint(x: titleScrollDistance, y: titlesCollectionView.contentOffset.y)
        contentOffSetX = newContentOffSetX
    }
}

contentOffSetX 是类(ViewController) 的一个属性，我用它来跟踪底部集合视图的滚动距离。最初设置为 0。当用户滚动底部的集合视图时，将调用上述委托方法。然后我使用 contentOffSet 来获取沿 X 轴滚动的距离。我将其映射到标题标签的宽度（硬编码为 75.0）以计算集合必须滚动的距离。希望这可以改进以服务于您的目的，但我相信那里有更好的方法:)