场景

image.png

代码

class ViewController: UIViewController {

    weak var exitButton: UIButton?
    weak var titleLabel: UILabel?
    weak var editButton: UIButton?

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        setupUI()
    }

    func setupUI() {
        let containerView = UIView()
        containerView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(containerView)
        
        let exitButton = UIButton()
        exitButton.backgroundColor = .black
        exitButton.setImage(UIImage(systemName: "chevron.backward"), for: .normal)
        exitButton.translatesAutoresizingMaskIntoConstraints = false
        containerView.addSubview(exitButton)
        
        let titleLabel = UILabel()
        titleLabel.backgroundColor = .gray
        titleLabel.text = "Title"
        titleLabel.textAlignment = .center
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        containerView.addSubview(titleLabel)
        
        let editButton = UIButton()
        editButton.backgroundColor = .black
        editButton.setTitle("Edit", for: .normal)
        editButton.translatesAutoresizingMaskIntoConstraints = false
        containerView.addSubview(editButton)
        
        self.exitButton = exitButton
        self.titleLabel = titleLabel
        self.editButton = editButton
        
        let safeAnchor = view.safeAreaLayoutGuide
        containerView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        containerView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        containerView.topAnchor.constraint(equalTo: safeAnchor.topAnchor).isActive = true
        containerView.heightAnchor.constraint(equalToConstant: 50).isActive = true
        
        // exit button 在左边
        // edit button 在右边
        // title label 居中
        exitButton.heightAnchor.constraint(equalToConstant: 30).isActive = true
        exitButton.widthAnchor.constraint(equalToConstant: 30).isActive = true
        exitButton.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 10).isActive = true
        exitButton.centerYAnchor.constraint(equalTo: containerView.centerYAnchor).isActive = true
        
        editButton.contentEdgeInsets = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 10)
        editButton.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -10).isActive = true
        editButton.centerYAnchor.constraint(equalTo: containerView.centerYAnchor).isActive = true
        
        titleLabel.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true
        titleLabel.centerYAnchor.constraint(equalTo: containerView.centerYAnchor).isActive = true
    }
}

现在需要扩大 title label 的响应热区，把 title label 拉伸，填充中间的区域，增加下面的代码

        titleLabel.leadingAnchor.constraint(equalTo: exitButton.trailingAnchor).isActive = true
        titleLabel.trailingAnchor.constraint(equalTo: editButton.leadingAnchor).isActive = true

增加代码后，edit button 被压缩了

image.png

尝试的方法

添加约束，设置 edit button 的宽度为其固有大小

        editButton.setContentHuggingPriority(.required, for: .horizontal)
        editButton.setContentCompressionResistancePriority(.required, for: .horizontal)

没效果。

我思考的原因是：
约束

        titleLabel.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true

和

        titleLabel.leadingAnchor.constraint(equalTo: exitButton.trailingAnchor).isActive = true
        titleLabel.trailingAnchor.constraint(equalTo: editButton.leadingAnchor).isActive = true

组合在一起有问题。
设置了 title label 居中后，title label 就是以 centerXAnchor 为轴的轴对称图形了。再设置 exit button 和 edit button 相邻，因为 exit button 的宽度小于 edit button 的宽度，(centerX - exitButton.trailing) > (editButton.leading - centerX)，自动布局为了保证 titleLabel.leadingAnchor.constraint(equalTo: exitButton.trailingAnchor) 在右边拉伸了 title label，压缩了 edit button，使得 (centerX - exitButton.trailing) = (editButton.leading - centerX)。

考虑 (centerX - exitButton.trailing) > (editButton.leading - centerX)，把 title label 的约束改为

//        editButton.setContentHuggingPriority(.required, for: .horizontal)
//        editButton.setContentCompressionResistancePriority(.required, for: .horizontal)
        
        titleLabel.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true
        titleLabel.centerYAnchor.constraint(equalTo: containerView.centerYAnchor).isActive = true
        titleLabel.leadingAnchor.constraint(greaterThanOrEqualTo: exitButton.trailingAnchor).isActive = true
        titleLabel.trailingAnchor.constraint(equalTo: editButton.leadingAnchor).isActive = true

效果

image.png

重新设置 edit button 的宽度为其固有大小

        editButton.setContentHuggingPriority(.required, for: .horizontal)
        editButton.setContentCompressionResistancePriority(.required, for: .horizontal)
        
        titleLabel.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true
        titleLabel.centerYAnchor.constraint(equalTo: containerView.centerYAnchor).isActive = true
        titleLabel.leadingAnchor.constraint(greaterThanOrEqualTo: exitButton.trailingAnchor).isActive = true
        titleLabel.trailingAnchor.constraint(equalTo: editButton.leadingAnchor).isActive = true

效果

image.png

现在实现了我的目的——扩大 title label 的响应热区。

这时又有一个问题了，如果 exit button 的宽度大于 edit button 的宽度，怎么办？重新改代码？有没有更好的设置约束的方法？

改变 title label 和 edit button 之间间距的约束是不行的

        editButton.setContentHuggingPriority(.required, for: .horizontal)
        editButton.setContentCompressionResistancePriority(.required, for: .horizontal)
        
        titleLabel.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true
        titleLabel.centerYAnchor.constraint(equalTo: containerView.centerYAnchor).isActive = true
        titleLabel.leadingAnchor.constraint(greaterThanOrEqualTo: exitButton.trailingAnchor).isActive = true
        titleLabel.trailingAnchor.constraint(lessThanOrEqualTo: editButton.leadingAnchor).isActive = true

解决方法

改变 title label 和 edit button 之间间距的约束的优先级，优先级要设置成比正常的 1000 低。我发现优先级设置成 UILayoutPriority.defaultHigh 有效果。

        editButton.setContentHuggingPriority(.required, for: .horizontal)
        editButton.setContentCompressionResistancePriority(.required, for: .horizontal)
        
        titleLabel.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true
        titleLabel.centerYAnchor.constraint(equalTo: containerView.centerYAnchor).isActive = true
        let leftConstraint = titleLabel.leadingAnchor.constraint(equalTo: exitButton.trailingAnchor)
        leftConstraint.priority = UILayoutPriority.defaultHigh
        leftConstraint.isActive = true
        let rightConstraint = titleLabel.trailingAnchor.constraint(equalTo: editButton.leadingAnchor)
        rightConstraint.priority = UILayoutPriority.defaultHigh
        rightConstraint.isActive = true

image.png

提高 exit button 的宽度，重新运行

image.png

好了，（完美）解决问题。