如何做这个自定义的自动布局? [复制]

Posted

技术标签:

【中文标题】如何做这个自定义的自动布局? [复制]【英文标题】:How to do this custom auto layout? [duplicate] 【发布时间】:2017-09-28 17:32:05 【问题描述】:

我正在尝试使此布局正常工作,但在过去两天的尝试中失败了。

所有标签都有一个恒定的高度。左边的所有方块都是不重要的图标的图像。

我的问题是关于 Y 轴。这是 iPhone SE 的框架。我需要它相应地扩展到更大的屏幕,如 iPhone 8 Plus 和 iPhone X。同样,我可以在 iPhone X 的 Interface Builder 中设计它,它应该会合理缩小直到 iPhone 4s。据我了解,尺寸类不适用于 iPhone - iPhone 变体,因为它们都是紧凑的宽度和常规的高度。

这些以蓝色突出显示的垂直线在实际应用中不可见。它们试图始终将两个 UILabel 框架之间的黑色水平线居中。 所以,我真正需要的是:如果屏幕变小,蓝色垂直线应该缩小。如果屏幕变大,蓝色的垂直线应该会扩大。 当我尝试让 UITableView 也具有可变高度时,就会出现问题。

有人对我如何解决这个问题有任何想法吗?这对我很重要。

【问题讨论】:

您是否显示了一个有 4 行的表格视图?最后一行是一个单元格,里面有一个表格视图?或者,这些子视图是有一个还是两个标签+图像,而底部的子视图有一个表格视图作为子视图?两个建议:1. 显示您尝试布置的对象的更好图表,以及 2. 显示您希望它在更高屏幕上的外观的另一张图片。 【参考方案1】:

有很多方法可以实现您的要求,但 UIStackView 非常适合这类事情。详细回答您的问题需要很长时间,但这是界面生成器中快速模型的屏幕截图,也许您可​​以弄清楚。

我不太明白你说的那些蓝线是什么意思,在我的例子中,tableview 的高度是动态的,因为它的拥抱优先级低于其他元素。但是您可以为每个元素提供所需的高度并将 stackview 分布属性设置为“平均填充”,然后堆栈视图将在 y 轴上适合您的屏幕并在元素之间创建相等的间距。

和模拟器截图:

这里我给每个容器视图一个静态高度,并将主堆栈视图分布设置为“等间距”,正如你所见,它调整了容器视图之间的间距:

【讨论】:

【参考方案2】:

如果您希望它们根据您的屏幕具有相同的比例,您可以使用乘数使它们:

尝试使它们与容器视图的高度相同,但乘数为 0.15 或其他值。如果它们相等,您需要一个约束 1:0.15 并且所有其他约束都等于这个

【讨论】:

以上是关于如何做这个自定义的自动布局? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

使用自动布局自定义纵横比

如何在标准 UITableViewCell 中以编程方式自动布局右侧的自定义 UIButton。

自定义 tableviewcell 和自动布局

如何以编程方式使用自动布局添加自定义视图

如何使用 xib 文件自动布局宽度自定义 UITableViewCell

简单自定义 UITableViewCell 的自动布局错误