snapchatdotcom snapchatdotcom - 1 year ago 220
Swift Question

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

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

but it didn't change anything.

Here's what I want:

enter image description here

Here's what ends up happening:

enter image description here

class TableViewController: UITableViewController {
override func 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) {

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier(cellid, forIndexPath: indexPath) as! CommentCellView
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)

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 Source

Your constraints don'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.constraintEqualToAnchor(contentView.rightAnchor, constant: -10).active = true

Here is the corrected version of your code:

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

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

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

    view.leftAnchor.constraintEqualToAnchor(superview.leftAnchor, constant: inset.left).active = true
    view.rightAnchor.constraintEqualToAnchor(superview.rightAnchor, constant: -inset.right).active = true
    view.topAnchor.constraintEqualToAnchor(superview.topAnchor, constant: = true
    view.bottomAnchor.constraintEqualToAnchor(superview.bottomAnchor, constant: -inset.bottom).active = true


inset(commentLabel, inset: UIEdgeInsetsMake(10, 10, 10, 10))
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download