斯威夫特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上實驗。