Apple界面自动布局系统Auto Layout
Apple界面自动布局系统Auto Layout

Apple界面自动布局系统Auto Layout

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布局的声明式规则系统。

   

如果您认为这篇文章给您带来了帮助,您可以在此通过支付宝或者微信打赏网站开发者。

欢迎加入我们的 微信交流群QQ交流群,交流更多精彩内容!
微信交流群二维码 QQ交流群二维码

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注