14.Swift版SnapKit布局

目录介绍

  • 01.最简单的用法
    • 1.1 简单用法实践
    • 1.2 约束语法介绍
    • 1.3 约束条件参数
  • 02.基础案例用法
    • 2.1 设置宽高属性
    • 2.2 相对约束设置
    • 2.3 约束边界阀值
    • 2.4 位移修正与倍率修正
  • 03.自动布局约束
    • 3.1 删除约束
    • 3.2 更新约束
    • 3.3 重做约束
  • 04.约束优先级
    • 4.1 设置约束优先级
    • 4.2 设置动画效果

01.最简单的用法

1.1 简单用法实践

SnapKit 的设计非常易于使用。假设我们想要布局一个框，该框被限制在其父视图的边缘，并带有 20pts 的填充。

let box = UIView()
superview.addSubview(box)

box.snp.makeConstraints { (make) -> Void in
    make.top.equalTo(superview).offset(20)
    make.left.equalTo(superview).offset(20)
    make.bottom.equalTo(superview).offset(-20)
    make.right.equalTo(superview).offset(-20)
}

或者更短一点：

let box = UIView()
superview.addSubview(box)

box.snp.makeConstraints { (make) -> Void in
    make.edges.equalTo(superview).inset(UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20))
}

这不仅大大缩短并提高了约束的可读性，SnapKit 还处理了过程中的几个关键步骤：

  1. 确定安装约束的最佳公共超级视图。
  2. 跟踪已安装的约束，以便以后可以轻松删除它们。
  3. 确保translatesAutoresizingMaskIntoConstraints = false所有适当的视图都被调用。

1.2 约束语法介绍

通过 makeConstraints 方法给view添加约束，约束有几种，分别是边距，宽，高，左上右下距离，基准线。

同时，添加过约束后可以有修正，修正有位移修正（inset、offset）和倍率修正（multipliedBy）

语法一般是： make.equalTo 或 make.greaterThanOrEqualTo 或 make.lessThanOrEqualTo + 倍数和位移修正。

  1. .equalTo：等于
  2. .lessThanOrEqualTo：小于等于
  3. .greaterThanOrEqualTo：大于等于

注意： 使用 makeConstraints 方法的元素必须事先添加到父元素的中，例如：self.view.addSubview(view)

1.3 约束条件参数

视图属性（ViewAttribute）

视图属性（ViewAttribute）布局属性（NSLayoutAttribute）
view.snp_leftNSLayoutAttribute.Left
view.snp_rightNSLayoutAttribute.Right
view.snp_topNSLayoutAttribute.Top
view.snp_bottomNSLayoutAttribute.Bottom
view.snp_leadingNSLayoutAttribute.Leading
view.snp_trailingNSLayoutAttribute.Trailing
view.snp_widthNSLayoutAttribute.Width
view.snp_heightNSLayoutAttribute.Height
view.snp_centerXNSLayoutAttribute.CenterX
view.snp_centerYNSLayoutAttribute.CenterY
view.snp_baselineNSLayoutAttribute.Baseline

视图关系，如果希望 view.left 大于或等于 label.left：

make.left.greaterThanOrEqualTo(label)
make.left.greaterThanOrEqualTo(label.snp.left)

自动布局允许将宽度和高度设置为常数值。如果要设置视图的最小宽度和最大宽度，可以将原语传递给相等块：

// width >= 200 && width <= 400
make.width.greaterThanOrEqualTo(200)
make.width.lessThanOrEqualTo(400)

比如将宽度和高度属性设置为常量值：

make.height.equalTo(20)
make.width.equalTo(20)
make.top.equalTo(42)

可以使用其他原语和结构来构建约束，如下所示：

make.top.equalTo(42)
make.height.equalTo(20)
make.size.equalTo(CGSize(width: 50, height: 100))
make.edges.equalTo(UIEdgeInsets(top: 10, left: 0, bottom: 10, right: 0))
make.left.equalTo(view).offset(UIEdgeInsets(top: 10, left: 0, bottom: 10, right: 0))

02.实际案例用法

2.1 设置宽高属性

