在 iOS 中匹配一个按钮框架

Posted 2023-02-23

【中文标题】在 iOS 中匹配一个按钮框架

【英文标题】：Matching a button frame in iOS

【发布时间】：2019-07-24 08:12:26

【问题描述】：

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

我为每个按钮设置了一个视图（带有阴影颜色）。这是为了调整按钮的大小，但可以看出它不起作用。

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

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)])

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

【问题讨论】：

按钮有什么限制吗？如果有，可以分享一下吗？

你为什么不使用按钮的背景颜色将其设置为黑色，alpha 为 0.17？为什么要为此添加 UIView？

设置按钮高度优先为750，垂直拥抱优先为751

@Starsky。因为使用“button.backgroundColor”有完全相同的问题。我只是希望通过使用单独的视图来解决它。

@Malik。我刚刚编辑了帖子以给出按钮的约束。请看一看。

【参考方案1】：

替换

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）：

【讨论】：

是的，它有效。由于按钮上除了标签之外什么都没有，我认为这应该是默认行为。但无论如何，谢谢！

【参考方案2】：

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

例如：

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

以上将使按钮标题的四个边中的每边都有 +10 点的边距。

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

【讨论】：

你在哪里设置titletext？

在从 viewDidLoad() 调用的函数中。

框架在后期反映它们的值，即在 viewWilllayoutsubviews 或 viewWillAppar 中。

但是，您当前的代码（和接受的答案）是一种非常荒谬的方法 - 您想要的只是突出显示按钮的文本 - 为它创建一个视图以及对 UIButton 的子视图的约束是一个矫枉过正的想法（和一个愚蠢的） - 完全不正确使用 API。您可以使用 setAttributedTitle 和 NSBackgroundColorAttributeName 属性来为文本的背景着色。使用 titleEdgeInsets 调整大小。

你写的可能都是真的，但事实是我以前的东西不起作用，而我现在的东西起作用了。确实不排除另一种（也许更好）方法。我也曾想稍后采取行动（在 viewWillAppar 中），但这也没有奏效。我没有尝试 setAttributedTitle。