实现视差滚动的Twitter个人资料(例如视图) [英] 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. 蓝色视图是水平滚动视图，其中每个标签都有一个黄色垂直滚动的无穷大集合视图
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)
        }
    }
}

如何无限地垂直滚动垂直实现相同的行为?我希望每个标题都具有一个具有动态高度的collectionview.

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个人资料(例如视图)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！