使用视差滚动实现类似 twitter Profile 的视图 [英] Implement twitter Profile like view with parallax scroll

问题描述

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

I want to implement the following sort of view where the view can be completely scrolled and houses 2 different scrollview (Main and the secondary) with infinite scrollable content. This represents the exact thing I want.

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

1. The red view is superview - should scroll vertically
2. The green view is of the height of the current view and is just static. That doesnt scroll
3. The blue view is the horizontal scrollview where for each label there is a yellow vertically scrolling infinity collection view
4. the labels scroll as in the given video. under each label there is the collection view I mentioned in point 3

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

The blue box is the scroll view and I want the scrolling to happen horizontally in a parallax way such as this.

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

I am able to implement the above parallax in the correct fashion but each title contains their own collectionview. When I implement this I am not able to have an infinite scroll. Below is the code for that :

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)
        }
    }
}

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

How can I exactly achieve the same behavior with an infinite scroll vertically? I want each of these titles to have collectionview that have the dynamic height each.

推荐答案

我做了一个粗略的实现.

I did a crude implementation of this.

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

contentOffSetX is a property of the class(ViewController) that I use to keep track of the scrolling distance of the bottom collection view. Initially that is set to 0. When the user scrolls the collection view at the bottom, the above delegate method is called. Then I use the contentOffSet to get the distance that was scrolled along the X-axis. I map that to the width of the title labels(hardcoded as 75.0) to calculate the distance that collection has to be scrolled. Hope this can be refined to serve your purpose, but I am sure that there are better methods out there :)

这篇关于使用视差滚动实现类似 twitter Profile 的视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！