基于程序化自动布局的二维UIImageView游戏界面布局技术问询

Hey there! Your current approach using a 2D array of UIImageViews and manual Auto Layout works, but when dealing with variable rows and columns, there are cleaner, more maintainable, and performant ways to handle this. Let’s break down the top optimization strategies:

1. Switch to UICollectionView (Recommended for Variable Grids) #

This is the best option if your grid might grow large or you want built-in view reuse, scrolling support, and easier layout adjustments. UICollectionView is designed exactly for grid/flow layouts, so it’ll save you from writing tons of constraint code.

How to Implement It: #

First, set up a UICollectionViewFlowLayout (or UICollectionViewCompositionalLayout for more flexibility) to define your grid behavior:

let layout = UICollectionViewFlowLayout()
layout.itemSize = CGSize(width: 50, height: 50) // Adjust to your desired cell size
layout.minimumInteritemSpacing = 2 // Space between columns
layout.minimumLineSpacing = 2 // Space between rows
layout.sectionInset = UIEdgeInsets(top: 180, left: 10, bottom: 0, right: 0) // Match your original padding

Next, create the collection view and register a custom cell (with a UIImageView inside):

class ChessboardCell: UICollectionViewCell {
    let imageView = UIImageView()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupImageView()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupImageView() {
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true
        contentView.addSubview(imageView)
        
        NSLayoutConstraint.activate([
            imageView.topAnchor.constraint(equalTo: contentView.topAnchor),
            imageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            imageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
            imageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor)
        ])
    }
}

// In your view controller:
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.translatesAutoresizingMaskIntoConstraints = false
collectionView.register(ChessboardCell.self, forCellWithReuseIdentifier: "ChessboardCell")
collectionView.dataSource = self
view.addSubview(collectionView)

// Set collection view constraints to anchor to safe area
NSLayoutConstraint.activate([
    collectionView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
    collectionView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
    collectionView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
    collectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
])

Finally, implement the data source methods to map your 2D array to collection view items:

extension YourViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return rows * cols
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ChessboardCell", for: indexPath) as! ChessboardCell
        let row = indexPath.item / cols
        let col = indexPath.item % cols
        cell.imageView.image = floorImageView[row][col].image // Reuse your existing image references
        return cell
    }
}

2. Use Nested UIStackViews (Simpler Manual Layout) #

If you don’t need scrolling or view reuse, nested stack views will drastically simplify your constraint code. They automatically handle spacing and alignment, so you don’t have to manually anchor every single UIImageView.

Implementation Steps: #

func setupChessboardWithStackViews() {
    // Create a vertical stack view to hold rows
    let verticalStack = UIStackView()
    verticalStack.translatesAutoresizingMaskIntoConstraints = false
    verticalStack.axis = .vertical
    verticalStack.spacing = 2 // Space between rows
    verticalStack.alignment = .leading // Align rows to the left, or .fill to stretch
    view.addSubview(verticalStack)
    
    // Set constraints for the vertical stack (match your original padding)
    NSLayoutConstraint.activate([
        verticalStack.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 180),
        verticalStack.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 10)
    ])
    
    // Loop through rows to create horizontal stack views
    for i in 0..<rows {
        let horizontalStack = UIStackView()
        horizontalStack.axis = .horizontal
        horizontalStack.spacing = 2 // Space between columns
        horizontalStack.alignment = .center
        
        // Add each UIImageView to the row's horizontal stack
        for j in 0..<cols {
            let imageView = floorImageView[i][j]
            imageView.translatesAutoresizingMaskIntoConstraints = false
            // Set fixed size for each grid cell (adjust as needed)
            NSLayoutConstraint.activate([
                imageView.widthAnchor.constraint(equalToConstant: 50),
                imageView.heightAnchor.constraint(equalToConstant: 50)
            ])
            horizontalStack.addArrangedSubview(imageView)
        }
        
        verticalStack.addArrangedSubview(horizontalStack)
    }
}

3. Optimize Your Existing Constraint Setup #

If you want to stick with your 2D array approach, you can clean up the constraint code by avoiding repetitive checks and using relative anchoring:

func setConstraints() {
    for i in 0..<rows {
        for j in 0..<cols {
            let imageView = floorImageView[i][j]
            imageView.translatesAutoresizingMaskIntoConstraints = false
            view.addSubview(imageView)
            
            // Set size constraint (keep cells uniform)
            NSLayoutConstraint.activate([
                imageView.widthAnchor.constraint(equalToConstant: 50),
                imageView.heightAnchor.constraint(equalToConstant: 50)
            ])
            
            // Anchor to top (either safe area or previous row's cell)
            let topAnchor: NSLayoutYAxisAnchor = i == 0 
                ? view.safeAreaLayoutGuide.topAnchor 
                : floorImageView[i-1][j].bottomAnchor
            let topPadding: CGFloat = i == 0 ? 180 : 2 // Space between rows
            
            // Anchor to leading (either safe area or previous column's cell)
            let leadingAnchor: NSLayoutXAxisAnchor = j == 0 
                ? view.safeAreaLayoutGuide.leadingAnchor 
                : floorImageView[i][j-1].trailingAnchor
            let leadingPadding: CGFloat = j == 0 ? 10 : 2 // Space between columns
            
            NSLayoutConstraint.activate([
                imageView.topAnchor.constraint(equalTo: topAnchor, constant: topPadding),
                imageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: leadingPadding)
            ])
        }
    }
}

Bonus Tips: #

• Uniform Cell Sizing: If you want cells to adapt to screen width (e.g., fill the available space), use UIStackView.Distribution.fillEqually for horizontal stacks, or in UICollectionView, calculate itemSize based on the collection view’s width minus insets and spacing.
• Image Performance: Cache your UIImage instances instead of loading them every time you create a UIImageView—this will speed up layout and reduce memory usage.
• Content Mode: Set imageView.contentMode = .scaleAspectFill and clipsToBounds = true to ensure images fit properly in cells without distortion.

内容的提问来源于stack exchange，提问作者Simon.T