CollectionView 未按预期显示 3 列

Question

我在同一个 UIViewController 中有 3 个不同的 UICollectionView。他们工作正常。我的问题是样式，其中 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

Answer 1

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

你可以从 collectionView.collectionViewLayout 属性

得到 minimumInteritemSpacing

Answer 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)
    }
}

Answer 3

你可以试试这个

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

Answer 4

如果您计划为 iOS 13 岁或以上 进行部署，我建议您使用 Compositional Layout 来实现这个网格。

资源

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

Advances in Collection View Layout WWDC 2019

Associated SDK

示例代码

下面的示例来自上面的 link。您可以通过简单地在您的组中定义它来布局 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
}

}

CollectionView 未按预期显示 3 列

CollectionView not displaying 3 columns as expected

ios

uicollectionview

uicollectionviewcell

swift

资源

推荐

示例代码