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中的其他所有项目设置特定的布局

2 个答案: