Swift - Язык визуального формата - как сделать несколько строк и столбцов

Question

Я только начал быстрое программирование, и я столкнулся с трудностями с ограничениями визуального формата. Я пытаюсь сделать несколько таблиц 3 на 6 строк и столбцов с заголовком и сверху таблицы. Я добавил имена строк и столбцов, но они не выровнены в ожидаемом (мной) порядке. Проблема в следующем коде: строка

> 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).

Также у cashLabel большой разрыв с pinLabel. Когда я удаляю (30) из представления v0, строка с cashLabel, pinLabel и т. Д. Помещается над другими строками (V :), как и ожидалось. Также на cashLabel, похоже, не влияют H: -40- [v0] и т. Д.

класс 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

Автоматическая разметка: быстрое создание прототипов и общие компоненты пользовательского интерфейса с помощью Visual Format Language и JSONLayout предоставляет обширный пример построения макета калькулятора с VFL.

Answer 2

Здесь высота ячейки 300. А также вы должны добавить больше UILabels, чтобы заполнить эти таблицы.

  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)