ios - 为各种 iPhone 屏幕尺寸动态调整 UICollectionView 单元格宽度的宽度

Question

我有一个非常简单的 UICollectionView 要求。对于 iPhone 6/6s/7 和 6/6s/7 Plus 尺寸，两个单元格必须并排显示，即每行两个单元格。对于 iPhone 5/5s/SE，它应该每行显示 1 个单元格。我的单元格高度几乎固定为 194。

现在我在 View Controller 中有这段代码来实现这一点-

import UIKit

class ViewController: UIViewController, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {

    @IBOutlet weak var collectionView: UICollectionView!
    var screenWidth: CGFloat!


    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .blue

        screenWidth = collectionView.frame.width

        // Do any additional setup after loading the view, typically from a nib
        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
//        layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 2)
        layout.itemSize = CGSize(width: screenWidth / 2, height: 194)
        layout.minimumInteritemSpacing = 0
        collectionView.collectionViewLayout = layout
        collectionView.dataSource = self
        collectionView.delegate = self
        collectionView.backgroundColor = UIColor.blue
    }

    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 1
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 20
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "customCell", for: indexPath as IndexPath) as UICollectionViewCell
        cell.backgroundColor = UIColor.white
        cell.layer.borderColor = UIColor.black.cgColor
        cell.layer.borderWidth = 0.5
        return cell
    }

}

结果输出是这样的-

如您所见，iPhone Plus 尺寸和 5/5s/SE 布局都很好，或者我应该说我对我现有的那些没问题，但第二个，即 6/6s/7 尺寸的单元格几乎粘在一起。我知道我有 layout.minimumInteritemSpacing = 0 但如果我将其增加到 1，那么单元格将像第三张图像一样被向下推，使用 UIEdgeInsets 也是导致同样的问题。

我的整个 UICollectionView 都固定在 super View 的顶部 0 、底部 0 、左侧 8 和右侧 8 。我在 SO 中回顾了一些与此相关的问答，并建议使用 UICollectionViewDelegateFlowLayout 的 sizeForItemAt 函数，但我也无法使用它来解决这个问题。

如何解决 6/6s/7 屏幕宽度的间距问题，使两个单元格以一定间距排成一行？我的最终目标是在 6 及以上的设备上每行有 2 个单元格，在 5s 及以下的设备(包括 SE)上每行有 1 个单元格。这能做到吗？

Answer 1

在创建尺寸之前，您需要考虑collectionView的edge insets和minimumInteritemSpacing。您应该真正实现 UICollectionViewFlowLayoutDelegate 方法来布置 collectionView。您的 width 应该是 (screenSize - left inset - right inset - minimumInteritemSpacing)/2。

编辑

为什么不检查它是什么设备，然后根据它返回一个大小？

例如

if iPhone6 {
    return size / 2
} else {
    return size
}

要检查它当前是什么设备，请引用以下 answer .