UICollectionView动态自定义布局

Question

我正在尝试创建一个UICollectionView，其布局类型为我附加的图像。 我对如何实现这种布局感到有些困惑。

进行一些谷歌搜索之后，似乎我需要编写一个自定义UICollectionViewFlowLayout，但是我似乎找不到任何每个项目的节数不同的布局示例。

如果您查看样机，则第一项有一个部分。 该图像是“风景”，但中间的项目有2个部分和2个肖像图像。

我在找错事吗？ 有人可以指出我正确的方向吗？

Answer 1

您可以使用UICollectionViewDelegateFlowLayout进行此操作，而无需子类化。

这是一个例子：

import UIKit

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {

    @IBOutlet weak var collectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView.delegate = self
        collectionView.dataSource = self
    }

    // MARK: - UICollectionViewDataSource

    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 1
    }

    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }

    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("TestCollectionViewCell", forIndexPath: indexPath) as! UICollectionViewCell
        if indexPath.item % 3 == 0 {
            cell.backgroundColor = UIColor.redColor()
        } else {
            cell.backgroundColor = UIColor.greenColor()
        }
        return cell
    }

    // MARK: - UICollectionViewDelegateFlowLayout

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
        if indexPath.item % 3 == 0 {
            let cellWidth = (CGRectGetWidth(collectionView.frame) - (flowLayout.sectionInset.left + flowLayout.sectionInset.right))
            return CGSize(width: cellWidth, height: cellWidth / 2)
        } else {
            let cellWidth = (CGRectGetWidth(collectionView.frame) - (flowLayout.sectionInset.left + flowLayout.sectionInset.right) - flowLayout.minimumInteritemSpacing) / 2
            return CGSize(width: cellWidth, height: cellWidth)
        }
    }

}

Answer 2

我喜欢Jacob Howcroft的答案，并且发现UICollectionViewDelegateFlowLayout方法可以得到改进：

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {

    let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout

    var numberOfCellsPerLine = 0

    if indexPath.item % 3 == 0 {
      numberOfCellsPerLine = 1
    } else {
      numberOfCellsPerLine = 2
    }

    // Generic cell width calculation 
    let cellWidth = (collectionView.bounds.width - (flowLayout.sectionInset.left + flowLayout.sectionInset.right)
        - flowLayout.minimumInteritemSpacing * CGFloat(numberOfCellsPerLine - 1)) / CGFloat(numberOfCellsPerLine)
    return CGSize(width: cellWidth, height: 100)

}

这使得根据indexPath希望每行多少个单元格变得更加明显（您可以根据需要使用“ if / else”或开关）。

而且，它使此代码具有超级可重用性，因为您始终必须考虑相同的元素（节插图，minimumInterItemSpacing）。