匹配 iOS 中的按钮框架

Question

按钮的框架有点问题。下面的屏幕截图显示了这种情况。有两个按钮，一个带有短标题（第一个），一个带有延伸两行的长标题（第二个）。

我为每个按钮设置了一个视图（带有阴影颜色）。它旨在调整按钮的大小，但正如人们所见，它不起作用。

这是我用来创建视图并尝试将视图框架与其关联按钮的框架相匹配的代码。任何人都可以看到为什么它不起作用。看起来按钮框架不关心里面的标题。这就是它应该的样子吗？

for button in [firstButn,secondButn] {
    button.setTitleColor(UIColor.darkGray, for: .normal)
    let bgView = UIView()
    bgView.backgroundColor = UIColor.black.withAlphaComponent(0.17)
    bgView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bgView)
    view.addConstraints([
        NSLayoutConstraint(item: bgView, attribute: .leading, relatedBy: .equal,
                           toItem: button, attribute: .leading,
                           multiplier: 1.0, constant: 0.0),
        NSLayoutConstraint(item: bgView, attribute: .trailing, relatedBy: .equal,
                           toItem: button, attribute: .trailing,
                           multiplier: 1.0, constant: 0.0),
        NSLayoutConstraint(item: bgView, attribute: .top, relatedBy: .equal,
                           toItem: button, attribute: .top,
                           multiplier: 1.0, constant: 0.0),
        NSLayoutConstraint(item: bgView, attribute: .bottom, relatedBy: .equal,
                           toItem: button, attribute: .bottom,
                           multiplier: 1.0, constant: 0.0)])
}

按钮的约束条件如下：

for button in [firstButn,secondButn] {
    view.addConstraints([
        NSLayoutConstraint(item: button, attribute: .centerX, relatedBy: .equal,
                           toItem: view, attribute: .centerX, multiplier: 1.0, constant: 0.0),
        NSLayoutConstraint(item: button, attribute: .width, relatedBy: .equal,
                           toItem: view, attribute: .width, multiplier: 0.6, constant: 0.0)])
}

view.addConstraints([
    NSLayoutConstraint(item: firstButn, attribute: .centerY, relatedBy: .equal,
                       toItem: view, attribute: .centerY, multiplier: 2.0/5.0, constant: 0.0),
    NSLayoutConstraint(item: secondButn, attribute: .centerY, relatedBy: .equal,
                       toItem: view, attribute: .centerY, multiplier: 4.0/5.0, constant: 0.0)])

如上所示，高度没有任何限制。

Answer 1

您可以调整 titleEdgeInsets property of UIButton - 文字大小会自动相应调整。

例如：

.titleEdgeInsets = UIEdgeInsets(10,10,10,10)

以上将为按钮标题的四个边各增加 10 点边距。

此外，不应该仅仅为了背景色而添加bgView。使用 backGroundColor 属性共 UIButton。

Answer 2

替换

view.addConstraints([
    NSLayoutConstraint(item: bgView, attribute: .leading, relatedBy: .equal,
                       toItem: button, attribute: .leading,
                       multiplier: 1.0, constant: 0.0),
    NSLayoutConstraint(item: bgView, attribute: .trailing, relatedBy: .equal,
                       toItem: button, attribute: .trailing,
                       multiplier: 1.0, constant: 0.0),
    NSLayoutConstraint(item: bgView, attribute: .top, relatedBy: .equal,
                       toItem: button, attribute: .top,
                       multiplier: 1.0, constant: 0.0),
    NSLayoutConstraint(item: bgView, attribute: .bottom, relatedBy: .equal,
                       toItem: button, attribute: .bottom,
                       multiplier: 1.0, constant: 0.0)])

和

view.addConstraints([
    NSLayoutConstraint(item: bgView, attribute: .leading, relatedBy: .equal,
                       toItem: button, attribute: .leading,
                       multiplier: 1.0, constant: 0.0),
    NSLayoutConstraint(item: bgView, attribute: .trailing, relatedBy: .equal,
                       toItem: button, attribute: .trailing,
                       multiplier: 1.0, constant: 0.0),
    NSLayoutConstraint(item: bgView, attribute: .top, relatedBy: .equal,
                       toItem: button.titleLabel, attribute: .top,
                       multiplier: 1.0, constant: 0.0),
    NSLayoutConstraint(item: bgView, attribute: .bottom, relatedBy: .equal,
                       toItem: button.titleLabel, attribute: .bottom,
                       multiplier: 1.0, constant: 0.0)])

你会看到类似的东西（iPod touch 6，iOS 12.4）：

匹配 iOS 中的按钮框架

Matching a button frame in iOS

ios

nslayoutconstraint

swift

ios-autolayout