【问题标题】:Difference between UIStackView and Auto Layout AnchorUIStackView 和 Auto Layout Anchor 的区别
【发布时间】:2020-07-09 14:09:08
【问题描述】:

我刚刚学习了UIStackView,并试图掌握自己将自动布局单独应用于每个 UI 元素与使用堆栈视图之间的区别。

假设您有 5 个UILabels,并且您希望将它们平均间隔开。我可以使用自动布局锚之类的东西:

var previous: UILabel?

for label in [label1, label2, label3, label4, label5] {
    label.heightAnchor.constraint(equalToConstant: 88).isActive = true
    
    if let previous = previous {
        label.topAnchor.constraint(equalTo: previous.bottomAnchor, constant: 10).isActive = true
    } else {
        label.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 0).isActive = true
    }
    
    previous = label
}

或视觉格式语言:

let viewsDictionary = ["label1": label1, "label2": label2, "label3": label3, "label4": label4, "label5": label5]
view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[label1(labelHeight@999)]-[label2(label1)]-[label3(label1)]-[label4(label1)]-[label5(label1)]-(>=10)-|", options:[], metrics: metrics, views: viewsDictionary))

或使用堆栈视图并将分布设置设置为沿主轴的equalSpacing

这些是粗略的示例,但我是否正确理解您几乎可以使用自动布局锚或使用视觉格式语言完成堆栈视图所做的所有事情,但堆栈视图使其更容易?

或者使用自动布局锚或视觉格式语言无法实现的堆栈视图是否有独特的好处?

【问题讨论】:

    标签: ios swift autolayout uistackview


    【解决方案1】:

    视觉格式语言有很多的限制。我的印象(可能是错误的)是 Apple 甚至不再开发它 - 它只是为了向后兼容。

    对于您的 简单 布局示例,您是对的。您可以对循环执行与堆栈视图相同的操作。

    但是...假设您希望这 5 个标签在屏幕上垂直居中?还是在另一个视图中?如果它们在堆栈视图中,您只需限制堆栈视图的位置。

    或者,假设您想在运行时添加更多标签(或其他视图),或者在label2label3 之间插入label-2A?使用循环约束,您会遇到问题。使用堆栈视图,stack.insertArrangedSubview(label2A, at: 2)(索引从零开始),您就完成了。

    堆栈视图还具有许多其他排列功能,可以让设计复杂的 UI 变得非常简单。

    搜索 UIStackView 以获取一些示例 - 或者甚至只是浏览此处标记为 uistackview 的一些帖子...我想您很快就会看到优势。

    【讨论】:

      【解决方案2】:

      这两个元素的使用是可选的。 StackView 可以更轻松地实现更改(添加/删除)的项目。正如您所写, StackView 是一种简化。使用 Constraints 可以获得与 StackView 中相同的效果,但您会感到有点累。

      【讨论】:

        【解决方案3】:

        由于所有 UI 控件 UIStackView 都有自己的用途和用例,您可能可以实现它所做的一切,但您会浪费很多时间 :)。 例如。 UIStackView 有 5 种分布变体,垂直和水平,可与所有自动布局功能一起使用以支持各种屏幕尺寸等。

        此外,它很可能比您编写的自定义代码经过更好的测试。 您必须编写的代码行数越少越好:)

        【讨论】:

          猜你喜欢
          • 2019-12-24
          • 1970-01-01
          • 2022-11-06
          • 2016-08-02
          • 2014-12-22
          • 2017-01-04
          • 2019-04-19
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多