ios - ingles - Agregar etiquetas mediante programación, alineado con las etiquetas de Storyboard

que es head en español

Question

Vista deseada:

En Storyboard tengo dos etiquetas con el fondo azul que estoy creando en Autolayout. Su posición nunca cambiará. A continuación, me gustaría agregar de 1 a 10 etiquetas en el código en cellForRowAtIndexPath debajo de las etiquetas de fondo azul.

Estoy luchando para alinear las etiquetas agregadas en el código (fondo marrón) con las creadas en el diseño automático (fondo azul).

Debajo está mi intento fallido:

Dos enfoques que fallaron:

1. En cellForRowAtIndexPath obtenga el marco de "B AutoLayout Static Label" y use la posición X para Dynamic Labels. No funcionó.

2. Agregar restricciones tampoco funcionó; quizás no agregue las restricciones correctamente.

Aquí está el código:

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
    }

A continuación se muestra la configuración Storyboard (Ambas etiquetas están centradas horizontalmente):

Pregunta: ¿Cómo puedo obtener mis etiquetas dinámicas que estoy creando en cellForRowAtIndexPath alineadas a la izquierda con mis etiquetas estáticas que fueron creadas en Storyboard para que coincida con mi vista deseada en la parte superior?

Answer 1

Solo para fines de demostración, agregué una etiqueta programáticamente, puedes agregar tanto como quieras, simplemente agrega las restricciones correctamente, también necesitas agregar la restricción bottomSpace a la última etiqueta dentro de la celda para que tu celda cambie de tamaño automáticamente según el altura de la etiqueta

Sigue los pasos que he hecho para lograr lo que quieres:

1. Acceda a la etiqueta estática B AutoLayout en cellForRowAtIndexPath: use tag o outlet si ha sublimitado UITableViewCell y ha creado un outlet.

   let labelBAutolayoutStaticLabel = cell?.viewWithTag(20)

2. Cree la etiqueta programáticamente como se muestra a continuación y configure traduceAutoresizingMaskIntoConstraints a falso,

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

3. Necesita crear dos restricciones, una es para TopSpace y la segunda es LeadingSpace como se muestra a continuación,

   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. Agregue restricción al contentView de su celda como se muestra a continuación,

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

Eso es.

Y aqui esta el resultado,

Aquí está el código completo para 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!
}

Editar / actualizar:

Si tiene que establecer la restricción bottomSpace en la última etiqueta (etiqueta que está en la parte inferior de la celda), hay dos formas

1. Use NSLayoutConstraint de la siguiente manera:

   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. Usando el lenguaje de formato visual como se muestra a continuación,

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

Si establece restricciones usando VFL, asegúrese de eliminar topSpaceConstraint

//cell.contentView.addConstraint(topSpaceConstraint)

Qué es esta "V: [labelBAutolayoutStaticLabel] - [labelDynamicLabel] - |" la media de la cuerda es,

1. labelDynamicLabel debe tener TopSpace para etiquetar a AUTOplayoutStaticLabel con standardSpacing (8pts) y labelDynamicLabel debe tener un espacio inferior para SuperView con standardSpacing. (''- |'' indica el espacio estándar para superView)