Nested Comments UI - UITableView

[el_cid]

I am working on news reading app - and I am having trouble with the comments UI. What is the proper way to nest comments - eg: Apollo, Narwhal etc. Do they just indent the content in the cell based on the ‘depth’ of the comment? Or is there another way to achieve this?

Thanks in advance!

[el_cid]

I’ve tried using the cell.indentationLevel UITableViewCell property. However I can’t see any effect on the UI with the modification made.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    
    let cell = tableView.dequeueReusableCell(withIdentifier: CommentCell.reuseIdentifier, for: indexPath) as! CommentCell
    let item = self.commentsArray[indexPath.row].0
    let depth = self.commentsArray[indexPath.row].1
    
    // Indent Cell based on the depth of the comment
    // cell.indentationWidth = 10 // this is the default value anyway
    cell.indentationLevel = Int(depth)

I’ve also tried playing around with cell.separatorInset = UIEdgeInsetsMake(0, 10, 0, 0), without success.

I don’t understand why I don’t see any effect when I modify the indentationLevel. Can someone point me towards a tutorial/screencast to understand these Cell properties better? I’ve searched around RayW videos, but I couldn’t find anything more advanced on this topic.

Thanks again!

[el_cid]

I’ve found a solution.

To indent a cell’s content use indentationLevel property. However custom cells don’t apply indentationLevel automatically. We need to update layoutMargins manually. Also make sure that the cell’s element are using the superview’s layoutMarginGuide as a constraint for the left side!

class CommentCell: UITableViewCell {
static let reuseIdentifier = "CommentCell"

@IBOutlet weak var commentLabel: UILabel!
@IBOutlet weak var elapsedTimeLabel: UILabel!
@IBOutlet weak var byUserLabel: UILabel!
@IBOutlet weak var depthLabel: UILabel!

override func layoutSubviews() {
    // Custom layout cells don't apply indentationLevel automatically. We need to update layoutMargins manually
    super.layoutSubviews()
    contentView.layoutMargins.left = layoutMargins.left + CGFloat(indentationLevel) * indentationWidth
}

}

[shogunkaramazov]

@el_cid Thank you for sharing the solution - much appreciated! :]

[el_cid]

Np, I love this site!