如何配置Auto Layout实现含UIButton的StackView在UIView内适配

问题场景 #

基于xib开发NumpadView自定义数字键盘，内部共排布4行按钮：前3行每行5个UIButton，最后1行4个UIButton，配置约束后出现两类异常：

• 按钮无法动态调整尺寸，不能沿高度方向适配NumpadView边界
• 为承载按钮的GridView添加顶部约束后，按钮上设置的1:1Aspect Ratio宽高比约束直接失效
  目标效果：所有按钮保持1:1宽高比显示为圆形，无论NumpadView初始化高度为多少，控件都能合理适配，完整容纳内部所有按钮。

约束配置步骤 #

核心思路是把按钮1:1比例作为最高优先级约束，让容器尺寸弹性适配按钮排布需求，不要双向锁死固定边距造成约束冲突。

1. 配置GridView与NumpadView的关联约束
   • 给GridView添加水平居中、垂直居中约束，对齐NumpadView中心
   • 给GridView添加上下左右四个方向的边距约束，边距规则设为大于等于预设最小边距（比如最小留8pt，避免按钮贴边），约束优先级设为defaultHigh(750)
   • 不要给GridView设置固定宽高值，其尺寸完全由内部按钮排布撑开
2. 配置行内按钮水平方向约束
   • 同一行内相邻按钮设置等宽约束、固定水平间距
   • 每行首按钮 leading 对齐GridView leading，每行尾按钮 trailing 对齐GridView trailing
   • 给所有按钮统一添加1:1宽高比约束，约束优先级设为required(1000)，保证圆形比例不会被其他约束打破
3. 配置多行按钮垂直方向约束
   • 所有行的按钮统一设置等高约束
   • 相邻行之间设置固定垂直间距
   • 第一行按钮 top 对齐GridView top，最后一行按钮 bottom 对齐GridView bottom
4. 优先级校准
   • 把NumpadView本身的固定高度、外部传入高度相关约束的优先级降到defaultLow(250)，让Auto Layout优先计算按钮适配需要的合理尺寸，再匹配NumpadView的可用空间
   • 给按钮的宽高添加小于等于当前容器可用最大尺寸的约束，避免NumpadView高度过大时按钮无限放大超出边界

圆形按钮实现 #

不要在xib中写死按钮圆角值，在NumpadView的生命周期方法中动态计算圆角：

override func layoutSubviews() {
    super.layoutSubviews()
    numpadButtons.forEach { button in
        button.layer.cornerRadius = button.bounds.height / 2
        button.layer.masksToBounds = true
    }
}

该方式能保证按钮尺寸随约束动态变化时，圆角始终匹配尺寸，保持正圆形。

异常原因说明 #

• 宽高比约束失效：给GridView添加固定值顶部边距的同时，给按钮设置了固定宽/高约束，两个方向的约束优先级相同，Auto Layout无法同时满足所有规则，会直接打破优先级更低的宽高比约束
• 按钮无法动态适配高度：GridView垂直方向的边距约束设置为了固定值相等关系，而非弹性的大于等于最小边距规则，Auto Layout没有动态调整按钮尺寸的冗余空间，只能保持xib中预设的初始按钮大小

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