iOS-卡片/卡牌堆叠式布局，无限滑动实现方案（一）

iOS-卡片/卡牌堆叠式布局，无限滑动实现方案（一）

效果图

思路

众所周知，UICollectionView是非常强大的，只要脑洞大，没有什么布局是实现不了的。而其中最关键的就是对UICollectionViewLayout的设计，也就是自定义布局。

自定义布局步骤：

1. 继承UICollectionViewLayout，创建UICollectionViewLayout的子类，如JYCardViewLayout
2. 子类中重写父类方法：

override func prepare()
override var collectionViewContentSize: CGSize
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? 
override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes?

3. 子类中需要持有一个数组用来存储每个cell对应的布局：
   var cachedAttributes: [UICollectionViewLayoutAttributes] = []

需要注意的细节

1. UICollectionView添加Cell的方式是addSubview， 也就是每添加一个cell都会盖住之前的cell。这里就有个顺序的问题。我的方式是重写UICollectionView的didAddSubview方法，调整每个cell的出场顺序。
2. 我们利用了UICollectionView移除cel时自带的动画，但是有些动画效果是不必要的。代码中可以看到被移除的cell会设置isHidden=true，当整个动作进行完成后再设置isHidden=false。

更多细节可查看源码，请读者不吝赐教。

部分源码

import UIKit

class JYCardViewLayout: UICollectionViewLayout {

    var cachedAttributes: [UICollectionViewLayoutAttributes] = []
    var contentBounds: CGRect!
    /// 卡片左右之间的距离
    var lineSpacing: CGFloat = 15
    /// 卡片底部之间的距离
    var interitemSpacing: CGFloat = 15
    
    override func prepare() {
        super.prepare()
        
        guard let collectionView = collectionView else { return }
        cachedAttributes.removeAll()
        contentBounds = CGRect(origin: .zero, size: collectionView.bounds.size)
        
        let count = collectionView.numberOfItems(inSection: 0)
        var currentIndex = 0
        
        while currentIndex < count {
            
            let attributes = UICollectionViewLayoutAttributes(forCellWith: IndexPath(item: currentIndex, section: 0))
            attributes.frame = collectionView.bounds
            
            // 计算每个 cell 的宽度和高度
            let width = collectionView.bounds.width - CGFloat(currentIndex) * lineSpacing * 2.0
            let height = collectionView.bounds.height - CGFloat(currentIndex) * interitemSpacing * 2.0
            // 计算出缩放的比例
            let scaleX = width / attributes.bounds.width
            let scaleY = height / attributes.bounds.height
            
            let scaleTransform = CGAffineTransform(scaleX: scaleX, y: scaleY)
            let transform = scaleTransform.translatedBy(x: 0, y: CGFloat(currentIndex) * interitemSpacing * 2.0)
            attributes.transform = transform
            cachedAttributes.insert(attributes, at: 0)
            
            if currentIndex == 0 {
                attributes.transform = .identity
            }
            
            currentIndex += 1
        }
    }
    
    override var collectionViewContentSize: CGSize {
        contentBounds.size
    }
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        return cachedAttributes
    }
    
    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        cachedAttributes[indexPath.item]
    }
    
    
}

Demo在此, 如果能帮助到您，还请Star哦！