Auto Layout 是 Apple 提供的一套界面自动布局系统,用于在不同窗口尺寸、分辨率、缩放比例和语言环境下,自动计算并维护视图的位置与大小。
没有Auto Layout之前
没有Auto Layout之前,界面通常设置frame实现布局:
view.frame = CGRect(x: 0, y: 0, width: 200, height: 100)
使用frame的缺点在于,窗口缩放后布局会发生混乱、不同屏幕分辨率适配困难等问题。
Auto Layout的数学模型
因为frame固定坐标无法适配所有设备,Auto Layout可以让界面自动调整。横屏和竖屏需要不同的布局时,Auto Layout会自动重新计算。
Auto Layout基于约束求解器(Constraint Solver),将布局问题转化为数字方程组:
视图A.左边 = 视图B.左边 + 20
视图A.宽度 = 视图B.宽度 × 0.5
视图A.高度 = 100
每一条约束本质是一条线型方程:
view1.attribute = multiplier × view2.attribute + constant
通过描述视图之间的关系来实现布局。
例如:
// 这个按钮距离父视图左边 20 点,距离顶部 50 点
button.leadingAnchor.constraint(equalTo: parentView.leadingAnchor, constant: 20)
button.topAnchor.constraint(equalTo: parentView.topAnchor, constant: 50)
布局系统在运行时解这些方程,并计算出最终的frame。
三种使用方式
1、Interface Builder(可视化)
在 Xcode 的 Storyboard 或 XIB 中拖拽设置约束。
2、代码方式 – Layout Anchors(推荐)
view.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
view.centerXAnchor.constraint(equalTo: parentView.centerXAnchor),
view.centerYAnchor.constraint(equalTo: parentView.centerYAnchor),
view.widthAnchor.constraint(equalToConstant: 200),
view.heightAnchor.constraint(equalToConstant: 100)
])
3、NSLayoutConstraint 类方法
NSLayoutConstraint(
item: view1,
attribute: .top,
relatedBy: .equal,
toItem: view2,
attribute: .bottom,
multiplier: 1.0,
constant: 10
).isActive = true
关键概念
1、约束类型
位置约束:leading, trailing, top, bottom, centerX, centerY
尺寸约束:width, height
关系约束:equal(=), greaterThanOrEqual(≥), lessThanOrEqual(≤)
2、约束优先级
当约束冲突时,优先级高的会被优先满足:
Required(1000):必须满足
High(750):高优先级
Low(250):低优先级
3、Content Hugging & Compression Resistance
Content Hugging:视图抵抗被拉伸的能力
Compression Resistance:视图抵抗被压缩的能力
使用示例
让一个红色方块居中显示,宽高各 100:
let redBox = UIView()
redBox.backgroundColor = .red
redBox.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(redBox)
NSLayoutConstraint.activate([
redBox.centerXAnchor.constraint(equalTo: view.centerXAnchor),
redBox.centerYAnchor.constraint(equalTo: view.centerYAnchor),
redBox.widthAnchor.constraint(equalToConstant: 100),
redBox.heightAnchor.constraint(equalToConstant: 100)
])
总结
Auto Layout相比Frame,适配性更强,可以自动调整视图布局,适用于复杂的响应式布局。
通过描述视图关系自动计算视图frame的系统布局引擎,而非指定具体位置来构建界面。从工程角度来讲,它是UI布局的声明式规则系统。
