AutoLayout 上有两个以上的可选项目

Posted 2023-03-11

【中文标题】AutoLayout 上有两个以上的可选项目

【英文标题】：More than two items optional on AutoLayout

【发布时间】：2017-07-24 05:14:59

【问题描述】：

我有四个标签项（小计、税收、小费和促销），设计如下。

每个项目都相互连接。换句话说，每个标签都使用顶部空间约束。

Promotion 和 Tip 是可选的。如果用户想添加，那么他可以。因此，我还在初始状态下为每个标签项的Height == 0 添加了约束。如果添加了其中任何一个，那么我将 Height 更改为 25 以使其可见。

但是，你可以看看如果没有tip，那么promotion的位置就很奇怪了。 我希望在税收下看到促销，而不是看到额外的空白。

我想知道开发人员通常如何处理这个问题？

添加提示之前

添加提示后

【问题讨论】：

尽量为Promotion Label的Bottom约束设置低优先级，同时设置大于等于

@hotspring 您可以在隐藏该标签时更新常量值并向上移动标签。通过使用 NSLayoutConstraint 插座。您需要更新布局以填补该空白。

【参考方案1】：

原因是因为Tip Label的top和bottom在不隐藏的时候空格是一样的，设置为height = 0隐藏，还是有top和@ 987654325@ 约束创造了巨大的空间。您将Tip Label 的top 约束设置为0，或者如上所述使用UIStackView，如果一项被隐藏，它将自动调整间距。

【参考方案2】：

当您更新Tip 标签的Height 约束时。也更新Promotion 标签的top vertical space。

设置Promotion标签top vertical space = 0.0

示例：

@interface ViewController () 
    __weak IBOutlet NSLayoutConstraint *tipLabelHeight;
    __weak IBOutlet NSLayoutConstraint *promotionLabelTopVerticalSpace;


- (void)viewDidAppear:(BOOL)animated 
    [super viewDidAppear:animated];
    tipLabelHeight.constant = 0.0;
    promotionLabelTopVerticalSpace.constant = 0.0;
    [self.view layoutIfNeeded];

根据您的需要更改代码。

【参考方案3】：

当您通过将标签的高度设置为 0 来隐藏标签时，顶部和底部的空间仍然存在。因此，当您尝试通过将标签的高度设置为 0 来隐藏标签时，您还应该删除该标签的顶部间距。在这种情况下，您应该将“提示”标签的顶部空间设置为 0，高度设置为 0。因此“促销”标签代替了“提示”标签

【参考方案4】：

您可以使用 UIStackView 而不是手动操作约束，堆栈视图会自动管理它们，并且非常适合添加和删除以线性方式布局的子视图。

【讨论】：

能否提供一个示例或任何类似的github源代码？

@hotspring ray wenderlich 的 stackview 教程是一个不错的起点，您可以从那里查看 Apple 的“Layout Using StackViews”教程

【参考方案5】：

认为这是因为这种显示应该在表格中完成。 然后表格将相应地分配间距。

【讨论】：

这实际上是tableview中的页脚视图。您认为在tableview 中使用tableview 作为页脚视图是个好主意吗？

啊，那样的话，如果那是表格中的文字那么，我会放入它自己的项目中。

我会为较小的单元格创建自定义单元格

另外，我对页脚视图的使用持怀疑态度，而只是使用普通的自定义单元格。

或者如果你觉得你想试试这个快捷方式，你可以在如果提示隐藏时使提示以编程方式减少约束。