如何在表视图中使用VFL约束自定义单元格

Question

|I have a TableView (alertTableView) in my viewcontroller with a custom UITableViewCell (cell). To this UITableViewCell i want to set some constraints;

• cell needs to resize horizontally to match the width of the screen and has a spacing of 50pts. left and right.
• height of the cell is 10pts
• between the cells i want to have a small space of 2 points vertically.

To do this i used VFL to add the constraints, but the constraints are not set/respected. I assume that i have to set the constraints on the AlertTableView and not on view. Tried it anyway, but as expected by myself this did not make a difference.

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

What's done wrong ?

== new revision of the example ==

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

when erroneously adding a cell or UILabel to an UITableView like alertTableView.addSubview(cell.reportCellDateTimeOutlet) a hidden cell is added to the UITableView which becomes visible when dragging down the top cell. This was wrong as pointed out by bsmith11.

Still when using a custom cell in a UITableView and setting the constraints for a specific UILabel in that cell, the constraints are not affected.

    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)

As suggested by bsmith11 i moved the code from the ViewController to the class extending the UITableViewCell. Also changed the programmatically application of constraints from VFL to Layout anchors. Does not work for me unfortunately.

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

Did you mean:

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

instead of

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

Answer 2

You seem to be using UITableView incorrectly.

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/TableView_iPhone/CreateConfigureTableView/CreateConfigureTableView.html#//apple_ref/doc/uid/TP40007451-CH6-SW10

You should be settings constraints on subviews inside of your UITableViewCell subclass. The UITableView will handle layout of the actual cells.

Answer 3

Finally i have been able to set constraints. As suggested by @bsmith11 i switched to NSConstraints in favour of VFL. Also moved the programmatically defined constraints from the ViewController to the class extending the UITableViewCell class.

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

override func awakeFromNib() {
    super.awakeFromNib()

    reportCell.translatesAutoresizingMaskIntoConstraints = false

    // viewed Indicator constraints
    let viewedIndicatorConstraints: [NSLayoutConstraint] = [
        reportCellViewedIndicatorOutlet.rightAnchor.constraintEqualToAnchor(self.rightAnchor, constant: -3),
        reportCellViewedIndicatorOutlet.bottomAnchor.constraintEqualToAnchor(self.bottomAnchor, constant: -3)

    ]

    NSLayoutConstraint.activateConstraints(viewedIndicatorConstraints)