将 UIButton 和 UILabel 文本与不同的字体大小对齐

Question

我有一个 UIButton 和一个 UILabel 内联显示。它们有不同大小的字体，但我想对齐它们，使它们出现在同一行上。

目前 UILabel 略高于 UIButton 的基线。

我希望避免手动设置内容偏移量，因为我希望它尽可能正确缩放。我担心手动计算可能会对更改字体大小等产生意想不到的副作用

我创建了一个应显示 2 个元素的游乐场：

//: A UIKit based Playground for presenting user interface

import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {

  lazy var nameButton = configure(UIButton(type: .system), using: {
    [=10=].translatesAutoresizingMaskIntoConstraints = false
    [=10=].titleLabel?.font = .systemFont(ofSize: 18)
    [=10=].setTitleColor(.darkGray, for: .normal)
    [=10=].contentHorizontalAlignment = .leading
    [=10=].setContentHuggingPriority(UILayoutPriority.defaultHigh, for: .horizontal)
    [=10=].backgroundColor = .lightGray
    [=10=].setTitle("This is a button", for: .normal)
  })

  lazy var publishedDateLabel = configure(UILabel(frame: .zero), using: {
    [=10=].translatesAutoresizingMaskIntoConstraints = false
    [=10=].font = .systemFont(ofSize: 14)
    [=10=].textColor = .darkGray
    [=10=].setContentHuggingPriority(UILayoutPriority.defaultLow, for: .horizontal)
    [=10=].backgroundColor = .lightGray
    [=10=].text = "and this is a label"
  })

  override func loadView() {
    let view = UIView()
    view.backgroundColor = .white

    [nameButton, publishedDateLabel].forEach(view.addSubview(_:))

    NSLayoutConstraint.activate([
      nameButton.centerYAnchor.constraint(equalTo: view.centerYAnchor),
      nameButton.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 8),

      publishedDateLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor),
      publishedDateLabel.leadingAnchor.constraint(equalTo: nameButton.trailingAnchor),
      publishedDateLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -8)
    ])

    self.view = view
  }

  // setup helper method
  func configure<T>(_ value: T, using closure: (inout T) throws -> Void) rethrows -> T {
    var value = value
    try closure(&value)
    return value
  }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

我尝试通过添加 publishedDateLabel.heightAnchor.constraint(equalTo: nameButton.heightAnchor)

使标签和按钮的高度相同

但这并没有改变对齐方式。

我也尝试过使用 publishedDateLabel.lastBaselineAnchor.constraint(equalTo: nameButton.lastBaselineAnchor) 对齐锚点，但是这对齐了元素的顶部

如何将按钮中文本的底部与标签中文本的底部对齐？

Answer 1

只需注释掉 heightAnchor 使用 lastBaselineAnchor:

NSLayoutConstraint.activate([
      nameButton.centerYAnchor.constraint(equalTo: view.centerYAnchor),
      nameButton.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 8),

      publishedDateLabel.lastBaselineAnchor.constraint(equalTo: nameButton.lastBaselineAnchor),
      publishedDateLabel.leadingAnchor.constraint(equalTo: nameButton.trailingAnchor),
      publishedDateLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -8)
    ])

将 UIButton 和 UILabel 文本与不同的字体大小对齐

Align UIButton and UILabel text with different font sizes

uibutton

uilabel

ios

autolayout

swift