swift - 带有两个标签的 StackView 不包装内容
问题描述
我有一个 StackView,里面有两个标签。我想将这两个标签并排放置。
private lazy var stackView: UIStackView = {
let stackView = UIStackView()
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.alignment = .center
stackView.axis = .horizontal
stackView.backgroundColor = .black
stackView.spacing = 10
return stackView
}()
// MARK: Labels
private lazy var firstLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.numberOfLines = 0
label.textColor = UIColor.brandColor(.white)
label.textAlignment = .right
label.font = UIFont.bloomSpeakFont(.titleUltraHeavy, ofSize: 8.0)
return label
}()
private lazy var secondLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.numberOfLines = 0
label.textColor = UIColor.brandColor(.white)
label.textAlignment = .right
label.font = UIFont.bloomSpeakFont(.bodyExtraBold, ofSize: 10.0)
return label
}()
// MARK: - Setup
private func setupStackView() {
stackView.addArrangedSubview(firstLabel)
//firstLabel.widthAnchor.constraint(equalToConstant: 100).isActive = true
//firstLabel.heightAnchor.constraint(equalToConstant: 100).isActive = true
//firstLabel.setContentHuggingPriority(UILayoutPriority.defaultLow, for: .horizontal)
stackView.addArrangedSubview(secondLabel)
//secondLabel.widthAnchor.constraint(equalToConstant: 100).isActive = true
//secondLabel.heightAnchor.constraint(equalToConstant: 100).isActive = true
//secondLabel.setContentHuggingPriority(UILayoutPriority.defaultHigh, for: .horizontal)
addSubview(stackView)
stackView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
stackView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
}
我的问题是:
我想要的是:
数字旁边的标签,还有一些用边距填充一些填充。
提前致谢。
编辑
设置spacing
为 0numberOfLines
到 1 后,stackView.alignment = .fill
我得到了下面的结果。我只是想知道如何为标签添加填充?
解决方案
感谢@SandeepBhandari 和@DonMag 的评论,我可以解决我的问题:
最终的解决方案是:
private lazy var stackView: UIStackView = {
let stackView = UIStackView()
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.alignment = .fill // << changed from .center to .fill
stackView.axis = .horizontal
stackView.backgroundColor = .black
//stackView.spacing = 10 << removed line
return stackView
}()
// MARK: Labels
private lazy var firstLabel: PaddingLabel = {
let label = PaddingLabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.numberOfLines = 1 // << changed from 0 to 1
label.textColor = UIColor.brandColor(.white)
label.textAlignment = .right
label.font = UIFont.bloomSpeakFont(.titleUltraHeavy, ofSize: 8.0)
return label
}()
private lazy var secondLabel: PaddingLabel = {
let label = PaddingLabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.numberOfLines = 1
label.textColor = UIColor.brandColor(.white)
label.textAlignment = .right
label.font = UIFont.bloomSpeakFont(.bodyExtraBold, ofSize: 10.0)
return label
}()
// MARK: - Setup
private func setupStackView() {
stackView.addArrangedSubview(firstLabel)
stackView.addArrangedSubview(secondLabel)
firstLabel.paddingLeft = 2
firstLabel.paddingRight = 1
secondLabel.paddingLeft = 1
secondLabel.paddingRight = 2
addSubview(stackView)
stackView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
stackView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
}
我还使用本指南https://johncodeos.com/how-to-add-padding-in-uilabel-in-ios-using-swift/为标签添加填充。
最终结果是:
推荐阅读
- css - 如何使 flexbox 均匀分布项目而不会出现兄弟姐妹错位?
- javascript - 访问包含具有未知属性名称的对象和数组的嵌套数据结构中的数组
- pandas - Pandas DataFrame 计算每个类别的元素
- c# - C# 中的端口转发 TCP 侦听器服务器
- android - Android如何使用一个意图同时从相机或图库中选择图像
- c# - 具有嵌套类的无效模型状态
- python - fork 打印最后一条记录两次
- intellij-idea - 如何强制 Intellij 检查所有文件?
- google-bigquery - 附加具有不同架构的文件 - BigQuery
- reactjs - 反应时无法下载PDF简历