ios - 用不同的字体大小对齐 UIButton 和 UILabel 文本
问题描述
我有一个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: {
$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)
然而,这并没有改变对齐方式。
我也尝试使用publishedDateLabel.lastBaselineAnchor.constraint(equalTo: nameButton.lastBaselineAnchor)
对齐锚但是这对齐了元素的顶部
如何将按钮中的文本底部与标签中文本的底部对齐?
解决方案
只需注释掉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)
])
推荐阅读
- c# - 如何在 asp.net core 中按版本和组拆分 swagger API 文档
- microcontroller - 在“裸机”编程时,stm32f4 微控制器上的 UART 通信的实际波特率不正确
- c# - 构建失败:解析参考时出错:“microsoft/dotnet:2.1-runtime AS base”不是有效的存储库/标签:
- javascript - PhoneGap 在不在浏览器中的应用程序上打开链接
- react-native - 如何在本机反应中使总视图居中
- python - Pandas groupby.agg 删除列
- scenekit - iOS 12 和 SceneKit:节点以白色显示
- python - python - 如何减少数组值的元素
- clojure - 在core.logic中合成满足特征约束的最小地图?
- azure - Azure PowerShell - 从 SSL 证书中提取 PEM