UITableViewCell 受制图限制,高度不正确
TableViewCell is constrained with Cartography and is not correct height
我正在使用具有动态单元格高度的 UITableView 构建评论功能。我正在使用制图框架以编程方式设置每个单元格内容的约束,因为这个 table 视图未在故事板中设置。
我对下面的评论标签重叠单元格有疑问。
具有简短注释字符串的单元格看起来不错,这是一个示例 SS:
我设置了tableView.estimatedRowHeight = 60
,单元格是clipsToBounds = false
和
func tableView(_: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
UITableView.automaticDimension
}
以下是我使用 Cartography 框架为 Cell 的不同子视图设置的约束:
// User Image View
constrain(self, userImageView) {
.height == 36.0
.width == 36.0
.left == [=11=].left + 16.0
.top == [=11=].top + 12.0
.bottom == [=11=].bottom - 12.0 ~ UILayoutPriority(500)
}
// Comment Label
constrain(self, commentLabel, userImageView) {
.top == .top - 6.0
.right == [=11=].right - (18.0 + Geometry.likeButtonWidth)
.left == .right + Geometry.messageLabelLeftOffset
}
// Bottom view - ( comment_time / LikeCount / Reply )
constrain(self.contentView, messageLabel, bottomView, userImageView) { contentView, msgLabel, bottomView, userImageView in
bottomView.top == msgLabel.bottom
bottomView.right == msgLabel.rightMargin
bottomView.left == userImageView.right + Geometry.messageLabelLeftOffset
// contentView.bottom == bottomView.bottom // very tall cell is overlapping cells below with this line
// contentView.height == msgLabel.height + 20 // cell is twice as tall, leaving large empty gap, but not overlapping
}
评论标签没有设置下限。
bottonView 的顶部设置为评论标签的底部,也没有底部限制。我认为这允许动态高度起作用。
在 bottomView 的约束中既不使用上面注释掉的约束,它仍然重叠。我知道重叠是由单元格上的 clipsToBounds 设置为 false 引起的,因此单元格的高度是问题所在。
这是它的样子:
如何让单元格高度适合内容?
所以我意识到需要使用单元格的 self.contentView
而不是 self
的所有约束,我之前尝试过这个但它没有正确呈现,但那是因为并非所有垂直约束都是正如您在上面看到的那样。所以这应该是这样的:
// User Image View
constrain(self.contentView, userImageView) {
.height == 36.0
.width == 36.0
.left == [=10=].left + 16.0
.top == [=10=].top + 12.0
//.bottom == [=10=].bottom - 12.0 ~ UILayoutPriority(500) removed this
}
// Comment Label
constrain(self.contentView, commentLabel, userImageView, bottomView) {
.top == .top - 6.0
.right == [=10=].right - (18.0 + Geometry.likeButtonWidth)
.left == .right + Geometry.messageLabelLeftOffset
.bottom == .top
}
// Bottom view - ( comment_time / LikeCount / Reply )
constrain(self.contentView, messageLabel, bottomView, userImageView) { contentView, msgLabel, bottomView, userImageView in
bottomView.top == msgLabel.bottom
bottomView.right == msgLabel.rightMargin
bottomView.left == userImageView.right + Geometry.messageLabelLeftOffset
bottomView.bottom == contentView.bottom
}
我正在使用具有动态单元格高度的 UITableView 构建评论功能。我正在使用制图框架以编程方式设置每个单元格内容的约束,因为这个 table 视图未在故事板中设置。
我对下面的评论标签重叠单元格有疑问。 具有简短注释字符串的单元格看起来不错,这是一个示例 SS:
我设置了tableView.estimatedRowHeight = 60
,单元格是clipsToBounds = false
和
func tableView(_: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
UITableView.automaticDimension
}
以下是我使用 Cartography 框架为 Cell 的不同子视图设置的约束:
// User Image View
constrain(self, userImageView) {
.height == 36.0
.width == 36.0
.left == [=11=].left + 16.0
.top == [=11=].top + 12.0
.bottom == [=11=].bottom - 12.0 ~ UILayoutPriority(500)
}
// Comment Label
constrain(self, commentLabel, userImageView) {
.top == .top - 6.0
.right == [=11=].right - (18.0 + Geometry.likeButtonWidth)
.left == .right + Geometry.messageLabelLeftOffset
}
// Bottom view - ( comment_time / LikeCount / Reply )
constrain(self.contentView, messageLabel, bottomView, userImageView) { contentView, msgLabel, bottomView, userImageView in
bottomView.top == msgLabel.bottom
bottomView.right == msgLabel.rightMargin
bottomView.left == userImageView.right + Geometry.messageLabelLeftOffset
// contentView.bottom == bottomView.bottom // very tall cell is overlapping cells below with this line
// contentView.height == msgLabel.height + 20 // cell is twice as tall, leaving large empty gap, but not overlapping
}
评论标签没有设置下限。
bottonView 的顶部设置为评论标签的底部,也没有底部限制。我认为这允许动态高度起作用。 在 bottomView 的约束中既不使用上面注释掉的约束,它仍然重叠。我知道重叠是由单元格上的 clipsToBounds 设置为 false 引起的,因此单元格的高度是问题所在。
这是它的样子:
如何让单元格高度适合内容?
所以我意识到需要使用单元格的 self.contentView
而不是 self
的所有约束,我之前尝试过这个但它没有正确呈现,但那是因为并非所有垂直约束都是正如您在上面看到的那样。所以这应该是这样的:
// User Image View
constrain(self.contentView, userImageView) {
.height == 36.0
.width == 36.0
.left == [=10=].left + 16.0
.top == [=10=].top + 12.0
//.bottom == [=10=].bottom - 12.0 ~ UILayoutPriority(500) removed this
}
// Comment Label
constrain(self.contentView, commentLabel, userImageView, bottomView) {
.top == .top - 6.0
.right == [=10=].right - (18.0 + Geometry.likeButtonWidth)
.left == .right + Geometry.messageLabelLeftOffset
.bottom == .top
}
// Bottom view - ( comment_time / LikeCount / Reply )
constrain(self.contentView, messageLabel, bottomView, userImageView) { contentView, msgLabel, bottomView, userImageView in
bottomView.top == msgLabel.bottom
bottomView.right == msgLabel.rightMargin
bottomView.left == userImageView.right + Geometry.messageLabelLeftOffset
bottomView.bottom == contentView.bottom
}