ios - Swift 4 - 以编程方式在 AutoLayout UITableViewCell 中切碎多行标签

Question

请在下面找到我使用 AutoLayout 布局 UITableViewCell 的 UI 编程的代码:

// Profile Pic
profileView.translatesAutoresizingMaskIntoConstraints = false
profileView.widthAnchor.constraint(equalToConstant: commentImageSize + 4).isActive = true
profileView.heightAnchor.constraint(equalToConstant: commentImageSize + 4).isActive = true
profileView.topAnchor.constraint(equalTo: topAnchor, constant: borderSize).isActive = true
profileView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: borderSize).isActive = true

profileImageView.translatesAutoresizingMaskIntoConstraints = false
profileImageView.widthAnchor.constraint(equalToConstant: commentImageSize).isActive = true
profileImageView.heightAnchor.constraint(equalToConstant: commentImageSize).isActive = true
profileImageView.topAnchor.constraint(equalTo: profileView.topAnchor, constant: 2).isActive = true
profileImageView.leadingAnchor.constraint(equalTo: profileView.leadingAnchor, constant: 2).isActive = true

// Time Ago Label
timeAgoLabel.translatesAutoresizingMaskIntoConstraints = false
timeAgoLabel.topAnchor.constraint(equalTo: usernameLabel.topAnchor).isActive = true
timeAgoLabel.leadingAnchor.constraint(equalTo: usernameLabel.trailingAnchor, constant: 0)
timeAgoLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -borderSize).isActive = true

// Username Label
usernameLabel.translatesAutoresizingMaskIntoConstraints = false
usernameLabel.leadingAnchor.constraint(equalTo: profileView.trailingAnchor, constant: borderSize).isActive = true
usernameLabel.trailingAnchor.constraint(equalTo: timeAgoLabel.leadingAnchor, constant: -borderSize).isActive = true
// *****
// (Not work)
// usernameLabel.topAnchor.constraint(equalTo: profileView.topAnchor).isActive = true
// (Work)
usernameLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: borderSize).isActive = true
// *****

// Comment Label
commentLabel.translatesAutoresizingMaskIntoConstraints = false
commentLabel.leadingAnchor.constraint(equalTo: usernameLabel.leadingAnchor).isActive = true
commentLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -borderSize).isActive = true
commentLabel.topAnchor.constraint(equalTo: usernameLabel.bottomAnchor, constant: 2).isActive = true
commentLabel.bottomAnchor.constraint(lessThanOrEqualTo: contentView.bottomAnchor, constant: -borderSize).isActive = true

<小时/>

这就是我想要实现的目标:

在实现我的目标之前，我尝试了另一种实现。实现如下:

usernameLabel.topAnchor.constraint(equalTo: profileView.topAnchor).isActive = true

但是，由于未知的原因，如果使用此实现，多行注释标签会被触发。

使用以下代码后，一切正常:

usernameLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: borderSize).isActive = true

按照我的预期，这两行代码应该具有相同的效果。我想知道为什么我原来的实现没有按预期工作。

谢谢。

Answer 1

I would like to know why my original implmentation does not work as expected.

这段代码

usernameLabel.topAnchor.constraint(equalTo: profileView.topAnchor).isActive = true 

意味着您正在将usernameLabel的顶部与profileView的顶部对齐，我相信您也知道这一点。

这段代码:

usernameLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: borderSize).isActive = true

意味着您正在对单元格或特别是单元格的contentView施加约束。

现在，要使多行 UILabel 正确地适合单元格，您需要对其 super View 的顶部和底部进行约束。就像使用 UIScrollView 一样，您需要对每一侧进行适当的约束。

同样，在您的第一个代码中，您基本上缺少一个重要的约束，即对 super View 顶部的约束。您可以根据需要在 Storyboard/Interface Builder 上进行实验。