UITableViewCell 中带有多行标签的 UIStackView 高度不正确
UIStackView with multiline label in a UITableViewCell incorrect height
我有一个 table 视图,其中每个单元格显示一个可选标题和一个多行副标题。我希望单元格为 self-sizing(即随着字幕一起增长,但尽可能保持紧凑)。为此,我使用 tableView.rowHeight = UITableView.automaticDimension
我遇到的问题是,在有标题的单元格中,字幕周围的垂直间距很大。
没有标题的单元格被正确压缩。此外,当我重新加载 table 视图时,所有布局都变得正确。
预期行为:
实际行为:
单元格基本上有一个 UIStackView
固定到单元格的 contentView
。
import UIKit
public class TableViewCellSubtitle: UITableViewCell {
private lazy var labelStack: UIStackView = {
let labelStack = UIStackView()
labelStack.alignment = .fill
labelStack.distribution = .fillProportionally
labelStack.axis = .vertical
return labelStack
}()
private lazy var titleLabel: UILabel = {
let titleLabel = UILabel()
titleLabel.backgroundColor = UIColor.blue.withAlphaComponent(0.3)
return titleLabel
}()
private lazy var subtitleLabel: UILabel = {
let subtitleLabel = UILabel()
subtitleLabel.numberOfLines = 0
subtitleLabel.backgroundColor = UIColor.green.withAlphaComponent(0.3)
return subtitleLabel
}()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
setupUI()
setupConstraints()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func setupUI() {
contentView.addSubview(labelStack)
labelStack.translatesAutoresizingMaskIntoConstraints = false
labelStack.addArrangedSubview(titleLabel)
labelStack.addArrangedSubview(subtitleLabel)
}
private func setupConstraints() {
NSLayoutConstraint.activate([
labelStack.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
labelStack.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 12),
contentView.bottomAnchor.constraint(equalTo: labelStack.bottomAnchor, constant: 12),
contentView.trailingAnchor.constraint(equalTo: labelStack.trailingAnchor, constant: 16)
])
}
public func setup(title: String?, subtitle: String) {
titleLabel.text = title
if title == nil {
labelStack.removeArrangedSubview(titleLabel)
titleLabel.removeFromSuperview()
}
subtitleLabel.text = subtitle
}
}
我试过在字幕上设置内容拥抱
subtitleLabel.setContentHuggingPriority(.required, for: .vertical)
但这会使标题变长:
如果我同时设置:
titleLabel.setContentHuggingPriority(.required, for: .vertical)
subtitleLabel.setContentHuggingPriority(.required, for: .vertical)
变成
在所有情况下,如果我重新加载单元格或 table 视图,布局就会变得正确(此处点击单元格):
我知道我可以在不使用堆栈视图的情况下布置单元格,但我的实际实现有点复杂
- 尝试使用填充而不是按比例填充
- 或尝试设置 label.sizeToFit() 以将标签折叠到其内容大小
我有一个 table 视图,其中每个单元格显示一个可选标题和一个多行副标题。我希望单元格为 self-sizing(即随着字幕一起增长,但尽可能保持紧凑)。为此,我使用 tableView.rowHeight = UITableView.automaticDimension
我遇到的问题是,在有标题的单元格中,字幕周围的垂直间距很大。
没有标题的单元格被正确压缩。此外,当我重新加载 table 视图时,所有布局都变得正确。
预期行为:
实际行为:
单元格基本上有一个 UIStackView
固定到单元格的 contentView
。
import UIKit
public class TableViewCellSubtitle: UITableViewCell {
private lazy var labelStack: UIStackView = {
let labelStack = UIStackView()
labelStack.alignment = .fill
labelStack.distribution = .fillProportionally
labelStack.axis = .vertical
return labelStack
}()
private lazy var titleLabel: UILabel = {
let titleLabel = UILabel()
titleLabel.backgroundColor = UIColor.blue.withAlphaComponent(0.3)
return titleLabel
}()
private lazy var subtitleLabel: UILabel = {
let subtitleLabel = UILabel()
subtitleLabel.numberOfLines = 0
subtitleLabel.backgroundColor = UIColor.green.withAlphaComponent(0.3)
return subtitleLabel
}()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
setupUI()
setupConstraints()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func setupUI() {
contentView.addSubview(labelStack)
labelStack.translatesAutoresizingMaskIntoConstraints = false
labelStack.addArrangedSubview(titleLabel)
labelStack.addArrangedSubview(subtitleLabel)
}
private func setupConstraints() {
NSLayoutConstraint.activate([
labelStack.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
labelStack.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 12),
contentView.bottomAnchor.constraint(equalTo: labelStack.bottomAnchor, constant: 12),
contentView.trailingAnchor.constraint(equalTo: labelStack.trailingAnchor, constant: 16)
])
}
public func setup(title: String?, subtitle: String) {
titleLabel.text = title
if title == nil {
labelStack.removeArrangedSubview(titleLabel)
titleLabel.removeFromSuperview()
}
subtitleLabel.text = subtitle
}
}
我试过在字幕上设置内容拥抱
subtitleLabel.setContentHuggingPriority(.required, for: .vertical)
但这会使标题变长:
如果我同时设置:
titleLabel.setContentHuggingPriority(.required, for: .vertical)
subtitleLabel.setContentHuggingPriority(.required, for: .vertical)
变成
在所有情况下,如果我重新加载单元格或 table 视图,布局就会变得正确(此处点击单元格):
我知道我可以在不使用堆栈视图的情况下布置单元格,但我的实际实现有点复杂
- 尝试使用填充而不是按比例填充
- 或尝试设置 label.sizeToFit() 以将标签折叠到其内容大小