Swift - Visual format language - how to make multiple rows and columns

Question

I just started swift programming and i'm facing difficulties with visual format constraints. I'm trying to make multiple tables of 3 by 6 rows and columns with and header on top of the table. I have added the names of the row and columns but it's not aligned in the expected (by me) order. The problem in below code is: the line

> addConstraintsWithFormat(format: "H:|-40-[v0][v1][v2]-[v3]-[v4]-|", 
> views: cashLabel, pinLabel, idealLabel, houseLabel,
> totalPerPayMethodLabel) is placed in between the rows of

> addConstraintsWithFormat(format: "V:|-[v0(30)]-[v1]-[v2]-[v3]-|", 
> views: timePeriodLabel, highBtwLabel, lowBtwLabel, totalPerBtwLabel).

Also the cashLabel has a big gap with the pinLabel. When i remove the (30) from view v0 the line with the cashLabel, pinLabel etc. is placed above the other rows (V:) as expected. Also the cashLabel does not seem to be affected by the H:-40-[v0] etc.

class AccountingCell: UITableViewCell {

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier) 
    setupViews()
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
}

let timePeriodLabel: UILabel = {
    let label = UILabel()
    label.backgroundColor = UIColor.red
    label.text = "Header"
    label.translatesAutoresizingMaskIntoConstraints = false
    label.textAlignment = .center
    return label
}()

let highBtwLabel: UILabel = {
    let label = UILabel()
    label.text = "high vat"
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()

let lowBtwLabel: UILabel = {
    let label = UILabel()
    label.text = "low vat"
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()

let cashLabel: UILabel = {
    let label = UILabel()
    label.text = "Cash"
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()

let pinLabel: UILabel = {
    let label = UILabel()
    label.text = "Pin"
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()

let idealLabel: UILabel = {
    let label = UILabel()
    label.text = "IDEAL"
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()

let houseLabel: UILabel = {
    let label = UILabel()
    label.text = "House"
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()

let totalPerBtwLabel: UILabel = {
    let label = UILabel()
    label.text = "Totaal"
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()

let totalPerPayMethodLabel: UILabel = {
    let label = UILabel()
    label.backgroundColor = UIColor.red
    label.text = "Totaal"
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()

func setupViews() {

    addSubview(timePeriodLabel)
    addSubview(highBtwLabel)
    addSubview(lowBtwLabel)
    addSubview(cashLabel)
    addSubview(pinLabel)
    addSubview(idealLabel)
    addSubview(houseLabel)
    addSubview(totalPerBtwLabel)
    addSubview(totalPerPayMethodLabel)

    addConstraintsWithFormat(format: "H:|[v0]|", views: timePeriodLabel)
    addConstraintsWithFormat(format: "H:|-40-[v0][v1][v2]-[v3]-[v4]-|", views: cashLabel, pinLabel, idealLabel, houseLabel, totalPerPayMethodLabel)
    addConstraintsWithFormat(format: "H:|[v0]|", views: timePeriodLabel)
    addConstraintsWithFormat(format: "H:|[v0]|", views: highBtwLabel)
    addConstraintsWithFormat(format: "H:|[v0]|", views: lowBtwLabel)
    addConstraintsWithFormat(format: "H:|[v0]|", views: totalPerBtwLabel)

    addConstraintsWithFormat(format: "V:|-[v0(30)]-[v1]-[v2]-[v3]-|", views: timePeriodLabel, highBtwLabel, lowBtwLabel, totalPerBtwLabel)
    addConstraintsWithFormat(format: "V:|-[v0]-|", views: cashLabel)
    addConstraintsWithFormat(format: "V:|-[v0]-|", views: pinLabel)
    addConstraintsWithFormat(format: "V:|-[v0]-|", views: idealLabel)
    addConstraintsWithFormat(format: "V:|-[v0]-|", views: houseLabel)
    addConstraintsWithFormat(format: "V:|-[v0]-|", views: totalPerPayMethodLabel)

}

Answer 1

Here the cell height is 300. And also you have to add more UILabels to fill those tables.

  addConstraintsWithFormat(format: "H:|[v0]|", views: timePeriodLabel)
    addConstraintsWithFormat(format: "H:|-60-[v0(==v1)][v1(==v2)][v2(==v3)][v3(==v4)][v4]-|", views: cashLabel, pinLabel, idealLabel, houseLabel, totalPerPayMethodLabel)
    addConstraintsWithFormat(format: "H:|[v0]|", views: timePeriodLabel)
    addConstraintsWithFormat(format: "H:|[v0]|", views: highBtwLabel)
    addConstraintsWithFormat(format: "H:|[v0]|", views: lowBtwLabel)
    addConstraintsWithFormat(format: "H:|[v0]|", views: totalPerBtwLabel)

    addConstraintsWithFormat(format: "V:|[v0]-(30)-[v1(==v2)][v2(==v3)][v3]-|", views: timePeriodLabel, highBtwLabel, lowBtwLabel, totalPerBtwLabel)
    addConstraintsWithFormat(format: "V:|[v0]-230-|", views: cashLabel)
    addConstraintsWithFormat(format: "V:|[v0]-230-|", views: pinLabel)
    addConstraintsWithFormat(format: "V:|[v0]-230-|", views: idealLabel)
    addConstraintsWithFormat(format: "V:|[v0]-230-|", views: houseLabel)
    addConstraintsWithFormat(format: "V:|[v0]-230-|", views: totalPerPayMethodLabel)

Answer 2

Auto Layout: quick prototyping and shared UI components with Visual Format Language and JSONLayout provides an extensive example of building a calculator layout with VFL.