斯威夫特4 - 在自动版式的UITableViewCell切碎多行标签编程

Question

请在下面找到我的代码使用自动版式布局一个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

我想知道为什么我的原始implmentation不起作用 预计。

此代码

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

意味着你正在调整您的usernameLabel的顶部的profileView顶部，我相信你也知道。

而这种代码：

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

意味着你把约束到细胞或细胞专门的contentView。

现在，你需要使多行UILabel正确地适应一个单元格是给它一个限制其顶视图的顶部和底部。这就像使用UIScrollView一样，你需要对双方都有适当的约束。

再次，在你的第一个代码中，你基本上缺少一个重要的约束，它是对superview顶端的约束。您可以根据需要在Storyboard/Interface Builder上实验。