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

时间:2018-07-17 03:40:20

标签: ios swift uiviewcontroller uicollectionview uicollectionviewcell

我正在尝试使我的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)
    }
}

这是我要实现的目标的图片。谢谢

enter image description here

1 个答案:

答案 0 :(得分:3)

实施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窗口小部件的布局,也可以在情节提要中对其进行设置。

Storyboard solution