UICollectionView was introduced in iOS 6 to display the content in a much more flexible way. Compared to UITableView, not only does UICollectionView provide simliar interfaces of dataSource and delegate to configure its layout, but there are much more customization options to go beyond the list or grid view thanks to UICollectionViewFlowLayout. The possible visual effect is only limited by a developer’s artistic imagination and quantitative reasoning.

1. Overview

Check out the Photos native app on iOS, you will find out the main interface is composed of two horizontal scroll views. The bigger one displays the full resolution copies while the smaller displays the thumbnails. The scrolling motion on either one of them is reflected on the other. Look closer as you scroll the photos, the bigger scroll view renders the photo with parallax effect, and the same image also presents the accordion animation effect in the smaller scroll view.

In this lab, we will build the main interface of Photos using two UICollectionViews. To be more specific, we will customize the UICollectionViewFlowLayout associated with each UICollectionView to decide the size and center of the items that are visible on the screen. The changes on these attributes create the parallax and accordion animation.

What you will learn

Set up the basic datasource and delegate of UICollectionView
Override methods in UICollectionViewFlowLayout to achieve customized layout
Implement parallax animation
Implement accordion animation
Synchronize between two UICollectionViewFlowLayout

What you’ll need

XCode 9.0 and above
The sample code
Familiar with Swift language
Familiar with UICollectionView datasource and delegate
Comfortable with Protocol Oriented Programming methodology

2. Get the sample code

Clone the repository to your local computer, and switch to the bootcamp branch

git clone git@github.com:ripplearc/ScrollingAlbum.git
git checkout bootcamp

Build and run, the app already shows the photos in two UICollectionViews, named hdCollectionView and thumbnailCollectionView in the AlbumViewController respectively.

Main.storyboard uses AutoLayout: the height of the toolbar is determined by its intrinsic size; the height of the thumbnailCollectionView is prefixed; hdCollectionView autosizes itself to take over the rest of the space. If you are interested in learning more about autosizing, the codelab Build autosizing UITableViewCell with UIStackView is an excellent place to go.

You will notice AlbumViewController relies on PhotoModel to provide the photos as well as their sizes and names. The photo list are populated in the AppDelegateand the photo is displayed through the UIImageView contained in either HDCollectionViewCell or ThumbnailCollectionViewCell.

We also need to specify the size of the cell and the spacing between them in AlbumViewController.swift

AlbumViewController.swift line 28

override func viewDidLayoutSubviews() {
    CollectionView!.collectionViewLayout as? UICollectionViewFlowLayout {
        layout.itemSize = hdCollectionView.frame.size
        layout.minimumLineSpacing = 0
    }
    if let layout = thumbnailCollectionView!.collectionViewLayout as? UICollectionViewFlowLayout {
        layout.itemSize = CGSize(width: 30, height: thumbnailCollectionView.frame.size.height)
        layout.minimumLineSpacing = 2
    }
}

It should be noted that the width of the UIImageView in thumbnailCollectionView is longer than that of the cell. By setting clipsToBounds of the cell to true, and contentMode of the UIImageView to .scaleAspectFill, the UIImageView fills up the cell without being distorted.

AlbumViewController.swift line 66

cell.clipsToBounds = true
cell.photoView?.contentMode = .scaleAspectFill
cell.photoView?.image = image

As a bonus, throughout the lab, if you need some assistance to check out if the layout behaves correctly, you can turn on the debug option which shows a vertical line in the middle and labels each image with its index:

AppDelegate.swift line 25

albumViewController.debug = true

3. Parallax Animation of the HD CollectionView

In this section, we will implement the parallax animation through the customized flowLayout of hdCollectionView, called HDFlowLayout.

Switch to the bootcamp_hd_flowlayout_parallax branch

git checkout bootcamp_hd_flowlayout_parallax

Open HDFlowLayout.swift. This class inherits from UICollectionViewFlowLayout, which provides many overridable methods to customize the behavior of the UICollectionView. In this lab, we need to override four of them to achieve the parallax effect.

