【问题标题】：CollectionView not displaying 3 columns as expectedCollectionView 未按预期显示 3 列
【发布时间】：2020-02-05 12:06:33
【问题描述】：

我在同一个 UIViewController 中有 3 个不同的 UICollectionViews。他们工作正常。我的问题是样式，其中 2 个需要具有相同的样式 - 意味着 3 列和一些间距。

这是我需要实现的： screenshot

这是我目前得到的： desired result

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    if collectionView == gameCollectionView {
        let width = gameCollectionView.frame.size.width
        return CGSize(width: ((width / 2) - 7), height: 150)
    }
    else {
        let width = paymentCollectionView.bounds.width / 3 // < THIS IS What should give 3 columns 
        return CGSize(width: width, height: 70)
    }
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 0

}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return 0
}

谁能告诉我如何实现这一点，最好解释一下它是如何工作的，因为我无法弄清楚

更新：根据要求 - CollectionView 的情节提要 Storyboard

【问题讨论】：

你可以试试这个'让宽度=（paymentCollectionView.bounds.width / 3）-10'也显示故事板集合属性
@SalmanGhumsani 我添加了故事板屏幕截图。并尝试了您的建议，但它不起作用。结果相同

标签： ios swift uicollectionview uicollectionviewcell

【解决方案1】：

如果您打算部署 iOS 13 或更高版本，我建议您使用 Compositional Layout 来实现此网格。

资源

Apple 在这方面有一个很棒的 WWDC 和一个 SDK，您可以下载它来查看他们的示例代码。以下是链接：

Advances in Collection View Layout WWDC 2019

Associated SDK

示例代码

下面的示例来自上面的链接。您可以通过在您的组中简单地定义它来布局 3 列。或者，您可以将项目布局为其组容器的一部分。

    func createLayout() -> UICollectionViewLayout {
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                         heightDimension: .fractionalHeight(1.0))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)

    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                          heightDimension: .absolute(44))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitem: item, count: 3)
    let spacing = CGFloat(10)
    group.interItemSpacing = .fixed(spacing)

    let section = NSCollectionLayoutSection(group: group)
    section.interGroupSpacing = spacing
    section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10)

    let layout = UICollectionViewCompositionalLayout(section: section)
    return layout
}

}

【讨论】：

我无法使用合成布局，因为它受 iOS 13+ 的支持

【解决方案2】：

您需要更改此委托工作

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    if collectionView == gameCollectionView {
        let width = gameCollectionView.frame.size.width
        return CGSize(width: ((width / 2) - 7), height: 150)
    }
    else {
        let width = (paymentCollectionView.frame.width / 3) - 5 // if you want to more space so increase
        return CGSize(width: width, height: 70)
    }
}

【讨论】：

试过了，结果一样，没什么变化
let width = (paymentCollectionView.frame.width / 3) - 5 // 如果你想要更多空间，那么增加 return CGSize(width: width, height: 70)

【解决方案3】：

CGSize(width: ((width - `section's left & right spce` - minimumInteritemSpacing) / `numberofCellYouWant`), height: 150)

你可以从collectionView.collectionViewLayout属性中得到minimumInteritemSpacing

【讨论】：

【解决方案4】：

你可以试试这个

let screenWidth = self.CollecionView.frame.width
let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.itemSize = CGSize(width: (screenWidth/3)-5, height: (screenWidth/3)-5)
self.CollecionView.collectionViewLayout = layout

【讨论】：

资源

推荐

示例代码