使用约束布局设置哪个视图优先被拉伸（ Content Hugging Priority）

使用约束布局该如何设置哪个视图（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。这个方法需要两个参数：

1. 优先级（UILayoutPriority 类型）：一个介于 1 到 1000 的浮点数，数值越大优先级越高。
2. 轴向（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，我们可以避免视图被压缩，从而保持其内容的完整显示。

这两个优先级参数相辅相成，共同为我们提供了控制视图尺寸和布局的灵活手段。在复杂的界面布局中，合理调整它们可以显著提升用户体验，确保应用界面始终保持美观和功能性。

希望这篇博客能够帮助你更好地理解和应用这两个重要的概念。如果你有任何问题或建议，欢迎在评论区留言，我们一起讨论和学习。