admin管理员组文章数量:1623789
使用约束布局该如何设置哪个视图(UILabel)的内容优先被压缩?_表级约束-CSDN博客
引言
在之前的博客中,我们已经介绍了 setContentCompressionResistancePriority
方法,用于设置视图的抗压缩能力。视图的压缩阻力越高,就越不容易被压缩;相反,压缩阻力越低,就越容易被压缩。
与之对应的另一重要方法是 setContentHuggingPriority
,它用于设置视图的抗拉伸能力。通过理解和运用 Content Hugging Priority,我们可以更好地控制视图在布局中的表现,确保界面的各个元素以我们期望的方式显示和排列。
什么是 Content Hugging Priority?
Content Hugging Priority 是指视图抗拒被拉伸超出其固有内容大小的能力。简单来说,当一个视图被其他布局约束强迫拉伸时,Content Hugging Priority 决定了视图有多“抗拒”这种拉伸。
- 优先级数值越高,视图越不容易被拉伸。
- 优先级数值越低,视图越容易被拉伸。
在 Auto Layout 中,系统会根据视图的内容大小来确定视图的初始尺寸,而 Content Hugging Priority 则用于防止视图被拉伸到超出其内容大小。
如何使用 Content Hugging Priority?
我们可以通过 setContentHuggingPriority(_:for:)
方法来设置视图的 Content Hugging Priority。这个方法需要两个参数:
- 优先级(
UILayoutPriority
类型):一个介于 1 到 1000 的浮点数,数值越大优先级越高。 - 轴向(
NSLayoutConstraint.Axis
类型):可以是.horizontal
或.vertical
,分别表示水平和垂直方向。
let label = UILabel()
label.setContentHuggingPriority(.defaultHigh, for: .horizontal)
label.setContentHuggingPriority(.defaultHigh, for: .vertical)
实际场景
在实际开发过程中最典型的场景莫过于自定义的搜索框按钮,当它的右侧有一个搜索按钮或者是取消按钮时,往往会使我们设置约束不知所措,我们来看一下具体的样式和代码。
我们先来看一下代码,在自定义的搜索框中,我们创建了一个输入框和一个取消按钮,并且按照设计进行了UI布局。
class PHSearchView: UIView {
/// 输入框背景
private let searchBgView = UIView()
/// 输入框
private let searchTextField = UITextField()
/// 取消按钮
private let cancelButton = UIButton()
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
setLayout()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func setupView() {
// 输入框背景
addSubview(searchBgView)
searchBgView.backgroundColor = .black.withAlphaComponent(0.02)
searchBgView.layer.cornerRadius = 45.0/2.0
// 输入框
searchBgView.addSubview(searchTextField)
searchTextField.placeholder = "请输入搜索内容"
searchTextField.font = UIFont.systemFont(ofSize: 14, weight: .regular)
searchTextField.textColor = .black
// 取消按钮
addSubview(cancelButton)
cancelButton.setTitle("取消", for: .normal)
cancelButton.setTitleColor(.black, for: .normal)
cancelButton.titleLabel?.font = UIFont.systemFont(ofSize: 18, weight: .medium)
}
func setLayout() {
//
searchBgView.snp.makeConstraints { make in
make.leading.equalToSuperview().offset(16.0)
make.top.bottom.equalToSuperview()
make.trailing.equalTo(cancelButton.snp.leading).offset(-8.0)
}
searchTextField.snp.makeConstraints { make in
make.leading.equalTo(searchBgView).offset(16.0)
make.top.bottom.equalTo(searchBgView)
make.trailing.equalTo(searchBgView).offset(-16.0)
}
cancelButton.snp.makeConstraints { make in
make.trailing.equalToSuperview().offset(-16.0)
make.centerY.equalTo(searchBgView)
}
}
}
看上去没有什么问题,按钮在右侧,输入框在左侧,按钮的宽度加上输入框背景的宽度减去间距正好是屏幕的宽度,看一下效果:
也确实没有什么问题,那这样是不是我们的抗拉伸属性就派不上用场了呢?
当然不是,需要注意我们并没有给按钮设置宽度,也没有给输入框或者输入框的背景设置宽度,目前的样式只是系统认为的理想样式,为了让它展示的更清晰,我们给按钮的背景添加上红色的背景,然后不断往输入框内输入内容,就会发现按钮被压缩了:
这个问题在上面一篇博客中我们已经给了解决方案,只需要使用setContentCompressionResistancePriority方法设置按钮的抗压缩阻力值大于输入框的抗压缩阻力值:
// 输入框
searchTextField.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
// 取消按钮
cancelButton.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)
接下来我们开始删除输入框的内容,会发现输入框的宽度会随着内容减少而变小,而按钮被拉伸了,效果如下:
很明显这可不是我们想要的结果。这时候就需要修改Content Hugging Priority,使用setContentHuggingPriority方法设置按钮的抗拉伸阻力值大于输入框的抗拉伸阻力值,代码如下:
searchTextField.setContentHuggingPriority(.defaultLow, for: .horizontal)
cancelButton.setContentHuggingPriority(.defaultHigh, for: .horizontal)
我们再来看一下删除文案后的效果:
现在当输入框的内容减少时,按钮就不会再被拉伸了,因为它的抗拉伸优先级已经被我们设置高于输入框,所以当有视图需要拉伸时,优先被拉伸的将是输入框。
结语
在 iOS 开发中,理解和合理使用 Content Hugging Priority 和 Content Compression Resistance Priority 是实现精确布局的关键。通过设置 Content Hugging Priority,我们可以确保视图不会被拉伸超过其固有内容大小。而通过设置 Content Compression Resistance Priority,我们可以避免视图被压缩,从而保持其内容的完整显示。
这两个优先级参数相辅相成,共同为我们提供了控制视图尺寸和布局的灵活手段。在复杂的界面布局中,合理调整它们可以显著提升用户体验,确保应用界面始终保持美观和功能性。
希望这篇博客能够帮助你更好地理解和应用这两个重要的概念。如果你有任何问题或建议,欢迎在评论区留言,我们一起讨论和学习。
本文标签: 视图布局ContentHuggingPriority
版权声明:本文标题:使用约束布局设置哪个视图优先被拉伸( Content Hugging Priority) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1728894973a1178293.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论