Layout anchors徒手写AutoLayout Swift

说明

有的时候写demo,甚是纠结:

  1. 用storyboard、xib实际上现实项目用不上(难以复用,比较容易冲突),
  2. 不想写绝对布局(CGRectMack(...)),显得不上进,
  3. 引入Snapkit又觉得麻烦,跟UI无关的demo还要加说明。

物尽其用,条件受限情况下如何写Autolayout呢?其实跟Snapkit一样简单。

Layout Anchors

本文推荐用Layout Anchors, iOS 9 以后适用。因为它相对简单。

  1. 先决条件必须设置属性translatesAutoresizingMaskIntoConstraintsfalse
subView.translatesAutoresizingMaskIntoConstraints = false

  1. 要先把subView添加到目标view中,才能添加约束。
view.addSubview(subView)

  1. 例子增加一个橙色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)
        
    }

运行效果:
在这里插入图片描述

  1. 改一下方式,左边举例父视图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

发布了167 篇原创文章 · 获赞 17 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/zgpeace/article/details/105155161