prepare() is where values that do not change often should be computed and stored
collectionViewContentSize returns the size of the content view
layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? calls each element in the content view contained by the rect
layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? returns the attribute which contains the center and size of the cell

Before filling out the blank, let’s use landscape photos as an example to illustrate how the parallax effect is implemented.

cellMaximumWidth: The maximum width of a cell, and it is usually the width of UICollectionView
cellFullSpacing: The spacing between the current and the next cell, when both of them are landscape.
cellMaximumHeight: The maximum height of a cell, and it is usually the height of UICollectionView
currentFractionComplete: How much the current cell has moved away from the center, ranging from 0 to 1

cellMaximumWidth, cellFullSpacing, cellHeight are set at viewDidLayoutSubviews of AlbumViewController, and currentFractionComplete is computed on the fly.

AlbumViewController.swift

fileprivate func setupHDCollectionViewMeasurement() {
    hdCollectionView.cellFullSpacing = 100
    hdCollectionView.cellNormalWidth = hdCollectionView!.bounds.size.width - hdCollectionView.cellFullSpacing
    hdCollectionView.cellMaximumWidth = hdCollectionView!.bounds.size.width
    hdCollectionView.cellNormalSpacing = 0
    hdCollectionView.cellHeight = hdCollectionView.bounds.size.height
    ...
}

As the user swipes left, the cellFullSpacing and cell center remain the same. The width of the current cell, however, decreases by cellFullSpacing x currentFractionComplete, and the width of the next cell increases by cellFullSpacing x (1-currentFractionComplete). It thus creates the parallax visual effect.

While it may sound counter intuitive that the cell center remains the same when the user swipes left, what actually changes is the the contentOffset

We can now fill out the blank of the HDFlowLayout:

The estimated size will be applied to all cells rather than the current and next cell, and the estimated center is used for testing which cells are visible later on.

HDFlowLayout.swift

override func prepare() {
    cellEstimatedCenterPoints = []
    cellEstimatedFrames = []
    for itemIndex in 0 ..< cellCount {
        var cellCenter: CGPoint = CGPoint(x: 0, y: 0)
        cellCenter.y = collectionView!.frame.size.height / 2.0
        cellCenter.x = cellMaximumWidth * CGFloat(itemIndex) + cellMaximumWidth  / 2.0
        cellEstimatedCenterPoints.append(cellCenter)
        cellEstimatedFrames.append(CGRect.init(origin: CGPoint.init(x: cellMaximumWidth * CGFloat(itemIndex), y: 0), size: CGSize.init(width: cellMaximumWidth, height: cellHeight)))
    } 
}

When the user swipes, the layout is called with rect which is the portion of the content view that is present on the screen. It is the timing for us to adjust the size of the cells that are visible. To save the computing time, we first intersect the rect with the esitimated cells, and call layoutAttributesForItem on the intersected candidate cells.

HDFlowLayout.swift

override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    var allAttributes: [UICollectionViewLayoutAttributes] = []
    for itemIndex in 0 ..< cellCount {
        if rect.intersects(cellEstimatedFrames[itemIndex]) {
            let indexPath = IndexPath(item: itemIndex, section: 0)
            let attributes = layoutAttributesForItem(at: indexPath)!
            allAttributes.append(attributes)
        }
    }
    return allAttributes
}

As metioned above, the width of the current and next cell needs to be adjusted according to the currentFractionComplete.

HDFlowLayout.swift

override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
    guard let attributes = super.layoutAttributesForItem(at: indexPath) else {
        return nil
    }
    
    if let collectionView = collectionView as? CellConfiguratedCollectionView,
        let cellSize = collectionView.cellSize(for: indexPath) {
        switch indexPath.item {
        case currentCellIndex:
            attributes.size = CGSize(width: max(minimumPhotoWidth, cellSize.width - cellFullSpacing * currentFractionComplete), height: cellSize.height)
            
        case currentCellIndex + 1:
            attributes.size = CGSize(width: max(minimumPhotoWidth, cellSize.width - cellFullSpacing * (1-currentFractionComplete)), height: cellSize.height)
            
        default:
            attributes.size = CGSize(width: cellMaximumWidth, height: cellHeight)
        }
        attributes.center = cellEstimatedCenterPoints[indexPath.row]
    }
    
    return attributes
}

