UIStackView 权重像线性布局答案

【问题标题】：UIStackView Weight like Linear layoutUIStackView 权重像线性布局
【发布时间】：2017-08-19 07:16:39
【问题描述】：

如何用StackView设计如下布局

我知道它可以在不使用 stackview 的情况下轻松创建，但是否可以使用 stackview，因为我有很多已经使用 stackview 设计的 ui 如何在视图之间添加分隔线，如上图

为此，我设置了以下约束

**但是运行时它显示为 **

【问题讨论】：

【解决方案1】：

你可以使用一些简单的Autolayoutconstraints来获得这种带有UIStackView的接口。

下图描述了您可以申请的hierarchy and constraints：

Accept and Reject 按钮也有Equal Width 约束。

输出截图：

【讨论】：

【解决方案2】：

您可以使用UIStackViews 做到这一点，方法如下：

首先，创建UIView 的子类，用作两个按钮之间的UIView 的类。

class CustomWidthView: UIView {

    override var intrinsicContentSize: CGSize {
        return CGSize(width: 1, height: self.frame.height)
    }
}

您只需要覆盖 intrinsicContentSize。

现在，在它们之间添加两个按钮和一个空的UIView，并将UIView 的类设置为CustomWidthView。将您的 2 个按钮和它们之间的视图嵌入到堆栈视图中，并使用适当的约束正确设置堆栈视图的位置。

选择堆栈视图并从 Attributes inspector 中找到名为 Distribution 的属性，然后从它旁边的下拉菜单中选择 Fill Proportionally.

要在 UI Builder 中反映您的更改，请选择自定义宽度视图并转到 尺寸检查器，向下到列表底部，您会发现一个名为 Intrinsic 的属性大小，将其值改为Placeholder，并从width下拉菜单中选择1。

可能有更好的方法来实现这一点，但这是我目前找到的方法，我想找到更好的方法。

【讨论】：

您不需要创建任何子类。您可以通过对子视图的约束来做到这一点。 The UIStackView documentation 明确表示“您还可以通过向排列视图添加额外的约束来微调排列视图的外观。”
我同意这是矫枉过正，我尝试的第一个解决方案与您的答案中的类似，但由于某种原因，它在 UI Builder 中按预期绘制，但是当您运行时，然后中间视图未显示。

【解决方案3】：

由于UIStackView 使用自动布局来排列其子视图，您可以通过创建约束来修改其行为。

我假设您在堆栈中有三个视图：接受按钮、分隔符和取消按钮。

创建两个约束：

另见this Q&A。

【讨论】：