如何实现之字形Collection View布局？indexPath.row%3==0方案无效

Hey there! Let’s get that zig-zag cell layout working for you. The indexPath.row % 3 == 0 logic you tried only checks for the first item in each row—it doesn’t handle reversing the order of items in alternating rows, which is what makes a zig-zag layout work. Here’s a straightforward, actionable solution assuming you’re using UICollectionView (the standard for grid-based layouts):

Core Idea #

A zig-zag (or "snake") layout means alternating row directions:

• Even rows (0, 2, 4...) are laid out left-to-right
• Odd rows (1, 3, 5...) are laid out right-to-left

For a 3-column grid, this means reversing the column position of items in odd rows.

Step-by-Step Implementation #

We’ll use UICollectionViewDelegateFlowLayout to adjust each cell’s frame dynamically:

1. First, set up basic layout constants (adjust these to match your design):

   • Item width/height
   • Spacing between items and around the collection view

2. Calculate row and column positions for each cell, then reverse columns for odd rows:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, frameForItemAt indexPath: IndexPath) -> CGRect {
    // Define your layout constants
    let totalSpacing: CGFloat = 10 // Spacing between items and edges
    let itemCountPerRow = 3
    let itemHeight: CGFloat = 120
    let itemWidth = (collectionView.bounds.width - (totalSpacing * (itemCountPerRow + 1))) / CGFloat(itemCountPerRow)
    
    // Calculate which row the current item is in
    let row = indexPath.row / itemCountPerRow
    // Calculate base Y position for the row
    let yPosition = CGFloat(row) * (itemHeight + totalSpacing) + totalSpacing
    
    // Determine column position—reverse for odd rows
    var column = indexPath.row % itemCountPerRow
    if row % 2 != 0 {
        column = itemCountPerRow - 1 - column
    }
    
    // Calculate X position based on column
    let xPosition = CGFloat(column) * (itemWidth + totalSpacing) + totalSpacing
    
    return CGRect(x: xPosition, y: yPosition, width: itemWidth, height: itemHeight)
}

3. Don’t forget to set spacing values in your flow layout to match:

if let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
    flowLayout.minimumInteritemSpacing = totalSpacing
    flowLayout.minimumLineSpacing = totalSpacing
    flowLayout.sectionInset = UIEdgeInsets(top: totalSpacing, left: totalSpacing, bottom: totalSpacing, right: totalSpacing)
}

Why Your Original Logic Didn’t Work #

indexPath.row % 3 == 0 only identifies the first item in each row—it doesn’t change the arrangement of other items in the row. The key to zig-zag is flipping the column order for every other row, which requires checking the row number and adjusting the column position accordingly.

内容的提问来源于stack exchange，提问作者Ryan Candall