在 iOS 开发中, 常用的约束框架有两个 OC版的 Masonry, Swift 版的 SnapKit, 这两个框架出自同一个团队. 此例用 Swift 在 6p 真机上演示.
在开发中我们经常会遇到这样一种情况, 在同一行的位置一有两个 UILabel 控件, 左边 nameLB 和 右边 numberLB, 宽度都自适应, 分别设置与屏幕两边的边距, 如果两个 label 宽度, 以及 间距 的总和不超过屏幕宽度, 那么一切正常, 但是当超过屏幕宽度时, numberLB 会被压缩, 先看看默认的效果.
默认布局代码
import UIKit
import SnapKit
class ViewController: UIViewController {
private lazy var nameLB: UILabel = {
let lb = UILabel(frame: .zero)
lb.text = "我是书的名称: 红楼梦红楼梦红楼梦"
lb.font = UIFont.systemFont(ofSize: 20.0)
lb.textColor = UIColor.red
lb.backgroundColor = .gray
return lb
}()
private lazy var numberLB: UILabel = {
let lb = UILabel(frame: .zero)
lb.text = "9999 人次阅读"
lb.font = UIFont.systemFont(ofSize: 20.0)
lb.textColor = UIColor.cyan
lb.backgroundColor = .gray
return lb
}()
override func viewDidLoad() {
super.viewDidLoad()
setupUI()
}
private func setupUI() {
view.backgroundColor = .yellow
view.addSubview(nameLB)
view.addSubview(numberLB)
nameLB.snp.makeConstraints { (make) in
make.centerY.equalTo(view)
make.left.equalTo(view).offset(20.0)
make.right.lessThanOrEqualTo(numberLB.snp.left).offset(-10.0)
}
numberLB.snp.makeConstraints { (make) in
make.right.equalTo(view).offset(-20.0)
make.centerY.equalTo(view)
}
}
}
默认情况下效果
默认情况下效果此时如果我们的需求是压缩左边 nameLB, 保证 右边 numberLB 完全展示, 我们该怎么办呢 ?
降低 nameLB 内容的抗压缩优先级即可
在setupUI()
中设置
private func setupUI() {
view.backgroundColor = .yellow
// 设置内容抗压缩优先级
nameLB.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
view.addSubview(nameLB)
view.addSubview(numberLB)
nameLB.snp.makeConstraints { (make) in
make.centerY.equalTo(view)
make.left.equalTo(view).offset(20.0)
make.right.lessThanOrEqualTo(numberLB.snp.left).offset(-10.0)
}
numberLB.snp.makeConstraints { (make) in
make.right.equalTo(view).offset(-20.0)
make.centerY.equalTo(view)
}
}
设置后的效果图
设置后的效果图注意:
- 本文是以 UILabel 为例演示, 实际上只要是 UIView 及其子类都是可以的,
setContentCompressionResistancePriority
是 UIView 的 API.
UIView API
网友评论