Implement twitter Profile like view with parallax scroll

Question

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.

The red view is superview - should scroll vertically
The green view is of the height of the current view and is just static. That doesnt scroll
The blue view is the horizontal scrollview where for each label there is a yellow vertically scrolling infinity collection view
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.

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.

Do you want both the upper and lower views to scroll left-right so they both have the same behavior? What is the relationship between the upper and lower views, if any? — Jay
– Jay, Commented May 28, 2019 at 21:05
I updated the question. The upper view is just an image. the lower view is like a group of cell that just as in representation of the twitter screenshot. The topview is just static but the lower views have feed like content. And there are 2 tabs — Aakash Dave
– Aakash Dave, Commented May 28, 2019 at 21:11
The issue is I have been able to implement a view where the top view is a CollectionViewHeader(ReusableView). and then the scrollview in the gif is in a cell. But I am not able to give it an infinite height. Now I am looking to implement a different architecture as in the diagram — Aakash Dave
– Aakash Dave, Commented May 28, 2019 at 21:13
was actually waiting for your answer. Thanks man. Once I find a way. I'll share it with you. — Aakash Dave
– Aakash Dave, Commented Jun 3, 2019 at 5:09

humblePilgrim · Accepted Answer · 2019-06-07 13:06:18Z

2

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

edited Jun 7, 2019 at 13:06

answered Jun 7, 2019 at 12:55

humblePilgrim

1,8064 gold badges25 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Aakash Dave Over a year ago

I have updated the question with my code, of how I got the gif to work

Aakash Dave Over a year ago

Thank a ton for this answer @humblePilgrim, I have literally been waiting for a reply. I have a question though, I want these colored to be UIViews scrolling vertically(Collection view) and the size of each is dynamic. I am not sure how can I achieve this? Can you please help me out here. I was able to achieve this result previously. My issue majorly is deciding the height of each scroll. Am I being clear about my question

humblePilgrim Over a year ago

The vertical scrolling is implemented in the above using a table view. The dynamic height of each row can be achieved using autolayout. See this link raywenderlich.com/8549-self-sizing-table-view-cells

Collectives™ on Stack Overflow

Implement twitter Profile like view with parallax scroll

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related