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。

Answer 2

您需要使用3而不是2来计算模数，以获得所需的输出。

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

    if indexPath.item % 3 == 0{
        //return SingleTrendCell
    }else{
        //return DoubleTrendCellCell
    }
}

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

    if indexPath.item % 3 == 0{
        //return SingleTrendCell Size
    }
    //return DoubleTrendCellCell Size

}