2016-03-09 1 views
4

Желаемая Вид:Добавление метки программно совмещена с этикетками из раскадровки

enter image description here

В раскадровке у меня есть две метки с синим фоном, который я создаю в Autolayout. Их положение никогда не изменится. Затем я хотел бы добавить где-нибудь от 1 до 10 меток в коде в cellForRowAtIndexPath под ярлыками синего фона.

Я стараюсь выровнять ярлыки, добавленные в код (коричневый фон), с созданными в Autolayout (синий фон).

Ниже моя неудачная попытка:

enter image description here

два подхода, которые не удалось:

  1. В cellForRowAtIndexPath получить кадр "B AutoLayout Static Ярлык" и использовать положение X для динамического Этикетки. Не работал.

  2. Добавление ограничений также не сработало - возможно, я не добавляю ограничения правильно.

Вот код:

class TableViewController: UITableViewController { 

    var cellHeight = [Int: CGFloat]() 

    override func viewDidLoad() { 
     super.viewDidLoad() 
     tableView.estimatedRowHeight = 85.0 
     self.tableView.rowHeight = UITableViewAutomaticDimension 
    } 

    override func numberOfSectionsInTableView(tableView: UITableView) -> Int { 
     return 1 
    } 

    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { 
     return 4 
    } 


    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { 


     let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as! CustomCell 
     let xLocation = cell.labelBStatic.frame.origin.x 
     var yLocation = cell.labelBStatic.frame.origin.y 
     let height = cell.labelBStatic.frame.size.height 

     var startYLocation = yLocation + height + 20 
     var i = 0 
     if indexPath.row % 2 == 0 { 
      i = 5 
     } else { 
      i = 7 
     } 

     while i < 10 { 
      let aLabel = UILabel() 
      aLabel.backgroundColor = UIColor.orangeColor() 
      aLabel.text = "Label # \(i)" 
      cell.contentView.addSubview(aLabel) 
      addConstraints(aLabel, verticalSpacing: startYLocation) 
      startYLocation += 20 
      i++ 
     } 

     print(startYLocation) 
     cellHeight[indexPath.row] = startYLocation 
     return cell 
    } 

