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

Question

我正在尝试使用 Collection View 创建 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，但如果你愿意，你可以在委托(delegate)方法中更改它。然而，interitem 空间必须始终等于 minimumSpacing)，edgeInsetPadding 和您想要的连续项目数。

private var numberOfItemsInRow = 2

private var minimumSpacing = 5

private var edgeInsetPadding = 10

在您的代码中，您已经将 Edge Insets 定义为:

 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
    }

现在让我们进入主要部分。将 UICollectionViewDelegateFlowLayout 中的 sizeForItemAt 修改为:

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 网格中获得两个大小相等的图 block 。如果您以后想更改它，只需将 numberOfItemsInRow 变量更改为其他内容即可。比如 3 表示 3x3。