Swift 3中如何对齐表格不同单元格内的按钮

嘿，我来帮你搞定这个表格里按钮对齐的麻烦事儿！你遇到的问题其实是UITableViewCell布局里很常见的Auto Layout误区，我给你拆解下原因和解决方案：

为什么你之前的方法没生效？ #

• 直接修改frame.size.width：UITableViewCell是会复用的，而且Auto Layout会在布局阶段覆盖你手动设置的frame，所以这种方法根本靠不住。
• 单独加固定宽度约束：你之前的约束是给按钮设了固定宽度，但没设置水平位置约束（比如leading/trailing/centerX），按钮自然不知道该往哪放，对齐效果当然差；另外如果没把translatesAutoresizingMaskIntoConstraints设为false，系统自动生成的约束会和你加的约束冲突，导致约束不生效。

正确的解决方案：用相对Auto Layout约束 #

我们要让按钮的宽度和位置都和父视图（或者上方单元格的按钮）建立关联，这样不管屏幕尺寸怎么变，都能保持对齐。

代码实现方式

假设你要让下方单元格的按钮和上方第一个单元格的第一个按钮对齐，那可以这么写：

// 第一步：必须关闭按钮的自动约束转换，否则自定义约束会失效
optionBtnCommon.translatesAutoresizingMaskIntoConstraints = false

guard let superView = optionBtnCommon.superview else { return }

// 1. 设置宽度：等于父视图宽度的1/3，和上方三个按钮等宽
let widthConstraint = NSLayoutConstraint(
    item: optionBtnCommon,
    attribute: .width,
    relatedBy: .equal,
    toItem: superView,
    attribute: .width,
    multiplier: 1/3,
    constant: 0
)
superView.addConstraint(widthConstraint)

// 2. 设置水平对齐：和上方第一个按钮一样，左对齐父视图
let leadingConstraint = NSLayoutConstraint(
    item: optionBtnCommon,
    attribute: .leading,
    relatedBy: .equal,
    toItem: superView,
    attribute: .leading,
    multiplier: 1,
    constant: 0
)
superView.addConstraint(leadingConstraint)

// 3. 加上垂直约束，比如让按钮在单元格里垂直居中
let centerYConstraint = NSLayoutConstraint(
    item: optionBtnCommon,
    attribute: .centerY,
    relatedBy: .equal,
    toItem: superView,
    attribute: .centerY,
    multiplier: 1,
    constant: 0
)
superView.addConstraint(centerYConstraint)

如果要对齐上方的中间按钮，把leadingConstraint换成centerX约束就行：

let centerXConstraint = NSLayoutConstraint(
    item: optionBtnCommon,
    attribute: .centerX,
    relatedBy: .equal,
    toItem: superView,
    attribute: .centerX,
    multiplier: 1,
    constant: 0
)
superView.addConstraint(centerXConstraint)

更简单的方式：用Interface Builder

如果你是用Storyboard/XIB做布局，操作更直观：

1. 给第一个单元格的三个按钮设置等宽约束，然后分别让第一个按钮leading对齐单元格、第二个按钮centerX对齐单元格、第三个按钮trailing对齐单元格。
2. 给下方单元格的按钮设置宽度等于单元格宽度的1/3，然后根据需要设置leading/centerX/trailing对齐单元格，和上方按钮的位置对应上就行。

这样不管单元格怎么复用、屏幕怎么变，按钮的宽度和位置都会完美对齐啦！

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