📱 📐
Cartography
使用Cartography,您可以使用声明式代码来设置Auto Layout约束,而无需任何字符串类型转换!
简而言之,它允许您替换下面的内容
addConstraint(NSLayoutConstraint(
item: button1,
attribute: .Right,
relatedBy: .Equal,
toItem: button2,
attribute: .Left,
multiplier: 1.0,
constant: -12.0
))
...
constrain(button1, button2) { button1, button2 in
button1.right == button2.left - 12
}
如果您在生产环境中使用Cartography,我很乐意听取您的反馈。您可以通过Twitter或电子邮件联系我。
安装
CocoaPods
要使用CocoaPods将Cartography集成到您的Xcode项目中,请在您的Podfile
中指定它:
target '<Your Target Name>' do
pod 'Cartography', '~> 3.0'
end
然后,运行以下命令:
$ pod install
使用
使用您的 UIView
或 NSView
实例以及一个闭包调用 constrain
函数,在闭包中声明您视图的不同属性之间的约束。
constrain(view1, view2) { view1, view2 in
view1.width == (view1.superview!.width - 50) * 0.5
view2.width == view1.width - 50
view1.height == 40
view2.height == view1.height
view1.centerX == view1.superview!.centerX
view2.centerX == view1.centerX
view1.top >= view1.superview!.top + 20
view2.top == view1.bottom + 20
}
对于平等或不平等运算符左侧的每个视图,Cartography 会在其 translatesAutoresizingMaskIntoConstraints
属性设置为 false
。
如果视图不是由您控制(例如,如果它属于 Apple 提供的 UIViewController
类),则在声明其约束时应格外小心。
替换约束
您可以将多个约束分组起来,然后在稍后用新的约束替换它们。
constrain(view) { view in
view.width == 100
view.height == 100
}
let group = ConstraintGroup()
// Attach `view` to the top left corner of its superview
constrain(view, replace: group) { view in
view.top == view.superview!.top
view.left == view.superview!.left
}
/* Later */
// Move the view to the bottom right corner of its superview
constrain(view, replace: group) { view in
view.bottom == view.superview!.bottom
view.right == view.superview!.right
}
UIView.animate(withDuration: 0.5, animations: view.layoutIfNeeded)
为了方便起见,constrain
函数还返回 ConstraintGroup
实例。
let group = constrain(button) { button in
button.width == 100
button.height == 400
}
支持的属性
截至 iOS 8 和 OS X 10.9,Cartography 支持所有内置属性,包括:
宽度
高度
上方
右侧
下方
左侧
Leading
Trailing
中心X
中心Y
基线
以及 iOS 特有的
第一基线
左侧边距
右侧边距
上方边距
下方边距
Leading 边距
Trailing 边距
边距内中心X
边距内中心Y
边距内边缘
这些可以通过以下运算符进一步细化: *
, /
, +
和 -
。
此外,它还支持方便的复合属性,允许您一次赋值多个属性。
constrain(view) { view in
view.size == view.superview!.size / 2
view.center == view.superview!.center
}
constrain(view) { view in
view.edges == inset(view.superview!.edges, 20, 20, 40, 20)
}
对齐多个视图
如果您需要通过共同的边缘对齐多个视图,则可以使用 align
函数。
constrain(view1, view2, view3) { view1, view2, view3 in
align(top: view1, view2, view3)
}
这相当于 view1.top == view2.top; view2.top == view3.top
。还存在类似的变体,用于 top
、right
、bottom
、left
、leading
、trailing
、centerX
、centerY
和 baseline
。
平均分布视图
为了水平或垂直地分发多个视图,您可以使用 distribute
函数。
constrain(view1, view2, view3) { view1, view2, view3 in
distribute(by: 10, horizontally: view1, view2, view3)
}
它等价于 view1.trailing == view2.leading - 10; view2.trailing == view3.leading - 10
。
设置优先级
您可以使用 ~
操作符来设置约束的优先级。
constrain(view) { view in
view.width >= 200 ~ UILayoutPriority(100)
view.height >= 200 ~ .required
}
捕获约束
由于 ==
, >=
, <=
和 ~
会生成 NSLayoutConstraint
实例,如果需要在稍后时间引用布局约束,您可以捕获其结果。
var width: NSLayoutConstraint?
constrain(view) { view in
width = (view.width == 200 ~ 100)
}
请注意,声明复合属性会立即返回多个约束。
var constraints: [NSLayoutConstraint]?
constrain(view) { view in
constraints = (view.size == view.superview!.size ~ .defaultLow)
}
文档
请在此处阅读文档 http://robb.github.io/Cartography/。有关更多信息,请查看 gh-pages 分支。
版本
对于 Swift 3.x:版本 <= 1.1.0
对于 Swift 4.x:版本 >= 2.0.0
对于 Swift 5.x:版本 >= 4.0.0
支持
如果您有问题,请 提交问题。
关于 Cartography
地图绘制是由Robb Böhnke构建的,由Orta Therox维护,并受到FLKAutoLayout的启发,后者由Florian Kugler创建。