[英]Align UIButton and UILabel text with different font sizes
I have a UIButton
and a UILabel
displayed inline.我有一个
UIButton
和一个内联显示的UILabel
。 They have different size fonts, however I would like to align them so they appear on the same line.它们有不同的尺寸 fonts,但是我想对齐它们,使它们出现在同一行。
At the moment the UILabel
is slight above the baseline of the UIButton
.目前
UILabel
略高于UIButton
的基线。
I was hoping to avoid manually setting a content offset as I want this to scale correctly where possible.我希望避免手动设置内容偏移量,因为我希望它在可能的情况下正确缩放。 I worry manual calculations may have unexpected side effects on changing font sizes etc.
我担心手动计算可能会对更改字体大小等产生意想不到的副作用。
I have created a playground that should show the 2 elements:我创建了一个应该显示 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()
I have tried making the label and button the same height by adding publishedDateLabel.heightAnchor.constraint(equalTo: nameButton.heightAnchor)
我尝试通过添加
publishedDateLabel.heightAnchor.constraint(equalTo: nameButton.heightAnchor)
使 label 和按钮的高度相同
This didn't change the alignment however.然而,这并没有改变 alignment。
I also tried using publishedDateLabel.lastBaselineAnchor.constraint(equalTo: nameButton.lastBaselineAnchor)
to align the anchors however this aligned the top of the elements我还尝试使用
publishedDateLabel.lastBaselineAnchor.constraint(equalTo: nameButton.lastBaselineAnchor)
来对齐锚点,但是这对齐了元素的顶部
How can align the bottom of the text in the button to the bottom of the text in the label? label中的文本底部如何对齐按钮中的文本?
Just comment out the heightAnchor
use the lastBaselineAnchor
:只需使用
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)
])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.