来自不同 iPhone 设备的动态集合视图单元格列

Question

我尝试使用 collectionView 从不同的 iPhone 设备创建动态单元格列。

我已经尝试让 iPhone SE 有一个 3 列并且成功了，但是当我尝试让 iPhone 11 Pro Max 有一个 4 列时它有一个 space每个单元格之间。

iPhone 11 专业最大

iPhone SE

我这样计算我的单元格

enum UIHelper {
    static func createCollectionViewFlowLayout() -> UICollectionViewFlowLayout {
        let screenWidth                     = UIScreen.main.bounds.width
        let padding: CGFloat                = 12
        let minimumInterimSpacing: CGFloat  = 10
        let availableWidth                  = screenWidth - (padding * 2) - (minimumInterimSpacing * 2)
        var numberOfColumn: CGFloat
        
        // 375 is iPhone SE width
        if screenWidth > 375 {
            numberOfColumn = 4
        } else {
            numberOfColumn = 3
        }
        
        let itemWidth                       = availableWidth / numberOfColumn
        
        let flowLayout                      = UICollectionViewFlowLayout()
        flowLayout.sectionInset             = UIEdgeInsets(top: padding, left: padding, bottom: padding, right: padding)
        flowLayout.itemSize                 = CGSize(width: itemWidth, height: itemWidth)
        
        return flowLayout
    }
}

在我的视图控制器中，我是这样创建的

override func viewDidLoad() {
   super.viewDidLoad()
        
   collectionView.delegate = self
   collectionView.dataSource = self
   collectionView.collectionViewLayout = UIHelper.createCollectionViewFlowLayout()
}

我错过了什么？

Answer 1

你的设置似乎没问题，问题似乎出在这一行的逻辑/数学上

let availableWidth = screenWidth - (padding * 2) - (minimumInterimSpacing * 2)

逻辑是，如果你有 3 个单元格，则 3 个单元格之间会有 2 个间隙，但如果你有 4 个单元格，则有 3 个间隙。

因此，如果我还根据我打算拥有的单元格数量更改可用宽度，您将获得所需的结果。因此，我做了一些小改动，以根据您想要的一行中的单元格数量来更改可用宽度。

我对您的代码进行了一些小的修改，我添加了一些注释以显示我所做的更改，但是，您需要更好地组织我的更新，因为我进行了快速更改以向您展示逻辑中的修复.

static func createCollectionViewFlowLayout() -> UICollectionViewFlowLayout {
        let screenWidth                     = UIScreen.main.bounds.width
        let padding: CGFloat                = 12
        let minimumInterimSpacing: CGFloat  = 10
        
        // Updated this to a var
        var availableWidth                  = screenWidth - (padding * 2) - (minimumInterimSpacing * 2)
        
        var numberOfColumn: CGFloat
        
        // 375 is iPhone SE width
        if screenWidth > 375 {
            numberOfColumn = 4
            
            // Update the width available as well
            availableWidth = screenWidth - (padding * 2) - (minimumInterimSpacing * (numberOfColumn - 1))
        } else {
            numberOfColumn = 3
        }
        
        let itemWidth                       = availableWidth / numberOfColumn
        print(numberOfColumn)
        
        let flowLayout                      = UICollectionViewFlowLayout()
        flowLayout.minimumInteritemSpacing  = minimumInterimSpacing
        flowLayout.sectionInset             = UIEdgeInsets(top: padding, left: padding, bottom: padding, right: padding)
        flowLayout.itemSize                 = CGSize(width: itemWidth, height: itemWidth)
        
        return flowLayout
}

来自不同 iPhone 设备的动态集合视图单元格列

Dynamic collection view cell column from different iPhone device

swift

uicollectionview

uicollectionviewcell