ios - Swift:UICollectionView iOS 的一行中的单元格数量不同

Question

我想将 UICollectionView 的布局流混合到垂直和水平，我希望每一行都可以被 2 整除以拥有一个项目，否则它应该有一个两列网格，我已经用尽了所有我能做的方法想一想，我结束了每行得到一个项目。

下图正是我想要实现的。

这是我试过的

    class TrendVC: UIViewController {

    fileprivate let itemsPerRow: CGFloat = 2

    fileprivate let sectionInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)

    @IBOutlet weak var collectionView: UICollectionView!

    var data = [ "others", "sports", "kitchen", "phones", "entertainment", "electronics", "women"]
    var dataNames = ["Bags", "Sports & Outdoor", "Kitchen Essentials", "Mobile Phones & Tablets", "Entertainment", "Audio and Video", "Women's Clothings"]

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .white

                navigationController?.navigationBar.isTranslucent = true
                navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
                navigationController?.navigationBar.shadowImage = UIImage()

        collectionView.dataSource = self
        collectionView.delegate = self

        collectionView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)

    }


}

extension TrendVC: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout{

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return data.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        if indexPath.item % 3 == 0{

            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "DoubleCell", for: indexPath) as! DoubleTrendCellCell

            let datum = data[indexPath.item]

            let dat = dataNames[indexPath.item]

            cell.trendNameLabel.text = dat

            cell.trendImageView.image = UIImage(named: datum)

            return cell
        }else{
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "TrendCell", for: indexPath) as! SingleTrendCell

            let datum = data[indexPath.item]

            let dat = dataNames[indexPath.item]

            cell.trendNameLabel.text = dat

            cell.trendImageView.image = UIImage(named: datum)

            return cell
        }
    }


    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

        if indexPath.item % 3 == 0{
            let paddingSpace = sectionInsets.left * (2 + 1)
            let availableWidth = view.frame.width - paddingSpace
            let widthPerItem = availableWidth / itemsPerRow

            return CGSize(width: widthPerItem, height: widthPerItem)
        }
        let paddingSpace = sectionInsets.left * (2 + 1)
        let availableWidth = view.frame.width - paddingSpace
        let widthPerItem = availableWidth / itemsPerRow
        return CGSize(width: view.frame.width, height: widthPerItem)

    }

    //3
    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        insetForSectionAt section: Int) -> UIEdgeInsets {
        return sectionInsets
    }

    // 4
    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return sectionInsets.left
    }
}

这就是我想要的

Answer 1

由于您的两个细胞具有相同的结构，因此创建两种不同类型的细胞没有意义。您所要做的就是使用 sizeForItemAtIndexPath 方法并返回适当的大小，autoLayout 将处理其中的内容。像这样的东西:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    if indexPath.item % 3 == 0{

        return CGSize(width: collectionView.bounds.size.width/2.0, height: collectionView.bounds.size.height/3.0)

    }else{

        return CGSize(width: collectionView.bounds.size.width, height: collectionView.bounds.size.height/3.0)
    }
}

注意:确保所有插入和项目间间距均为 0。