Swift-SnapKit用法探究

[TOC]

snapKit用法实践

snapKit常规用法

snaptKit 是masonry的swift版本,布局方便,然后我们来看看在项目中都有哪些用处吧~

例子1: 创建一个aview,距父view左边、上边100,右边50,高100

aView.snp.makeConstraints { (make) in
            make.top.left.equalToSuperview().offset(100)
            make.right.equalToSuperview().offset(-50)
            make.height.equalTo(100)
        }

例子2: inset:提供了方便的inset语法,直接约束edgeInsets

let containerInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
        
 aView.snp.makeConstraints { (make) in
    make.edges.equalToSuperview().inset(UIEdgeInsets(top: 100, left: 100, bottom: 200, right: 100))
 }
 bView.snp.makeConstraints { (make) in
      make.left.top.equalTo(aView).inset(containerInsets)
      make.bottom.right.equalTo(aView).offset(-20)
 }

例子3: lessThanOrEqualTo: <= 约束边界的最大值, 使bView的centerX <= aView的左边

aView.snp.makeConstraints { (make) in
     make.left.top.equalToSuperview().offset(20)
     make.width.equalTo(100)
     make.height.equalTo(100)
}
bView.snp.makeConstraints { (make) in
    make.top.equalTo(aView.snp.bottom).offset(20)
    make.width.height.equalTo(100)
    make.centerX.lessThanOrEqualTo(aView.snp.left)
}

例子4: greaterThanOrEqualTo: >= 约束边界的最小值, 使aView的左边 >= bView的左边

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

例子5: lessThanOrEqualTo和greaterThanOrEqualTo结合使用, 注意这个问题:布局存在冲突或者矛盾的时候,而你恰好使用了lessThanOrEqualTo()或者greaterThanOrEqualTo()的时候,苹果的Auto Layout会在适当的时候给你补齐约束或者可以说优化约束,使你的布局不至于显示错误或者甚至导致程序奔溃。
如下例子,<=100 >=500 显然是不对的,但是并不会crash,Auto Layout会在适当的时候优化约束

aView.snp.makeConstraints { (make) in
    make.left.top.equalToSuperview().offset(20)
    make.width.lessThanOrEqualTo(100)
    make.height.greaterThanOrEqualTo(500)
    make.height.equalTo(100)
}

例子6: priority-优先级,注意:优先级最大值为1000,大于1000会导致crash,如下例子,width最后等于10

aView.snp.makeConstraints { (make) in
    make.left.top.equalToSuperview().offset(20)
    make.width.equalTo(100).priority(777)
    make.width.equalTo(10).priority(888)
    make.height.equalTo(100)
}
内置优先级:required > high > medium > low

例子7: 更新约束 update

 aView.snp.makeConstraints { (make) in
    make.left.top.equalToSuperview().offset(20)
    make.width.equalTo(100)
    make.height.equalTo(100)
}
func updateConstraintMethod() {
    //方式1-可以将要改变的约束记录成成员变量,然后更新
    //self.updateConsTraint?.update(inset: 150)
    //方式2
    aView.snp.updateConstraints { (make) in
        make.left.top.equalToSuperview().offset(150)
    }
}

例子8: 重新约束-remarke

  aView.snp.remakeConstraints { (make) in
        make.center.equalToSuperview()
        make.width.height.equalTo(100)
    }

例子9: dividedBy 除,如下例子,使aView的宽等于父view的1/2,高等于父view的1/3.

aView.snp.makeConstraints { (make) in
    make.center.equalToSuperview()
    //宽是父视图的1/2
    make.width.equalToSuperview().dividedBy(2)
    //高是父视图的1/3
    make.height.equalToSuperview().dividedBy(3)
}

例子10: multipliedBy 乘,如下例子,使bView的宽是aView的3倍,高是aView的5倍

aView.snp.makeConstraints { (make) in
    make.width.height.equalTo(50)
    make.top.equalTo(20)
    make.centerX.equalToSuperview()
}
bView.snp.makeConstraints { (make) in
    make.center.equalToSuperview()
    //宽是aView的3倍
    make.width.equalTo(aView).multipliedBy(3)
    //高是aView的5倍
    make.height.equalTo(aView).multipliedBy(5)
}

例子11: safeAreaLayoutGuide-安全区域的问题,适配齐刘海,要相对于安全区域进行约束

aView.snp.makeConstraints { (make) in
    make.top.equalTo(view.safeAreaLayoutGuide.snp.top)
    make.bottom.equalTo(view.safeAreaLayoutGuide.snp.bottom)
    make.left.right.equalToSuperview()
}

snapKit扩展

snapKit不支持多视图批量约束,但是我们想使用这种便捷高效的功能,怎么办呢?对snapKit进行扩展
例子12: 多视图随机布局,arr是view数组

arr.snp.makeConstraints { (make) in
    make.width.height.equalTo(100)
    make.center.equalTo(CGPoint(x: CGFloat(arc4random_uniform(300)) +   50, y: CGFloat(arc4random_uniform(300)) + 50))
    }

例子13: 多视图统一布局,对arr里的view统一设置宽高,然后分别设置各个view的top

arr.snp.makeConstraints { (make) in
    make.width.height.equalTo(100)
}
aView.snp.makeConstraints { (make) in
    make.top.equalTo(0)
}
bView.snp.makeConstraints { (make) in
    make.top.equalTo(100)
}
cView.snp.makeConstraints { (make) in
    make.top.equalTo(200)
}
dView.snp.makeConstraints { (make) in
    make.top.equalTo(300)
}

例子14: 水平等分

//axisType:方向
//fixedSpacing:中间间距
//leadSpacing:左边距(上边距)
//tailSpacing:右边距(下边距)
arr.snp.distributeViewsAlong(axisType: .horizontal, fixedSpacing: 10, leadSpacing: 10, tailSpacing: 10)
arr.snp.makeConstraints { (make) in
    make.top.equalTo(100)
    make.height.equalTo(100)
}

例子15: 垂直等分

//axisType:方向
//fixedItemLength:item对应方向的宽或者高
//leadSpacing:左边距(上边距)
//tailSpacing:右边距(下边距)
arr.snp.distributeViewsAlong(axisType: .vertical, fixedItemLength: 100, leadSpacing: 70, tailSpacing: 70)
arr.snp.makeConstraints { (make) in
    make.width.equalTo(100)
    make.centerX.equalToSuperview()
}

例子16: 九宫格类型

var arr: Array = []
for _ in 0..<9 {
    let subview = UIView()
    subview.backgroundColor = UIColor.red
    view.addSubview(subview)
    arr.append(subview)
}
//大小固定、上下左右默认为0的九宫格
arr.snp.distributeSudokuViews(fixedItemWidth: 100, fixedItemHeight: 100, warpCount: 3)
//更改边距
//arr.snp.distributeSudokuViews(fixedItemWidth: 100, fixedItemHeight: 100, warpCount: 3, edgeInset: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10))
    
}

extension及文中代码见demo

你可能感兴趣的:(Swift-SnapKit用法探究)