6. UICollectionView Decoration View

UICollectionView 允許我們為每一個section、cell甚至是整個collectionView添加一個裝飾視圖，這玩意怎么說呢，就是添加了一些可復用視圖，視圖的frame可以隨意設定，劃重點是隨意設定，

1.給section添加一張背景圖片

實作裝飾視圖需要自定義layout，這里選擇集成UICollectionViewFlowLayout，為了省去cell的布局實作

class CZDecorationFlowLayout: UICollectionViewFlowLayout {
    let decorationViewKind = "CZDecorationView"
    var itemsAttribute = [UICollectionViewLayoutAttributes]()
    var cz_delegate: CZDecorationFlowLayoutDelegate?
    
    override func prepare() {
        super.prepare()
        // 注冊裝飾視圖
        self.register(CZDecorationView.self, forDecorationViewOfKind: decorationViewKind)
        // 獲取section數量
        let sections = self.collectionView?.numberOfSections ?? 0
        
        // 給每一個section添加裝飾視圖的布局屬性
        for i in 0..<sections {
            let attribute = CZDecorationAttributes.init(forDecorationViewOfKind: decorationViewKind, with: IndexPath(item: 0, section: i))
            attribute.zIndex = -1
            attribute.imageName = self.cz_delegate?.layout(self, decorationImageAt: i)
            
            if let count = self.collectionView?.numberOfItems(inSection: i), count > 0 {
                let firstItem = self.layoutAttributesForItem(at: IndexPath(item: 0, section: i))
                let lastItem = self.layoutAttributesForItem(at: IndexPath(item: (count - 1), section: i))
                let height = lastItem!.frame.maxY - firstItem!.frame.minY
                attribute.frame = CGRect(x: 0, y: firstItem!.frame.minY, width: self.collectionView!.frame.size.width, height: height)
                self.itemsAttribute.append(attribute)
            }
        }
        
    }
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        var attributes = super.layoutAttributesForElements(in: rect)
        for attribute in self.itemsAttribute {
            if rect.intersects(attribute.frame) {
                attributes?.append(attribute)
            }
        }
        return attributes
    }
}

重寫prepare方法，此時一定要呼叫super.prepare()，否則會出問題，這里的代理是為了獲取不同section中的圖片，裝飾視圖的frame可以隨意設定，因為要給section添加背景，我們選擇從第一個cell到最后一個cell，且寬度等于collectionView的寬度，將布局屬性添加到陣列中，后續在layoutAttributesForElements(in rect: CGRect)中將其追加到collectionView子視圖的布局屬性陣列中

class CZDecorationView: UICollectionReusableView {

    var imageView = UIImageView()

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.addSubview(imageView)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func apply(_ layoutAttributes: UICollectionViewLayoutAttributes) {
        super.apply(layoutAttributes)
        self.imageView.frame = layoutAttributes.bounds
        let attributes = layoutAttributes as! CZDecorationAttributes
        if let name = attributes.imageName {
            self.imageView.image = UIImage(named: name)
        }
    }
}

最重要的是apply(_ layoutAttributes: UICollectionViewLayoutAttributes)，在這里我們將對視圖中的子視圖設定資料，

到此就完成了一個section的背景添加

2.給cell添加背景圖片

對于上面的代碼，我們只需要改一下裝飾視圖的布局屬性即可

let itemCount = self.collectionView?.numberOfItems(inSection: i) ?? 0
for item in 0..<itemCount {
    let indexPath = IndexPath(item: item, section: i)
    let attribute = CZDecorationAttributes.init(forDecorationViewOfKind: decorationViewKind, with: indexPath)
    attribute.zIndex = -1
    attribute.imageName = self.cz_delegate?.layout(self, decorationImageAt: indexPath)
    let itemAttributes = self.layoutAttributesForItem(at: indexPath)!
    attribute.frame = itemAttributes.frame
    self.itemsAttribute.append(attribute)
}

3.collectionView可滾動范圍添加背景圖片

if let itemCountInSection = self.collectionView?.numberOfItems(inSection: (sections - 1)), itemCountInSection > 0 {
    let firstItem = self.layoutAttributesForItem(at: IndexPath(item: 0, section: 0))
    let lastItem = self.layoutAttributesForItem(at: IndexPath(item: (itemCountInSection - 1), section: (sections - 1)))
    let indexPath = IndexPath(item: 0, section: 0)
    let attribute = CZDecorationAttributes.init(forDecorationViewOfKind: decorationViewKind, with: indexPath)
    attribute.zIndex = -1
    attribute.imageName = "6"
    let height = lastItem!.frame.maxY - firstItem!.frame.minY
    attribute.frame = CGRect(x: 0, y: 0, width: self.collectionView!.frame.size.width, height: height)
    self.itemsAttribute.append(attribute)
}

4. 總結

關于collection的裝飾視圖，核心步驟：

1. 創建集成自UICollectionReusableView的自定義視圖
2. 在func apply(_ layoutAttributes: UICollectionViewLayoutAttributes)中補充顯示邏輯
3. 創建自定義layout，在func prepare()中撰寫裝飾視圖的布局屬性（最為重要，控制裝飾視圖的顯示的位置及尺寸）

5.代碼地址

小小個子大個頭

標籤：iOS

上一篇：Android ListView使用方法以及注意事項

下一篇：Algorithm Of Swift -- 1.兩數之和