如何在视图内约束按钮实现垂直均匀间距（仿键盘布局）

嘿，这个问题我之前做键盘类UI的时候也踩过坑！在iOS里要实现这种垂直方向均匀分布的按钮，UIStackView是最省心的方案，不仅能自动处理均等间距，还完美适配不同屏幕尺寸和像素密度，完全不用像Android那样手动纠结dp的转换——因为iOS的Auto Layout本身就是基于“点”（Points）来计算的，和Android的dp是一个概念，系统会自动帮你转换成对应屏幕的像素。

下面分两种场景给你讲具体实现：

一、用Storyboard/Interface Builder可视化实现 #

这是最快捷的方式：

1. 把你四个按钮（顶部、中间两个、底部）都拖到父视图上，不用先加任何居中或间距约束；
2. 按住Command键选中四个按钮，右键（或Ctrl+拖）到空白区域，选择Stack Vertically，把它们打包成一个垂直栈视图；
3. 选中这个栈视图，在右侧的Attributes Inspector里设置：
   • Axis：Vertical（垂直方向）
   • Distribution：Equal Spacing（让按钮之间的间距自动均等分配）
   • Alignment：Center（让所有按钮自动水平居中，省得你给每个按钮加居中约束）
4. 给栈视图添加约束：
   • 把栈视图的Top Anchor约束到父视图的顶部，设置你想要的顶部间距（比如20点）；
   • 把栈视图的Bottom Anchor约束到父视图的底部，设置你想要的底部间距（比如20点）；
   • 把栈视图的Center X Anchor约束到父视图的Center X（确保整个栈水平居中）。

这样一来，不管屏幕是iPhone SE还是iPhone 14 Pro Max，中间两个按钮的间距都会自动和上下的间距保持一致，而且物理大小在不同密度屏幕上完全统一。

二、用代码手动实现（适合动态创建按钮的场景） #

如果你的按钮是代码生成的，可以这么写：

// 假设你已经创建好四个按钮：topBtn、middleBtn1、middleBtn2、bottomBtn
let verticalStack = UIStackView(arrangedSubviews: [topBtn, middleBtn1, middleBtn2, bottomBtn])
verticalStack.axis = .vertical
verticalStack.distribution = .equalSpacing
verticalStack.alignment = .center
verticalStack.translatesAutoresizingMaskIntoConstraints = false // 必须加，禁用自动转换的约束

// 把栈视图添加到父视图
view.addSubview(verticalStack)

// 激活约束
NSLayoutConstraint.activate([
    verticalStack.topAnchor.constraint(equalTo: view.topAnchor, constant: 20),
    verticalStack.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20),
    verticalStack.centerXAnchor.constraint(equalTo: view.centerXAnchor)
])

额外小技巧 #

如果你想给按钮之间设置一个最小间距（比如当屏幕空间不足时，间距不小于10点），可以先给栈视图设置spacing = 10，然后保持distribution = .equalSpacing——这样当屏幕有多余空间时，间距会自动拉大到均等；当空间不够时，会保持最小10点的间距，按钮不会挤在一起。

如果你实在不想用栈视图（比如老项目兼容），可以手动给三个间距添加“相等约束”：

• 顶部按钮底部到中间按钮1顶部的间距 = 中间按钮1底部到中间按钮2顶部的间距
• 中间按钮1底部到中间按钮2顶部的间距 = 中间按钮2底部到底部按钮顶部的间距
  不过这种方法很繁琐，按钮数量一变就得改约束，远不如栈视图灵活。

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