用不同的字體大小對齊 UIButton 和 UILabel 文本

Question

我有一個UIButton和一個內聯顯示的UILabel 。 它們有不同的尺寸 fonts，但是我想對齊它們，使它們出現在同一行。

目前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: {
    $0.translatesAutoresizingMaskIntoConstraints = false
    $0.titleLabel?.font = .systemFont(ofSize: 18)
    $0.setTitleColor(.darkGray, for: .normal)
    $0.contentHorizontalAlignment = .leading
    $0.setContentHuggingPriority(UILayoutPriority.defaultHigh, for: .horizontal)
    $0.backgroundColor = .lightGray
    $0.setTitle("This is a button", for: .normal)
  })

  lazy var publishedDateLabel = configure(UILabel(frame: .zero), using: {
    $0.translatesAutoresizingMaskIntoConstraints = false
    $0.font = .systemFont(ofSize: 14)
    $0.textColor = .darkGray
    $0.setContentHuggingPriority(UILayoutPriority.defaultLow, for: .horizontal)
    $0.backgroundColor = .lightGray
    $0.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)使 label 和按鈕的高度相同

然而，這並沒有改變 alignment。

我還嘗試使用publishedDateLabel.lastBaselineAnchor.constraint(equalTo: nameButton.lastBaselineAnchor)來對齊錨點，但是這對齊了元素的頂部

label中的文本底部如何對齊按鈕中的文本？

Answer 1

只需使用lastBaselineAnchor heightAnchor

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