如何在tableview中使用VFL约束到自定义单元格

时间:2016-04-25 20:00:41

标签: ios swift uitableview constraints

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

  • 单元格需要水平调整大小以匹配屏幕的宽度并具有 间距为50pts。左右。
  • 细胞高度为10pts
  • 我希望在垂直方向上留出2个小空间。

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

    /*
        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添加到像alertTableView.addSubview(cell.reportCellDateTimeOutlet)这样的UITableView时,会向UITableView添加一个隐藏单元格,当向下拖动顶部单元格时,该单元格变为可见。这是错误的,正如bsmith11所指出的那样。

enter image description here

仍然在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应用到布局锚点。不幸的是,对我不起作用。

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

      ...

3 个答案:

答案 0 :(得分:0)

你的意思是:

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

而不是

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

答案 1 :(得分:0)

您似乎错误地使用了UITableView

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

您应该对UITableViewCell子类内的子视图设置约束。 UITableView将处理实际单元格的布局。

答案 2 :(得分:0)

最后我能够设置约束。正如@ bsmith11所建议的,我改用NSConstraints而转向VFL。还将以编程方式定义的约束从ViewController移动到扩展UITableViewCell类的类。

struct.pack()