How to add padding inside a UITableViewCell with self-sizing cells? - ios

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