如何使用自定义单元格在UITableViewCell中添加填充？

Question

我正在查看Instagram评论表视图，每个单元格的自身大小取决于评论的长度，顶部和底部有某种填充。现在我尝试做类似的事情，除了我自己调整表视图单元格的问题。我尝试添加约束来实现填充效果，但文本与下一个单元格重叠。

我已经尝试了tableView.contentInset，但它没有改变任何内容。

这就是我想要的：

以下是最终发生的事情：

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

你的约束对我来说不正确。您应该为右边和底部约束设置负值，因为contentView的边界大于标签的边界：

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

以下是您的代码的更正版本：

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

您可以定义一个辅助函数供以后使用，如下所示：

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