如何在具有自调整大小的单元格的 UITableViewCell 中添加填充？

Question

I'm looking at the Instagram comment table view, and each cell self sizes depending on the length of the comment with some kind of padding on the top and bottom. Now I tried doing something similar, except I have a problem self-sizing the table view cell. I try to add constraints to achieve the padding effect, but the text overlaps the next cell.

I've tried tableView.contentInset but it didn't change anything.

Here's what I want:

Here's what ends up happening:

class TableViewController: UITableViewController {
    override func viewDidLoad() {
    super.viewDidLoad()

    tableView.estimatedRowHeight = 130.0
    tableView.tableFooterView = UIView()
    tableView.separatorInset.left = 50
    tableView.registerClass(CommentCellView.self, forCellReuseIdentifier: cellid)
    tableView.rowHeight = UITableViewAutomaticDimension
    tableView.contentInset = UIEdgeInsetsMake(15, 15, 15, 15)


}

override func viewDidAppear(animated: Bool) {
    tableView.reloadData()
}

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier(cellid, forIndexPath: indexPath) as! CommentCellView
    cell.layoutIfNeeded()
    return cell
}

override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 10

}

override func tableView(tableView: UITableView, estimatedHeightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    return 60.0
}

}

class CommentCellView: UITableViewCell {
    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
    super.init(style: .Subtitle, reuseIdentifier: reuseIdentifier)


    contentView.addSubview(commentLabel)
    commentLabel.leftAnchor.constraintEqualToAnchor(contentView.leftAnchor).active = true
    commentLabel.rightAnchor.constraintEqualToAnchor(contentView.rightAnchor).active = true
    commentLabel.topAnchor.constraintEqualToAnchor(contentView.topAnchor, constant: 10).active = true
    commentLabel.bottomAnchor.constraintEqualToAnchor(contentView.bottomAnchor, constant: 10).active = true

    self.contentView.layoutMargins = UIEdgeInsetsMake(15, 15, 15, 15)
}

Answer 1

Your constraints didn't look correct to me. You should set a negative value for right and bottom constraints as contentView's bounds are greater than the label's:

commentLabel.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: -10).isActive = true

Here is the corrected version of your code:

commentLabel.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 10).isActive = true
commentLabel.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: -10).isActive = true
commentLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10).isActive = true
commentLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -10).isActive = true

You can define a helper function for later use like follows:

func inset(view: UIView, insets: UIEdgeInsets) {
  if let superview = view.superview {
    view.translatesAutoresizingMaskIntoConstraints = false

    view.leftAnchor.constraint(equalTo: superview.leftAnchor, constant: insets.left).isActive = true
    view.rightAnchor.constraint(equalTo: superview.rightAnchor, constant: -insets.right).isActive = true
    view.topAnchor.constraint(equalTo: superview.topAnchor, constant: insets.top).isActive = true
    view.bottomAnchor.constraint(equalTo: superview.bottomAnchor, constant: -insets.bottom).isActive = true
  }
}

--

inset(commentLabel, insets: UIEdgeInsetsMake(10, 10, 10, 10))