CollectionView 未按预期显示 3 列

Posted 2023-03-14

【中文标题】CollectionView 未按预期显示 3 列

【英文标题】：CollectionView not displaying 3 columns as expected

【发布时间】：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 我添加了故事板屏幕截图。并尝试了您的建议，但它不起作用。结果相同

【参考方案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