ios - 如何更改集合视图单元格大小并添加填充？

Question

我试图让我的 collectionView 单元格看起来像下面的图片，但无法做到。我尝试使用 collectionViewLayout 但无法正确调整大小以及正确的填充。我怎么能做到这一点？

这是我的代码

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
            let frameSize = collectionView.frame.size
            return CGSize(width: frameSize.width, height: frameSize.height / 2)

    }

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

这是我正在努力实现的目标的图片。谢谢

标签： iosswiftuiviewcontrolleruicollectionviewuicollectionviewcell

Answer 1

实现UICollectionViewFlowLayout以下方法

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

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

对于 27px 插图使用

yourcollectionView.sectionInset = UIEdgeInsets(top: 10, left: 27, bottom: 10, right: 27)

要使用实现此协议的类，您必须设置集合视图的委托属性。

yourcollectionView.delegate = /* object which implement flow layout delegate */

UICollctionViewDelegate自动符合UICollectionViewFlowLayoutDelegate，设置委托就够了。

在计算像元大小时，您还遗漏了另一件事。您的单元格大小计算错误。实现如下

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
            let frameSize = collectionView.frame.size
            let size = (frameSize.width - 64.0) / 2.0 // 27 px on both side, and within, there is 10 px gap.
            return CGSize(width: size, height: size)

    }

如果您使用故事板来设置 UI Widget 的布局，您也可以在故事板中设置它们。