Question

我刚刚开始快速编程，我在视觉格式限制方面面临困难。我正在尝试使用表顶部的和标题制作3 x 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也有很大的差距。当我从视图v0中删除（30）时，带有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

此处单元格高度为300。此外，您还必须添加更多UILabel来填充这些表。

  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提供了使用VFL构建计算器布局的广泛示例。

Swift-视觉格式语言-如何制作多行和多列

2 个答案: