如何使用 Collection View 创建 2 x 2 网格布局？

Question

我正在尝试使用集合视图创建 2x2 网格布局。

我使用了下面的代码。它在 iPhone 5 上运行良好，但需要进行一些调整。我正在尝试编写可在所有屏幕尺寸上使用的代码。这不适用于 iPhone 6。

public func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 2
    }

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

    public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        if let cell1 = cell as? CollectionViewCell {
            return cell1
        }
        return cell
    }

    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {

        let padding: CGFloat =  20
        let collectionViewSize = collectionView.frame.size.width - padding

        return CGSize(width: collectionViewSize/2, height: collectionViewSize/2+15)
    }

 public func collectionView(_ collectionView: UICollectionView,
        layout collectionViewLayout: UICollectionViewLayout,
        insetForSectionAt section: Int
        ) -> UIEdgeInsets {
        return UIEdgeInsets(
            top: 5, left: 5, bottom: 5, right: 5
        )
    }

    public func collectionView(
        _ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {

    }

    public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 5
    }

    public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 5
    }

我正在尝试实现以下布局：

将来这个网格可以是只有 2 列 N 行。每行始终有 2 个项目。

Answer 1

首先，根据您的需要将三个变量放在一起。这些是最小间距（InteritemSpacing 和 Line Spacing - 应该与 UXwise 相同，但如果您愿意，您可以在委托方法中更改它。但是，项目间空间必须始终等于minimumSpacing）、edgeInsetPadding 以及您想要的一行中的项目数。

private var numberOfItemsInRow = 2

private var minimumSpacing = 5

private var edgeInsetPadding = 10

在您的代码中，您已经将边缘插入定义为：

 UIEdgeInsets(
            top: 5, left: 5, bottom: 5, right: 5
        )

左右插图对于正确确定物品的尺寸非常重要。left+right 给出的总和是 10。应该edgeInsetPadding这样分配：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        let inset = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
        edgeInsetPadding = inset.left+inset.right
        return inset
    }

现在让我们开始吧UICollectionViewDelegateFlowLayout。更新以下方法。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return minimumSpacing
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return minimumSpacing
    }

现在让我们进入主要部分。将您的sizeForItemAtin修改UICollectionViewDelegateFlowLayout为：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let width = (Int(UIScreen.main.bounds.size.width) - (numberOfItemsInRow - 1) * minimumSpacing - edgeInsetPadding) / numberOfItemsInRow
        return CGSize(width: width, height: width)
    }

就是这样。现在，您将在 2x2 网格中获得两个相同大小的图块。如果您想将来更改此设置，只需将numberOfItemsInRow变量更改为其他内容即可。就像 3 x 3 一样。