时间戳

首页 > 解决方案 > Swift - 视觉格式语言 - 如何制作多行和多列

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

问题描述

我刚开始快速编程，我正面临视觉格式限制的困难。我正在尝试制作多个 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)

}

标签： swiftconstraintsvisual-format-language

解决方案

这里的单元格高度是 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)

推荐阅读