针对各种 iPhone 屏幕尺寸动态调整 UICollectionView 单元格宽度的宽度

Question

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

现在我在视图控制器中有这段代码来实现这个-

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 都固定在超级视图的顶部 0 、底部 0 、左侧 8 和右侧 8 。我在 SO 中查看了一些与此相关的问答，并建议使用 UICollectionViewDelegateFlowLayout 的 sizeForItemAt 函数，但我也无法使用它解决此问题。

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

Answer 1

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

编辑

为什么不检查 device 它是什么，然后 return 一个 size 以此为基础？

例如

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

查看当前是什么设备参考以下answer.

针对各种 iPhone 屏幕尺寸动态调整 UICollectionView 单元格宽度的宽度

Dynamically sizing width of UICollectionView cell width for various iPhone screen sizes

xcode

ios

uicollectionview

uicollectionviewlayout

swift