Mr.MIHIR Mr.MIHIR - 2 months ago 18
iOS Question

How to I build a continuous parallax scroll/Collection view?

I am looking to build a continuous parallax scroll like this.

But my Requirement is view and then CollectionView like this

enter image description here

When collection view scroll then changes upper view height.
and yes upper view and collection view is separate.
I Have also navigation bar it also goes up when user scroll


You can use collectionView with section header for this effect. However, the effect collectionView bounced below the search can't be achieved by this way instead the whole view will bounce.

Simplest solution for iOS 9 +

1) Make a cell for items above the search

2) Make reusableView for search bar (section header)

3) Make cells for those pictures

i.e. you will have two cell's prototypes and one reusableView

In viewDidLoad of viewController with collectionView use following code so that header of section gets pinned always in top:

let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout // casting is required because UICollectionViewLayout doesn't offer header pin. Its feature of UICollectionViewFlowLayout
layout?.sectionHeadersPinToVisibleBounds = true

Number of section: Keep it 2

Number of row for section == 0 will be 1 which will be items above search

Number of row for section == 2 will be number of images you have

Now, in collection view datasource you have a method viewForSupplementaryElementOfKind which you need to implement to get sectionHeaderView.

implement referenceSizeForHeaderInSection function for hiding sectionHeader for first section (section == 0) by returning CGSize(width: 0, height: 0) and for second section (section == 1) return size of searchBar as you want.

in cellForItemAtIndexPath return cells according to section.


I think you don't need sticky header at top like that search bar. So its better you use collectionView with section header. (section header contains the red View you marked)