Encuentra la siguiente captura de pantalla.

Mock up Necesito la solución para trabajar también en iOS 8. La vista de pila no es útil en iOS 8

Me han asignado esta maqueta ... No sé exactamente cómo repetir una etiqueta en particular en la tabla ViewCell. Como puede ver, necesito repetir la etiqueta violeta y las etiquetas blancas dependiendo de los elementos en los datos JSON.

1
SaiPavanParanam 4 ene. 2017 a las 16:28

5 respuestas

La mejor respuesta

Puede usar una combinación de vistas de pila horizontal y vertical para lograr esto:

enter image description here

Esta solución le permite evitar dos dificultades con los otros enfoques sugeridos anteriormente:

  • No tiene que meterse con la propiedad oculta de alternar vistas
  • No está limitado a un número máximo fijo de artículos

Aquí está el código:

import UIKit

class Order {
    var stations = [Station]()
    var companies = [String]()
}
class Station {
    let name: String
    let amount: Int
    init(name: String, amount: Int) {
        self.name = name
        self.amount = amount
    }
}

class TableViewController: UITableViewController {

    var orders = [Order]()

    override func viewDidLoad() {
    super.viewDidLoad()

    tableView!.rowHeight = UITableViewAutomaticDimension
    tableView!.estimatedRowHeight = 44.0

    //simulated data
    let order1 = Order()
    order1.companies.append("Global @ CITGO Braintree, Braintree")
    order1.companies.append("Exxon @ Global, Chelsea")
    order1.stations.append(Station(name: "Tyngsboro Mobil #2871", amount: 4000))
    order1.stations.append(Station(name: "Grafton St #10095", amount: 15000))
    orders.append(order1)

    let order2 = Order()
    order2.companies.append("Exxon @ Global, Chelsea")
    order2.stations.append(Station(name: "Winstead Citgo #2001", amount: 3000))
    orders.append(order2)

    let order3 = Order()
    order3.companies.append("MSCG @ Sunoco Partners")
    order3.stations.append(Station(name: "Citgo #123", amount: 7000))
    order3.stations.append(Station(name: "Mobil #345", amount: 12500))
    order3.stations.append(Station(name: "Exxon #567", amount: 300))
    order3.stations.append(Station(name: "Citgo #789", amount: 6100))
    order3.stations.append(Station(name: "Stoughton Mobil #2744", amount: 9098))
    order3.stations.append(Station(name: "Westborough Mobil #2720", amount: 120000))
    orders.append(order3)
}

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

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return orders.count
}

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: "MyTableViewCell", for: indexPath) as! TableViewCell

    let order = orders[indexPath.row]

    cell.companyLabel.text = ""
    for (index, company) in order.companies.enumerated() {
        cell.companyLabel.text! += company
        if index < order.companies.count - 1 {
            cell.companyLabel.text! += "\n"
        }
    }

    for station in order.stations {

        // create horizontal stack view to arrange the station name and amount
        let horizontalStackView = UIStackView()
        horizontalStackView.axis = .horizontal

        let nameLabel = UILabel()
        nameLabel.translatesAutoresizingMaskIntoConstraints = false
        nameLabel.text = station.name
        horizontalStackView.addArrangedSubview(nameLabel)

        let amountLabel = UILabel()
        amountLabel.translatesAutoresizingMaskIntoConstraints = false
        amountLabel.addConstraint(NSLayoutConstraint(item: amountLabel, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .width, multiplier: 1.0, constant: 60))
        amountLabel.backgroundColor = UIColor.purple
        amountLabel.textAlignment = .right
        amountLabel.textColor = UIColor.white
        amountLabel.text = String(station.amount)
        horizontalStackView.addArrangedSubview(amountLabel)

        // add the horizontal stack view to the vertical stack view containing all stations
        cell.stackView.addArrangedSubview(horizontalStackView)
    }

    return cell
}

}

Así es como se ve el guión gráfico:

enter image description here

1
Mike Taverne 4 ene. 2017 a las 17:04

Como Mr.Bista mencionó, hay una opción con StackView.

  1. Crea una celda personalizada en Storyboard con el diseño.
  2. En lugar de agregar varias etiquetas, use la vista de pila.
  3. En el código, utilice celdas de tamaño propio. Puede consultar este sitio para guiarse. APPCode auto dimensionamiento de celdas o simplemente busque stackoverflow.

No lo probé solo ahora, pero supongo que puede ser complicado usar stackView y la celda de tamaño automático. Dado que cada celda puede tener una altura diferente según el contenido de StackView. Entonces, para estar cien por ciento seguro, siempre puede calcular la altura de la celda.

  1. Cambie el contenido de la vista de pila en función del contenido json. (Número de registros para etiquetas violetas)

También puede consultar la pila para preguntas similares. Por favor, vea este enlace donde hay una posible respuesta para usted. Múltiples UILabels dentro de un UITableViewCell de tamaño propio

1
Community 23 may. 2017 a las 12:16

En storyboard tienes dos UILabel cada uno para blanco y violeta. Si Json tiene datos, asígnelos, de lo contrario, haga el siguiente código

cell.label1.frame.size.height = 0
cell.label2.frame.size.height = 0

Nota: Conocimos las restricciones que está dando a los componentes en UITableViewCell.

0
dahiya_boy 4 ene. 2017 a las 13:38

Este es el escenario perfecto para el usuario UIStackView, agregue 5 etiquetas dentro de Vista de pila y oculte (.isHidden Propiedad) las etiquetas que no desea mostrar, esto causará < em> Vista de pila para Reducir y Expandir según el número de etiquetas presentes en su interior.

Espero que ya esté informado con Stack View, si no, debe buscar un tutorial básico en línea.

2
Bista 4 ene. 2017 a las 14:04

Según la respuesta de @the_dahiya_boy:

  1. Obtiene el campo JSON con campos específicos (puede haber uno o dos campos que deben mostrarse en campos violetas)

  2. Verifica cuántos campos hay

  3. Si solo hay un campo, puede establecer el marco de su segunda vista (para el segundo campo, que está vacío) como 0
0
Олег Місько 4 ene. 2017 a las 14:05