如何管理自动布局中两个视图之间的间隙

Posted

技术标签:

【中文标题】如何管理自动布局中两个视图之间的间隙【英文标题】:How to manage the gap between two views in auto layout 【发布时间】:2015-07-10 08:31:43 【问题描述】:

我正在为我的ViewController 使用自动布局我知道如何以编程方式使用约束来定义两个视图之间的间隙。我现在想做的是当屏幕尺寸增加时,也增加间隙。因为我的UIViews在 iphone 4s 和 5s 中定位正确,但在 6 和 6 plus 中它们位于屏幕的一小块区域。我知道添加乘数我们可以设置视图的纵横比,但是,当屏幕高度增加时如何增加两个视图之间的差距。

更新

比如说这张图片,上面有一个标志请登录标签。

这是我的垂直位置约束

V:|-70-[Title]-130-[lblFirst]-0-[lblSecond]-20-[textusername]-10-[txtpassword]-10-[btnLogin]

此标题是此请登录标签上方 130pix 的图像。我想在 iphone 6 和 6 plus 上增加这个 130

【问题讨论】:

您希望间隙高度与屏幕尺寸相关吗? 您能在storyboard/xib中发布您当前布局的屏幕截图吗? 是的,假设我有一个图像视图和下面的 10pix,我还有另一个标签。但是当屏幕尺寸增加时,我不想将我的标签 10pix 添加到那个 uiimage 视图中,我想增加那个差距 你的视图是固定高度还是随着父视图高度的增加而增加? 看到我更新了我的帖子 【参考方案1】:

使用 alpha 0 和清除颜色的 UIView 并使用它来代替间隙,并使用宽高比与用于间隙的视图以及上下或左右,无论您的情况如何,您想要制作的视图之间间隙动态。而且您还需要向 gapView 添加更多对齐约束,但它会起作用。我找不到任何其他方法可以轻松地做到这一点,所以我在所有项目中的任何地方都使用了这种方法,并且一切正常。我认为具有清晰颜色和 alpha 0 的 UIView 不会以任何方式影响屏幕或性能。我们可以使用它。

这是一个示例,例如,如果您有两个垂直文本字段,并且您想动态增加它们之间的间隙,然后在文本字段的宽度完全相同的情况下查看它们之间的视图并添加这些约束。

1) GapView 顶部到上方文本字段。

2) GapView 底部到文本字段下方。

3) 与任何文本字段或父视图或主视图的前导和尾随宽度相等。

4) 主视图的比例高度(您可以通过将子视图的相等高度添加到任何父视图然后更改乘数来添加此约束);

而且你的 GapView 会相应的增加和减少。

【讨论】:

我想这是最简单的解决方案 嗯不错的解决方案我会试试这个。谢谢:)

以上是关于如何管理自动布局中两个视图之间的间隙的主要内容,如果未能解决你的问题,请参考以下文章

使用自动布局隐藏视图和相邻间隙

UIStackViews 之间的自动布局最小间隙

FlexBox布局Android。如何消除视图之间的垂直间隙?

如何使用自动布局在两个子视图控制器之间移动?

如何使用自动布局水平设置三个按钮而没有间隙

自动布局不垂直添加间隙