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

Posted 2023-03-14

【中文标题】为 collectionView 中的每个其他项目设置特定布局

【英文标题】：Set specific layout for every other item inside collectionView

【发布时间】：2018-08-29 23:34:26

【问题描述】：

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

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

问题在 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
        
    

【参考方案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
    

【讨论】：

它没有用。它将每 3 个单元格向上推。每行的前两个单元格在同一级别，但第三个单元格更高

【参考方案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, 

【讨论】：

我会在早上通读你的答案。这里是晚上 11 点 30 分。谢谢，即使我发现接受的答案一点点都有帮助:)

没关系！我的答案和 Leo Fengs 一样（除了他的更简单）！我没有刷新我的浏览器，所以它没有显示正确的答案。他使用加法，而我使用减法 :) 我希望在我们的解释之后你能明白为什么它会关闭:)