如何在Xcode中为带图UIButtons设置适配多屏的自动布局约束？

针对你遇到的UIKit布局适配问题，我推荐三种可靠的解决方案，从易实现到灵活度高依次排列，同时帮你分析之前尝试失败的原因：

一、先搞懂你之前的frame代码为什么失效 #

你在setupButtons()里直接设置按钮frame时，大概率是在viewDidLoad中调用的这个方法——此时contentView的frame还没经过自动布局的尺寸调整，拿到的只是storyboard里的原始设计尺寸。正确的做法是把frame相关的代码放到viewDidLayoutSubviews中，这个方法会在视图完成布局、尺寸确定后调用：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    setupButtons()
}

func setupButtons() {
    let spacing: CGFloat = 20
    let buttonSize = (contentView.frame.width - 2*spacing)/3
    // 手动计算每个按钮的位置（以第一行为例）
    btn1.frame = CGRect(x: spacing, y: spacing, width: buttonSize, height: buttonSize)
    btn2.frame = CGRect(x: spacing + buttonSize + spacing, y: spacing, width: buttonSize, height: buttonSize)
    btn3.frame = CGRect(x: contentView.frame.width - spacing - buttonSize, y: spacing, width: buttonSize, height: buttonSize)
    // 同理设置第二、第三行按钮的frame...
}

不过这种手动计算frame的方式不够优雅，更推荐下面两种自动布局方案。

二、方案1：嵌套UIStackView（最快实现） #

利用垂直栈视图嵌套3个水平栈视图，让系统自动帮你处理按钮的大小和间距，适配所有屏幕：

1. 代码实现步骤：

override func viewDidLoad() {
    super.viewDidLoad()
    setupStackViewLayout()
}

func setupStackViewLayout() {
    // 1. 创建9个按钮（假设你已经有这些按钮实例）
    let buttons = [player_button, btn2, btn3, btn4, btn5, btn6, btn7, btn8, btn9]
    
    // 2. 分3组创建水平栈视图
    let row1 = UIStackView(arrangedSubviews: Array(buttons[0...2]))
    let row2 = UIStackView(arrangedSubviews: Array(buttons[3...5]))
    let row3 = UIStackView(arrangedSubviews: Array(buttons[6...8]))
    
    // 3. 配置水平栈视图属性
    [row1, row2, row3].forEach { stack in
        stack.axis = .horizontal
        stack.distribution = .fillEqually // 按钮平分行宽
        stack.spacing = 16 // 按钮间水平间距
    }
    
    // 4. 创建垂直栈视图，放入3个水平栈
    let verticalStack = UIStackView(arrangedSubviews: [row1, row2, row3])
    verticalStack.axis = .vertical
    verticalStack.distribution = .fillEqually // 每行平分contentView高度
    verticalStack.spacing = 16 // 行与行的垂直间距
    verticalStack.translatesAutoresizingMaskIntoConstraints = false
    
    // 5. 将垂直栈添加到contentView并设置约束
    contentView.addSubview(verticalStack)
    NSLayoutConstraint.activate([
        verticalStack.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
        verticalStack.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
        verticalStack.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 16),
        verticalStack.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -16)
    ])
    
    // 6. 确保按钮是正方形
    buttons.forEach { btn in
        btn.widthAnchor.constraint(equalTo: btn.heightAnchor).isActive = true
    }
}

这种方式不需要手动计算任何尺寸，系统会根据contentView的大小自动调整按钮尺寸，完美适配iPhone和iPad。

三、方案2：UICollectionView（最灵活，适合扩展） #

如果未来你可能需要添加更多按钮、实现滚动效果，UICollectionView是最优选择，天生支持网格布局：

1. 配置布局：

private let collectionView: UICollectionView = {
    let layout = UICollectionViewFlowLayout()
    layout.minimumInteritemSpacing = 16
    layout.minimumLineSpacing = 16
    layout.sectionInset = UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16)
    
    let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
    cv.backgroundColor = .clear
    cv.translatesAutoresizingMaskIntoConstraints = false
    cv.register(ShopButtonCell.self, forCellWithReuseIdentifier: "ShopButtonCell")
    return cv
}()

2. 在视图布局完成后计算单元格尺寸：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    guard let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else { return }
    
    // 计算每个单元格的宽度：(contentView宽度 - 左右内边距 - 2个间距)/3
    let availableWidth = contentView.frame.width - layout.sectionInset.left - layout.sectionInset.right - 2*layout.minimumInteritemSpacing
    let itemSize = availableWidth / 3
    layout.itemSize = CGSize(width: itemSize, height: itemSize)
    
    collectionView.collectionViewLayout.invalidateLayout()
}

3. 添加约束让collectionView铺满contentView：

override func viewDidLoad() {
    super.viewDidLoad()
    contentView.addSubview(collectionView)
    NSLayoutConstraint.activate([
        collectionView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
        collectionView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
        collectionView.topAnchor.constraint(equalTo: contentView.topAnchor),
        collectionView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
    ])
    
    collectionView.dataSource = self
}

4. 实现UICollectionViewDataSource协议：

extension YourViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 9
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ShopButtonCell", for: indexPath) as! ShopButtonCell
        // 配置按钮内容（比如图片、文字）
        return cell
    }
}

这里的ShopButtonCell是自定义的UICollectionViewCell，内部包含你的按钮组件即可。

四、为什么之前的栈视图尝试失败？ #

大概率是你没有正确设置栈视图的distribution属性，或者没有给栈视图添加足够的约束让它铺满contentView。只要确保垂直栈视图的上下左右都和contentView有约束，同时设置distribution = .fillEqually，按钮就能自动适配。

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