Creating a swiping card stack with UICollectionView and UICollectionViewCells?

Question

So far, I made my collection views which scroll horizontally in either left or right.I added UICollectionViewCells into one UICollectionView. My problem that I'm having is trying to find the right settings to make the cards stack on top of the first card, as demonstrated in the photo below.

Here are the settings for my collectionView and how it displays its cells.

lazy var collectionView: UICollectionView = {
   let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .Horizontal
    layout.minimumInteritemSpacing = 0
    layout.minimumLineSpacing = 78
    let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
    cv.backgroundColor = UIColor.clearColor()
    cv.showsHorizontalScrollIndicator = false
    cv.translatesAutoresizingMaskIntoConstraints = false
    return cv

}()

Mark Mark · Accepted Answer · 2016-06-30T04:24:50

You're going to have to subclass UICollectionViewLayout, set the UICollectionViewLayoutAttributes for each cell, and make sure to set zIndex to the indexPath.row of the item in order to get overlapping. You can take a look at my sample project on GitHub that implements something very similar.

There are some bugs in UICollectionViewLayout related to animating insertions of new cells when the cells are overlapping (which is why I made the sample project in the first place).

Creating a swiping card stack with UICollectionView and UICollectionViewCells?

1 Answers