为 collectionView 中的每个其他项目设置特定布局

Question

我有一个带有自定义单元格的 collectionView。我想使用特定布局在我的单元格内布置 imageView，但布置不正确。

第一行和第三行布局正确，但第二行布局不正确。正确的布局应该是中间的每张图片都应该低于两端的其他两张图片。

问题出在 CollectionViewCell 内部我正在使用模数将每个奇数单元格设置为低于每个偶数单元格但是因为第二行（或在每个奇数行中）中间单元格的模数将始终为偶数布局正确，但没有给我想要的东西。

如何让布局看起来像下图？

代码：

override func viewDidLoad() {
    super.viewDidLoad()

    let layout = UICollectionViewFlowLayout()
    layout.sectionInset = UIEdgeInsetsMake(15, 0, 5, 0)
    layout.scrollDirection = .vertical

    collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
    collectionView.translatesAutoresizingMaskIntoConstraints = false
    // collectionView datasource, delegate, and cell registration set
    view.addSubview(collectionView)

    collectionView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
    collectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
    collectionView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 5).isActive = true
    collectionView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -5).isActive = true
}

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

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! CustomCell

    cell.item = indexPath.item
 }

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

    let width = (view.frame.width - 25) / 3
    return CGSize(width: width, height: width)
}

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

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

这是我用来设置布局的 CollectionViewCell 中的代码：

class CustomCell: UICollectionViewCell {

    var item: Int = 0 {
        didSet {
             setLayout()
        }
    }

    func setLayout() {
        addSubview(imageView)

        imageView.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true
        imageView.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true

        if item % 2 == 0 {

            imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: -10).isActive = true
            imageView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -10).isActive = true

        } else {

            imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: 10).isActive = true
            imageView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 10).isActive = true
        }
    }
}

Answer 1

您似乎想选中 if (item + 1) % 3 == 2 然后将单元格向下移动。这是编辑后的代码：

   if (item + 1) % 3 == 2 {
        imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: 10).isActive = true
        imageView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 10).isActive = true

    } else {

        imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: -10).isActive = true
        imageView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -10).isActive = true
    }

Answer 2

让我们看看....您要移动的项目是 2、5 和 8...+3

所以...试试....

if item == 2 {
    imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: 10).isActive = true
    imageView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 10).isActive = true

} 
if (item - 2 ) % 3 == 0{
imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: 10).isActive = true
    imageView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 10).isActive = true
 } else {
    imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: -10).isActive = true
    imageView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -10).isActive = true
}

// 你看到我要去哪里了吗？您的规则的例外是 2。您需要调整每 2 + 3(n) 个单元格。

// so if item = 2; process code
// if item = 5: minus it by 2; item = 3 which % 3 == 0
// if item = 8: minus it by 2; item = 6 which % 3 == 0

// and so on. 
// hope you understand now, I'm not very good at explaining,

为 collectionView 中的每个其他项目设置特定布局

Set specific layout for every other item inside collectionView

ios

swift

uicollectionview

uicollectionviewcell

modulus