自动布局允许宽度、高度设置为常量值。创建一个view，距父view左边30、上边200，然后设置宽高值

text.snp.makeConstraints { make in
    make.width.equalTo(100)
    make.height.equalTo(30)
    make.top.equalTo(self.view).offset(200)
    make.left.equalToSuperview().offset(30)
}

2.2 相对约束设置

left、right、top、centerX、centerY等其他属性

这些属性直接设置常量值，表示他们相对于父容器的相对约束条件。比如我们将绿色方块放置橙色方块内部的右下角位置。

class NormalContoller2: UIViewController {
    
    //外部方块
    lazy  var  boxOutter =  UIView ()
    //内部方块
    lazy  var  boxInner =  UIView ()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.navigationItem.title = "相对约束设置"
        self.view.backgroundColor = UIColor.white;
        
        boxOutter.backgroundColor =  UIColor.orange
        self.view.addSubview(boxOutter)
        boxInner.backgroundColor =  UIColor.green
        //将boxInner添加到boxOutter容器中
        boxOutter.addSubview(boxInner)
        
        //设置boxOutter控件宽，高分别是200。然后位置是在根容器的中间
        boxOutter.snp.makeConstraints { make in
            make.width.height.equalTo(200)
            make.center.equalTo(self.view)
        }
        //设置boxInner控件宽，高分别是100。然后位置在父容器的右下角位置
        boxInner.snp.makeConstraints { make in
            make.width.height.equalTo(100)
            make.right.equalTo(0)
            make.bottom.equalTo(0)
        }
    }
}

也可以使用与其他视图的关系来添加约束。比如设置控件1左右间距20，高为40的矩形，然后让控件2顶部在控件1底部下面。

class NormalContoller3: UIViewController {
    
    //方块1
    lazy  var  box1 =  UIView ()
    //方块2
    lazy  var  box2 =  UIView ()
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.navigationItem.title = "相对约束设置2"
        self.view.backgroundColor = UIColor.white;
        
        box1.backgroundColor =  UIColor.orange
        self.view.addSubview(box1)
        box2.backgroundColor =  UIColor.green
        self.view.addSubview(box2)
        
        box1.snp.makeConstraints { make in
            make.left.equalTo(20)
            make.right.equalTo(-20)
            make.height.equalTo(40)
            make.top.equalTo(150)
        }
        
        box2.snp.makeConstraints { make in
            //设置宽和高，跟控件box1一样
            make.width.height.equalTo(box1)
            //设置该控件左边和box1对齐
            make.left.equalTo(box1)
            //设置该控件顶部跟box1控件底部对齐，并且设置间距为10
            make.top.equalTo(box1.snp_bottomMargin).offset(10)
        }
    }
}

edges(边缘）

//让当前视图 的 上下左右(top,left,bottom,right) 等于 view2
make.edges.equalTo(view2)

2.3 约束边界阀值

lessThanOrEqualTo: <= 约束边界的最大值, 使box2的centerX <= box1的左边

box1.snp.makeConstraints { (make) in
    make.width.equalTo(100)
    make.height.equalTo(100)
    make.top.equalToSuperview().offset(200)
    make.left.equalToSuperview().offset(100)
}
box2.snp.makeConstraints { (make) in
    make.top.equalTo(box1.snp.bottom).offset(20)
    make.width.height.equalTo(100)
    //lessThanOrEqualTo: <= 约束边界的最大值
    make.centerX.lessThanOrEqualTo(box1.snp.left)
}

greaterThanOrEqualTo： >= 约束边界的最小值， 使aView的左边 >= bView的左边

box1.snp.makeConstraints { (make) in
    make.width.equalTo(100)
    make.height.equalTo(100)
    make.top.equalToSuperview().offset(200)
    make.left.equalToSuperview().offset(100)
}
box2.snp.makeConstraints { (make) in
    make.top.equalTo(box1.snp.bottom).offset(20)
    make.width.height.equalTo(100)
    make.left.greaterThanOrEqualTo(box1.snp.left)
}

https://www.hangge.com/blog/cache/detail_1097.html

贡献者: yangchong211