如何为UICollectionViewCell设置不同的填充大小

Question

我想在图片上创建一个集合视图

到目前为止，我确实为我的控制器提供了此代码

class MainCollController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout, UICollectionViewDelegate  {

let cellId = "collectionCellId"

override func viewDidLoad() {
    super.viewDidLoad()


    let flowLayout = UICollectionViewFlowLayout()
    let collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: flowLayout)
    collectionView.register(Cell.self, forCellWithReuseIdentifier: cellId)
    collectionView.delegate = self
    collectionView.dataSource = self
    collectionView.backgroundColor = UIColor.grayBg

    self.view.addSubview(collectionView)

    _ = collectionView.anchor(view.topAnchor, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor, topConstant: 0, leftConstant: 0, bottomConstant: 0, rightConstant: 0, widthConstant: 0, heightConstant: 0)

    let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    let width = UIScreen.main.bounds.width
    layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    layout.itemSize = CGSize(width: width / 2, height: width / 2)
    layout.minimumInteritemSpacing = 0
    layout.minimumLineSpacing = 0
    collectionView.collectionViewLayout = layout

}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: view.frame.width / 2 , height: 280)
}

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

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! Cell
    cell.backgroundColor = UIColor.cyan
    cell.cellIndex = indexPath.row

    return cell
}

}

这是一个细胞。我正在考虑检查indexPath.row是偶数还是添加，并依赖它设置不同的约束。

class Cell: UICollectionViewCell {

var cellIndex: Int? {
    didSet {
        if cellIndex! % 2 == 0 {
            _ = productView.anchor(topAnchor, left: leftAnchor, bottom: nil, right: rightAnchor, topConstant: 0, leftConstant: 20, bottomConstant: 0, rightConstant: 8.5, widthConstant: 0, heightConstant: 264)
        } else {
            _ = productView.anchor(topAnchor, left: leftAnchor, bottom: nil, right: rightAnchor, topConstant: 0, leftConstant: 11.5, bottomConstant: 0, rightConstant: 19.5, widthConstant: 0, heightConstant: 264)
        }
    }
}

let productView: UIView = {
    let view = UIView()
    view.backgroundColor = UIColor.white
    view.layer.borderColor = UIColor(red:0.867, green:0.867, blue:0.867, alpha:1.000).cgColor
    view.layer.borderWidth = 0.5
    return view
}()

override init(frame: CGRect) {
    super.init(frame: frame)

    addSubview(productView)

}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}
}

当我打开我的应用程序时，它确实看起来我需要它，但当我开始向下滚动时，一切都变得混杂。

你能帮我解决一下吗？谢谢！

Answer 1

您需要实现这两个函数来制作您想要的collectionView：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsetsMake(0,15,0,15)
}

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

随意为您的目的玩这些价值观。

Answer 2

试试这段代码......

扩展名YourVC：UICollectionViewDelegateFlowLayout {

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


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

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

    let itemSpacing: CGFloat = 5 //set the spacing as needed
    let itemSize = (collectionView.frame.width - (3 * itemSpacing)) / 2

    return CGSize(width: itemSize, height: itemSize * 1.69)
}

}

注意：1.69是已采用的高宽比。 （表示单元格高度是其宽度的1.69倍。）

Answer 3

您尝试制作的布局，固定的单元格大小和填充以及每行的单元格数形成一个规则的网格，并不是UICollectionViewFlowLayout的用途。你最好编写自己的集合视图布局，或者至少是子类化UICollectionViewFlowLayout，以便按照你想要的方式放置单元格。

不知道怎么开始？您可以从许多网格布局示例开始：在＆＃34; UICollectionView网格布局＆＃34;上进行Google搜索。