Snapkit-自动布局

912 阅读1分钟

简介

Snapkit的是OC版本的Masonry,使用方法和思路大致与Masonry相同。

导入方式

在podfile中添加如下内容

pod 'SnapKit'

使用说明

  • 在使用 SnapKit 布局之前一定要先添加到父视图上否则会引起崩溃。这一点同 Masonry 用法完全一致。
  • 创建Label视图示例,then为Swift的语法糖用起来非常方便。
//创建一个Label
let titleLabel = UILabel().then({

     $0.textColor = color_text

     $0.font = .lzkj_pingfang_Medium()

     $0.numberOfLines = 2

     $0.text = "学习Hollow world"

})

//将Label添加到父视图上
addSubview(titleLabel)

titleLabel.snp.makeConstraints { make in

    make.left.top.equalTo(16)

    make.height.equalTo(40)

    make.right.equalTo(-16)

}

  • updateConstraints只能用于参照物不变的情况下,否则会崩溃,如>果参照物需要变的话用remakeConstraints
testView.snp.remakeConstraints { (make) in
    make.top.equalTo(otherView.snp.bottom)
    make.height.equalTo(125)
    make.left.equalToSuperview().offset(20)
    make.right.equalToSuperview().offset(-15)
}      
  • 布局更改动画效果的话,一定要在更新完布局后加:>tagetView.layoutIfNeeded()才会起作用
 UIView.animate(withDuration: 0.25) {
    self.aniView.snp.updateConstraints { (make) in                
        make.height.equalTo(100)
    }
    self.aniView.layoutIfNeeded()
 }    
  • Label高度自适应填充可以通过设置setContentHuggingPriority的优先级,数值越大优先级越高。
titleLabel.snp.makeConstraints { make in

     make.left.top.equalTo(16)

     make.height.equalTo(40)

     make.right.equalTo(-16)

}

timeLabel.snp.makeConstraints { make in

      make.left.equalTo(16.)

      make.top.equalTo(titleLabel.snp_bottomMargin).offset(10.)

      make.height.equalTo(20.)

}

//自适应关键代码        
desLabel.setContentHuggingPriority(UILayoutPriority(rawValue: 888), for: .horizontal)
desLabel.snp.makeConstraints { make in

     make.left.equalTo(16)

     make.top.equalTo(timeLabel.snp_bottomMargin).offset(10)

     make.right.bottom.equalTo(-16)

}
  • UITableViewCell自适应
  1. tableView必须设置预估高度和自动高度
tableV.separatorStyle = .none
tableV.estimatedRowHeight = 70
  1. cell中的所有元素需要放到contentView中(一般而言cell布局中的元素最好都放到contentView中
  2. cell中最后一个元素需要添加底部与contentView的约束
contentLabel.snp.makeConstraints { (make) in
    make.left.equalTo(contentView).offset(16
    make.top.equalTo(contentView).offset(10)
    make.right.equalTo(contentView).offset(-16)
    make.bottom.equalTo(contentView).offset(-10)
}