锚点
一套轻量级的直观操作符和实用工具,用于简化 Auto Layout 代码。锚点直接构建在 NSLayoutAnchor
API 上。
每个表达式作用于一个或多个 NSLayoutAnchor
,并返回活动的 NSLayoutConstraint
。如果您要非活动约束,请在此操作。
使用
对齐
// Pin the button to 12 pt from the leading edge of its container
button.leadingAnchor == container.leadingAnchor + 12
// Pin the button to at least 12 pt from the trailing edge of its container
button.trailingAnchor <= container.trailingAnchor - 12
// Center one or both axes of a view
button.centerXAnchor == container.centerXAnchor
button.centerAnchors == container.centerAnchors
相对对齐
// Position a view to be centered at 2/3 of its container's width
view.centerXAnchor == 2 * container.trailingAnchor / 3
// Pin the top of a view at 25% of container's height
view.topAnchor == container.bottomAnchor / 4
调整大小
// Constrain a view's width to be at most 100 pt
view.widthAnchor <= 100
// Constraint a view to a fixed size
imageView.sizeAnchors == CGSize(width: 100, height: 200)
// Constrain two views to be the same size
imageView.sizeAnchors == view.sizeAnchors
// Constrain view to 4:3 aspect ratio
view.widthAnchor == 4 * view.heightAnchor / 3
组合锚点
使用此语法同时约束多个边缘
// Constrain the leading, trailing, top and bottom edges to be equal
imageView.edgeAnchors == container.edgeAnchors
// Inset the edges of a view from another view
let insets = UIEdgeInsets(top: 5, left: 10, bottom: 15, right: 20)
imageView.edgeAnchors == container.edgeAnchors + insets
// Inset the leading and trailing anchors by 10
imageView.horizontalAnchors >= container.horizontalAnchors + 10
// Inset the top and bottom anchors by 10
imageView.verticalAnchors >= container.verticalAnchors + 10
使用前导和尾随
使用 leftAnchor
和 rightAnchor
很少是正确选择。为了鼓励这一点,horizontalAnchors
和 edgeAnchors
使用 leadingAnchor
和 trailingAnchor
布局锚点。
内边距而不是偏移
在约束边距上下文/顶部底部时,以边缘的插入量而不是同时沿同一方向移动两个边缘进行操作的情况更为常见。在构建表达式时,Anchorage 将转换关系并反转轴另一侧的约束中的常数。这使得表达式更容易处理。
优先级
~
用于指定由任何 Anchorage 表达式产生的约束的优先级
// Align view 20 points from the center of its superview, with system-defined low priority
view.centerXAnchor == view.superview.centerXAnchor + 20 ~ .low
// Align view 20 points from the center of its superview, with (required - 1) priority
view.centerXAnchor == view.superview.centerXAnchor + 20 ~ .required - 1
// Align view 20 points from the center of its superview, with custom priority
view.centerXAnchor == view.superview.centerXAnchor + 20 ~ 752
布局优先级是一个枚举,具有以下值
.required
-UILayoutPriorityRequired
(默认).high
-UILayoutPriorityDefaultHigh
.low
-UILayoutPriorityDefaultLow
.fittingSize
-UILayoutPriorityFittingSizeLevel
存储约束
要存储由 Anchorage 创建的约束,只需将表达式赋值给变量即可
// A single (active) NSLayoutConstraint
let topConstraint = (imageView.topAnchor == container.topAnchor)
// EdgeConstraints represents a collection of constraints
// You can retrieve the NSLayoutConstraints individually,
// or get an [NSLayoutConstraint] via .all, .horizontal, or .vertical
let edgeConstraints = (button.edgeAnchors == container.edgeAnchors).all
批处理约束
默认情况下,Anchorage 返回活动布局约束。如果您想出于性能原因返回不活动约束用于 NSLayoutConstraint.activate(_:)
方法,可以按以下方式操作
let constraints = Anchorage.batch(active: false) {
view1.widthAnchor == view2.widthAnchor
view1.heightAnchor == view2.heightAnchor / 2 ~ .low
// ... as many constraints as you want
}
// Later:
NSLayoutConstraint.activate(constraints)
如果您希望数组中的约束在批处理中自动激活,也可以传递 active: true
Autoresizing Mask
Anchor 设置表达式的左侧的 translatesAutoresizingMaskIntoConstraints
属性为 false
,因此您通常不需要手动设置此属性。这是重要的一点,因为如果容器视图依赖于将 translatesAutoresizingMaskIntoConstraints
设置为 true
,则需要特别注意。我们倾向于在表达式的左侧保持子视图,以避免此类问题,尤其是在约束到系统提供的视图时。
编译时间说明
Anchorage 对一些 Swift 运算符进行了覆载,这可能会导致编译时间增加。您可以通过将这些运算符用 /
包围来减少这种开销,如下所示
运算符 | 更快的替代方案 |
---|---|
== |
/==/ |
<= |
/<=/ |
>= |
/>=/ |
例如,将 view1.edgeAnchors == view2.edgeAnchors
改为 view1.edgeAnchors /==/ view2.edgeAnchors
。
安装
CocoaPods
要使用CocoaPods将Anchorage集成到Xcode项目中,请在Podfile中指定它
pod 'Anchorage'
Carthage
要使用Carthage将Anchorage集成到Xcode项目中,请在Cartfile中指定它
github "Rightpoint/Anchorage"
运行carthage update
来构建框架,并将构建好的Anchorage.framework
拖到Xcode项目中。
许可证
此代码和工具受MIT许可证的约束。请参阅此存储库中的LICENSE
文件。
欢迎任何想法和贡献!