    func addConstraints(labelView: UILabel, verticalSpacing: CGFloat) { 
     // set Autoresizing Mask to false 
     labelView.translatesAutoresizingMaskIntoConstraints = false 

     //make dictionary for views 
     let viewsDictionary = ["view1": labelView] 

     //sizing constraints 
     let view1_constraint_H:Array = NSLayoutConstraint.constraintsWithVisualFormat("H:[view1(>=50)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: viewsDictionary) 

     labelView.addConstraints(view1_constraint_H) 

     //position constraints 
     let view_constraint_H:NSArray = NSLayoutConstraint.constraintsWithVisualFormat("H:|-15-[view1]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: viewsDictionary) 
     let view_constraint_V:NSArray = NSLayoutConstraint.constraintsWithVisualFormat("V:|-\(verticalSpacing)-[view1]", options: NSLayoutFormatOptions.AlignAllLeading, metrics: nil, views: viewsDictionary) 

     view.addConstraints(view_constraint_H as! [NSLayoutConstraint]) 
     view.addConstraints(view_constraint_V as! [NSLayoutConstraint]) 

    } 

     override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat { 

     if let height = cellHeight[indexPath.row] { 
      return height 
     } 
     return 0 
    } 

Ниже Storyboard установки (Обе метки горизонтально по центру):

enter image description here

Вопрос: Как я могу получить мои динамические метки что я создаю в cellForRowAtIndexPath левой выровненной с моими статическими метками, которые были созданы в Storyboard, чтобы соответствовать моим желаемым посмотреть сверху?

ответ

4

Для демонстрации цели я добавил одну метку программно, вы можете добавить столько, сколько хотите вы хотите, просто добавьте ограничения правильно, также вам нужно добавить ограничение bottomSpace на последнюю метку внутри ячейки, чтобы ваша ячейка автоматически изменить размер по высоте этикетки.

Выполните шаги, которые я сделал, чтобы достичь того, чего вы хотите:

  1. Доступ к B AutoLayout Static этикетки в cellForRowAtIndexPath: с помощью тега или выход, если вы подклассов UITableViewCell и создали выход.

    let labelBAutolayoutStaticLabel = cell?.viewWithTag(20) 
    
  2. Создать ярлык программно, как показано ниже и установите translatesAutoresizingMaskIntoConstraints ложь,

    let labelDynamicLabel = UILabel() 
    labelDynamicLabel.backgroundColor = UIColor.orangeColor() 
    labelDynamicLabel.text = "A Dynamic Label" 
    labelDynamicLabel.translatesAutoresizingMaskIntoConstraints = false 
    cell?.contentView.addSubview(labelDynamicLabel) 
    
  3. Вам нужно создать два ограничения, один для TopSpace и второй является LeadingSpace, как показано ниже,

    let leadingSpaceConstraint: NSLayoutConstraint = NSLayoutConstraint(item: labelDynamicLabel, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: labelBAutolayoutStaticLabel, attribute: NSLayoutAttribute.Leading, multiplier: 1, constant: 0); 
    
    let topSpaceConstraint: NSLayoutConstraint = NSLayoutConstraint(item: labelDynamicLabel, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: labelBAutolayoutStaticLabel, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 10); //Constant is the spacing between 
    
  4. Добавить ограничение в содержимое вашей камерыПросмотрите ниже,

    cell?.contentView.addConstraint(leadingSpaceConstraint) 
    cell?.contentView.addConstraint(topSpaceConstraint) 
    

Всё.

И вот результат,

enter image description here

Вот полный код cellForRowAtIndexPath:

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell 
{ 
    let cell = tableView.dequeueReusableCellWithIdentifier("cell") 

    let labelBAutolayoutStaticLabel = cell?.viewWithTag(20) 


    let labelDynamicLabel = UILabel() 
    labelDynamicLabel.backgroundColor = UIColor.orangeColor() 
    labelDynamicLabel.text = "A Dynamic Label" 
    labelDynamicLabel.translatesAutoresizingMaskIntoConstraints = false 
    cell?.contentView.addSubview(labelDynamicLabel) 

    let leadingSpaceConstraint: NSLayoutConstraint = NSLayoutConstraint(item: labelDynamicLabel, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: labelBAutolayoutStaticLabel, attribute: NSLayoutAttribute.Leading, multiplier: 1, constant: 0); 

    let topSpaceConstraint: NSLayoutConstraint = NSLayoutConstraint(item: labelDynamicLabel, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: labelBAutolayoutStaticLabel, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 10); 

    cell?.contentView.addConstraint(leadingSpaceConstraint) 
    cell?.contentView.addConstraint(topSpaceConstraint) 

    return cell! 
} 

Edit/Update:

Если вы должны установить bottomSpace ограничение на последнюю метку (метка, которая находится внизу ячейки), есть два способа:

  1. Используйте NSLayoutConstraint, как показано ниже:

    let bottomSpaceConstraint: NSLayoutConstraint = NSLayoutConstraint(item: labelDynamicLabel, attribute: NSLayoutAttribute.BottomMargin, relatedBy: NSLayoutRelation.Equal, toItem: cell.contentView, attribute: NSLayoutAttribute.BottomMargin, multiplier: 1, constant: -8) 
    
    cell.contentView.addConstraint(bottomSpaceConstraint) 
    
  2. Использование Visual Формат Язык, как показано ниже,

    let views = ["cell": cell, "labelDynamicLabel": labelDynamicLabel, "labelBAutolayoutStaticLabel": labelBAutolayoutStaticLabel] 
    
    let verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("V:[labelBAutolayoutStaticLabel]-[labelDynamicLabel]-|", options: [], metrics: nil, views: views) 
    
    cell.contentView.addConstraints(verticalConstraints) 
    

Если установить ограничение с помощью VFL убедитесь, что вы удалите topSpaceConstraint

//cell.contentView.addConstraint(topSpaceConstraint) 

Что это такое "V: [labelBAutolayoutStaticLabel] - [labelDynamicLabel] - |" Строка среднего значение,

  1. labelDynamicLabel должен иметь TopSpace к labelBAutolayoutStaticLabel с standardSpacing (8pts) и labelDynamicLabel должны иметь нижнее пространство для SuperView с standardSpacing. ('- |' обозначает стандартное пространство для superView)
+0

Спасибо. Я думаю, что это должно сработать. Я попробую это через пару часов и отчитаюсь. – user1107173

+0

Я добавил нижнее ограничение таким образом 'let bottomSpaceConstraint: NSLayoutConstraint = NSLayoutConstraint (item: lastLabel, атрибут: NSLayoutAttribute.Bottom, relatedBy: NSLayoutRelation.Equal, toItem: lastLabel.superview, атрибут: NSLayoutAttribute.Bottom, multiplier: 1, constant: -5); // Константа - это интервал между cell.contentView.addConstraint (bottomSpaceConstraint) '- это правильный подход? – user1107173

+1

См. Обновленный ответ. –