CODEWITHSUNDEEP
iosswiftuitableview
user3674231
user3674231

Reputation:

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 tableView.contentInset 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() {
    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)
}

Upvotes: 3

Views: 8345

Answers (1)

Ozgur Vatansever
Ozgur Vatansever

Reputation: 52203

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

Upvotes: 3

Related Questions