You should be able to run the project and see the parallax effect.

So far, prepare() is called every time the layout is invalidated. However, the estimated centers and sizes only need to be recomputed when the bound or data source changes.

In order to make the computation more effecient, first, make HDFlowLayout implements FlowLayoutInvalidateBehavior, and guard the computation of estimated centers and sizes with shouldLayoutEverything. Then reset shouldLayoutEverything to true when bounds or data source changes.

HDFlowLayout.swift

class HDFlowLayout: UICollectionViewFlowLayout, FlowLayoutInvalidateBehavior {
    ...
    var shouldLayoutEverything = true
    ...
}

HDFlowLayout.swift

override func prepare() {
    guard shouldLayoutEverything else { return }
    ...
    shouldLayoutEverything = false
}

HDFlowLayout.swift

//MARK: - Invalidate Context

extension HDFlowLayout {
    ...
    override func invalidationContext(forBoundsChange newBounds: CGRect) -> UICollectionViewLayoutInvalidationContext {
        let context = super.invalidationContext(forBoundsChange: newBounds)
        
        if newBounds.size != collectionView!.bounds.size {
            shouldLayoutEverything = true
        }
        return context
    }
    
    override func invalidateLayout(with context: UICollectionViewLayoutInvalidationContext) {
        if context.invalidateEverything || context.invalidateDataSourceCounts {
            shouldLayoutEverything = true
        }
        super.invalidateLayout(with: context)
    }
}

If you have any difficulty in implementing the parallax effect, then switch to the hd_flowlayout_parallax branch.

git checkout hd_flowlayout_parallax

3. Accordion Animation of the Thumbnail CollectionView

In this section, we will implement the accordion animation through the customized flowLayout of thumbnailCollectionView, called ThumbnailMasterFlowLayout.

Switch to the bootcamp_thumbnail_flowlayout_accordion branch

git checkout bootcamp_thumbnail_flowlayout_accordion

Open ThumbnailMasterFlowLayout.swift. Similar to HDFlowLayout, this class also inherits from UICollectionViewFlowLayout and overrides some of the key methods.

The accordion animation is more complicated than the parallax. Not only do we need to adjust the center and size of the cell being animated, the inset and offset of the UICollectionView also requires dynamic change.

Let’s first analyze the lifecycle from folding to unfolding.

By default, the cell in the middle is unfolded while the rest are folded. As the user starts swiping, the unfolded cell quickly folds itself when the content view scrolls. After the scroll comes to a stop, whichever cell in the middle unfolds itself.

AlbumViewController.swift line 32

//MARK：- CollectionView Delegate
extension AlbumViewController: UICollectionViewDelegate {
    func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
        if let collectionView = scrollView as? UICollectionView,
            let layout = collectionView.collectionViewLayout as? ThumbnailFlowLayoutDraggingBehavior{
            layout.foldCurrentCell()
        }
    }
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        if let collectionView = scrollView as? UICollectionView,
            let layout = collectionView.collectionViewLayout as? ThumbnailFlowLayoutDraggingBehavior{
            layout.unfoldCurrentCell()
        }
    }
    
    func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
        if !decelerate,
            let collectionView = scrollView as? UICollectionView,
            let layout = collectionView.collectionViewLayout as? ThumbnailFlowLayoutDraggingBehavior{
            layout.unfoldCurrentCell()
        }
    }
}

cellNormalSize: The size of the cell when it is completely folded
animatedCellSize: The size of the cell that is being folded or unfolded which depends on the animation progress
adjacentSpacingOfAnimatedCell: The spacing on both sides of the aniamted cell, which also depends on the animation progress, the spacing is always symmetric
cellNormalSpacing: The spacing between two completed folded cells
accordionAnimationManager.progress Indicates how much the folding/unfolding has completed, based on the precomputed animation time and elapsed time

Determined by the progress, the animatedCellSize.width changes from cellFullWidth to cellNormalWidth linearly. So does the adjacentSpacingOfAnimatedCell.