说明
有的时候写demo,甚是纠结:
- 用storyboard、xib实际上现实项目用不上(难以复用,比较容易冲突),
- 不想写绝对布局(
CGRectMack(...)
),显得不上进, - 引入Snapkit又觉得麻烦,跟UI无关的demo还要加说明。
物尽其用,条件受限情况下如何写Autolayout呢?其实跟Snapkit一样简单。
Layout Anchors
本文推荐用Layout Anchors, iOS 9 以后适用。因为它相对简单。
- 先决条件必须设置属性
translatesAutoresizingMaskIntoConstraints
为false
subView.translatesAutoresizingMaskIntoConstraints = false
- 要先把subView添加到目标view中,才能添加约束。
view.addSubview(subView)
- 例子增加一个橙色tableView,上下都为SafeArea范围内,宽度为父View。
func addSubView() {
var tableView: UITableView = UITableView()
view.addSubview(tableView)
tableView.backgroundColor = .orange
tableView.translatesAutoresizingMaskIntoConstraints = false
let constraints = [
// tableView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
// tableView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
tableView.widthAnchor.constraint(equalTo: view.widthAnchor),
tableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
tableView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
]
NSLayoutConstraint.activate(constraints)
}
运行效果:
- 改一下方式,左边举例父视图50,右边距离父视图50,长度为200.
func addSubView() {
var tableView: UITableView = UITableView()
view.addSubview(tableView)
tableView.backgroundColor = .orange
tableView.translatesAutoresizingMaskIntoConstraints = false
let constraints = [
tableView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 50),
tableView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -50),
tableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
tableView.heightAnchor.constraint(equalToConstant: 200)
]
NSLayoutConstraint.activate(constraints)
}
运行效果:
更多信息,请参考苹果API文档
https://developer.apple.com/documentation/uikit/nslayoutanchor
查看WWDC视频,如有时间
https://developer.apple.com/videos/play/wwdc2018/220
参考
https://www.avanderlee.com/swift/auto-layout-programmatically/
https://medium.com/@hassanahmedkhan/autolayouts-via-layout-anchors-5214b3f746a9
https://stackoverflow.com/questions/26180822/how-to-add-constraints-programmatically-using-swift