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

Question

Please find below my code to layout the UI programming of a UITableViewCell using AutoLayout:

// 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

---

This is what I would like to achieve:

Before achieve my target, I tried another implementation. The implementation is as following:

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

However, by unknown reason, the multiple line comment label was tripped if using this implementation.

After I use the following code, things work perfectly:

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

Both lines of codes should have the same effect in my expectation. I would like to know why my original implmentation does not work as expected.

Thanks.

Answer 1

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

This code

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

means that you are aligning your usernameLabel 's top to the top of profileView , which I believe you also know.

And this code:

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

means you are putting constraint to the cell or specifically cell's contentView .

Now, what you will need to make your multiline UILabel fit in a cell properly is to give it a constraint to top and bottom of its superview. It's like using a UIScrollView , you need proper constraints to each sides.

Again, in your first code, you're basically missing an important constraint which is constraint to the superview top. You can experiment things on Storyboard / Interface Builder as you wish.