ios - 如何使用 VFL 约束来自定义表格 View 中的单元格

Question

|我的 View Controller 中有一个带有自定义 UITableViewCell (单元格)的 TableView (alertTableView)。对于这个 UITableViewCell 我想设置一些约束；

• 单元格需要水平调整大小以匹配屏幕宽度，并且有一个 间距 50 点。左、右。
• 单元格的高度为 10pts
• 我希望在单元格之间有一个垂直方向 2 点的小空间。

为此，我使用 VFL 添加约束，但未设置/遵守约束。我假设我必须在 AlertTableView 而不是 View 上设置约束。无论如何都尝试过，但正如我自己所预期的那样，这并没有什么区别。

    /*
        VFL constraints Table View Cell
    */
    let cell:ReportTableviewCell = self.alertTableView.dequeueReusableCellWithIdentifier("cell") as! ReportTableviewCell
    cell.translatesAutoresizingMaskIntoConstraints = false
    alertTableView.addSubview(cell)
    let cellDictionary = ["ReportTableviewCell": cell]

    alertTableView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-(50)-[ReportTableviewCell]-(50)-|",options: [], metrics: nil, views:  cellDictionary))
    alertTableView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[ReportTableviewCell(cellHeight)]-(cellVSpacing)-|",options: [], metrics: ["cellHeight" : 40, "cellVSpacing" : 2], views:  cellDictionary))

哪里做错了？

==示例的新版本==

    // Register ReportCell
    let nib = UINib(nibName: "ReportCell", bundle: nil)
    alertTableView.registerNib(nib, forCellReuseIdentifier: "cell")

    /*
        VFL constraints Table View Cell
    */
    let cell:ReportTableviewCell = self.alertTableView.dequeueReusableCellWithIdentifier("cell") as! ReportTableviewCell

    cell.translatesAutoresizingMaskIntoConstraints = false
    alertTableView.addSubview(cell)

    var cellAllConstraints = [NSLayoutConstraint]()
    let cellDictionary = ["ReportTableviewCell": cell,
                          "reportCellDateTime": cell.reportCellDateTimeOutlet]

    let cellHorizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("H:|-50-[ReportTableviewCell]-50-|",options: [], metrics: nil, views:  cellDictionary)
    let cellVerticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|[ReportTableviewCell(cellHeight)]-(cellVSpacing)-|",options: [], metrics: ["cellHeight" : 10, "cellVSpacing" : 2], views:  cellDictionary)        
    cellAllConstraints += cellHorizontalConstraints        
    cellAllConstraints += cellVerticalConstraints
    NSLayoutConstraint.activateConstraints(cellAllConstraints)


    // set constraint on UILabel reportCellDateTimeOutlet in cell ReportCell        
    cellAllConstraints.removeAll()        
    let dateTimeHorizontalConstrains = NSLayoutConstraint.constraintsWithVisualFormat("H:|-50-[reportCellDateTime]-|",options: [], metrics: nil, views:  cellDictionary)
    cellAllConstraints += dateTimeHorizontalConstrains
    NSLayoutConstraint.activateConstraints(cellAllConstraints)

当错误地将单元格或 UILabel 添加到 UITableView(如 alertTableView.addSubview(cell.reportCellDateTimeOutlet))时，隐藏单元格会添加到 UITableView 中，当向下拖动顶部单元格时，隐藏单元格将变得可见。正如 bsmith11 所指出的，这是错误的。

仍然在 UITableView 中使用自定义单元格并为该单元格中的特定 UILabel 设置约束时，约束不会受到影响。

    let cell:ReportTableviewCell = self.alertTableView.dequeueReusableCellWithIdentifier("cell") as! ReportTableviewCell
    var cellAllConstraints = [NSLayoutConstraint]()
    let cellDictionary = [
                                  "reportCellDateTime": cell.reportCellDateTimeOutlet,
                                  "reportCellViewedIndicator" : cell.reportCellViewedIndicatorOutlet,
        "reportCellDescription" : cell.reportCellDescriptionOutlet ]
    cell.reportCellDateTimeOutlet.translatesAutoresizingMaskIntoConstraints = false
    let dateTimeHorizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("H:|-50-[reportCellDateTime(300)]-|",options: [], metrics: nil, views:  cellDictionary)
    cellAllConstraints += dateTimeHorizontalConstraints
    NSLayoutConstraint.activateConstraints(cellAllConstraints)

按照 bsmith11 的建议，我将代码从 ViewController 移至扩展 UITableViewCell 的类。还以编程方式将约束应用从 VFL 更改为布局 anchor 。不幸的是，这对我不起作用。

class ReportTableviewCell : UITableViewCell {

    @IBOutlet weak var reportCellViewedIndicatorOutlet: UIImageView!
    @IBOutlet weak var reportCell: UIView!

    override func awakeFromNib() {
      super.awakeFromNib()

      // Internal border
      self.layer.borderColor = UIColor(red: 245/255, green: 166/255, blue: 35/255, alpha: 1.0).CGColor
      self.layer.cornerRadius = 8.0
      self.layer.masksToBounds = true
      self.layer.borderWidth = 4.0

      reportCell.translatesAutoresizingMaskIntoConstraints = false
      reportCellViewedIndicatorOutlet.bottomAnchor.constraintEqualToAnchor(reportCell.bottomAnchor, constant: 10)
      reportCellViewedIndicatorOutlet.rightAnchor.constraintEqualToAnchor(reportCell.rightAnchor, constant:-10)
      reportCellDescriptionOutlet.translatesAutoresizingMaskIntoConstraints = false
      reportCellDescriptionOutlet.leftAnchor.constraintEqualToAnchor(reportCell.leftAnchor, constant: 10).active = true                  reportCellDescriptionOutlet.rightAnchor.constraintEqualToAnchor(reportCell.rightAnchor, constant: 10).active = true

      ...

Answer 1

您的意思是:

  "H:|-(50)- ...

而不是

   "H:-(50)-| ...