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

Posted 2023-03-13

【中文标题】使用视差滚动实现类似 twitter Profile 的视图

【英文标题】：Implement twitter Profile like view with parallax scroll

【发布时间】：2019-05-28 10:07:00

【问题描述】：

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

red 视图是超级视图 - 应该垂直滚动 green 视图是当前视图的高度并且只是静态的。那不滚动 blue 视图是水平滚动视图，其中每个标签都有一个 yellow 垂直滚动无限集合视图 标签在给定视频中滚动。在每个标签下都有我在第 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)
        
    

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

【问题讨论】：

您是否希望上下视图都左右滚动以使它们具有相同的行为？如果有的话，上视图和下视图是什么关系？

我更新了问题。上视图只是一个图像。下面的视图就像一组单元格，就像 twitter 截图的表示一样。顶视图只是静态的，但较低的视图具有类似内容的提要。并且有 2 个标签

问题是我已经能够实现一个顶视图是CollectionViewHeader(ReusableView) 的视图。然后gif中的滚动视图在一个单元格中。但我不能给它无限的高度。现在我正在寻求实现与图表中不同的架构

@jay 上面有什么吗？

实际上是在等待您的答复。谢啦。一旦我找到方法。我会和你分享。

【参考方案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）以计算集合必须滚动的距离。希望这可以改进以服务于您的目的，但我相信那里有更好的方法:)

【讨论】：

我已经用我的代码更新了这个问题，关于我如何让 gif 工作

非常感谢@humblePilgrim 的回答，我一直在等待回复。不过我有一个问题，我希望这些颜色是垂直滚动的 UIView（集合视图），并且每个的大小都是动态的。我不确定如何实现这一目标？你能帮我吗？我以前能够达到这个结果。我的问题主要是决定每个卷轴的高度。我是否清楚我的问题

上面的垂直滚动是使用表格视图实现的。每行的动态高度可以使用自动布局来实现。看到这个链接raywenderlich.com/8549-self-sizing-table-view-cells