在容器视图中均匀地分隔多个视图

自动布局让我的生活变得困难。 从理论上讲,当我切换时它会非常有用,但我似乎一直在争取它。

我做了一个演示项目来尝试寻求帮助。 有人知道如何使视图之间的空间在视图调整大小时均匀地增加或减少吗?

这里有三个标签(手动垂直放置):

此搜索

我想要的是让他们在旋转时均匀调整其间距(不是视图大小)。 默认情况下,顶部和底部视图朝中心挤压:

图像2


所以我的方法允许您在界面构建器中执行此操作。 你所做的是创建'间隔视图',你已经设置为平等匹配高度。 然后向标签添加顶部和底部约束(请参见屏幕截图)。

在这里输入图像描述

更具体地说,我对超级视图的'Spacer View 1'有一个顶部约束,高度限制的优先级低于1000,高度等于所有其他的'spacer视图'。 'Spacer View 4'对超视图有一个底部空间限制。 每个标签对其最近的'间隔视图'都有各自的顶部和底部限制。

注意:确保您的标签上没有额外的顶部/​​底部空间限制,以便进行超级查看; 只是那些'太空景观'。 这将是可以满足的,因为顶部和底部约束分别在'空间视图1'和'间隔视图4'。

杜1:我重复了我的观点,只是把它放在横向模式中,这样你就可以看到它的工作。

杜2:'间隔视图'可能是透明的。

杜3:这种方法可以水平应用。


看,没有空间!

根据我原始答案的评论部分的建议,尤其是@ Rivera的有益建议,我简化了我原来的答案。

我使用gif来说明这是多么简单。 我希望你找到有用的GIF。 为了防止GIF问题,我在下面列出了旧屏幕截图。

说明:

1)添加你的按钮或标签。 我正在使用3个按钮。

2)将每个按钮的中心x约束添加到超级视图:

在这里输入图像描述

3)从每个按钮添加约束到底部布局约束:

在这里输入图像描述

4)调整上面#3中添加的约束,如下所示:

a)选择约束条件; b)删除常数(设为0); c)按如下方式更改乘数:取按钮数+ 1,从顶部开始,将乘数设置为buttonCountPlus1:1,然后设置buttonCountPlus1 :2,最后buttonCountPlus1:3。 (如果你有兴趣,我可以在下面的旧答案中解释我从哪里得到这个公式)。

在这里输入图像描述

5)这是一个演示运行!

在这里输入图像描述

注意:如果你的按钮有更高的高度,那么你需要在常数值中补偿这个值,因为约束来自按钮的底部。


旧答案


尽管苹果的文档和Erica Sadun的优秀书籍(自动布局揭秘)说,可以在没有间隔的情况下均匀地放置视图。 在IB中执行此操作非常简单,并且您可以在代码中为任何希望均匀分配空间的元素编写代码。 所有你需要的是一个称为“部分公式”的数学公式。 做起来要比解释更简单。 我将通过在IB中展示它来尽我所能,但在代码中执行操作也很简单。

在这个例子中,你会的

1)首先将每个标签设置为具有中心约束。 这很简单。 只需控制从每个标签拖到底部。

2)按住Shift键,因为您可能会添加我们要使用的其他约束,即“底部空间到底部布局指南”。

3)选择“底部空间到底部布局指南”和“在容器中水平居中”。 对所有3个标签执行此操作。

按住Shift键为每个标签添加这两个约束

基本上,如果我们把我们想要确定的坐标的标签除以标签的总数加1,那么我们有一个我们可以添加到IB的数字来获得动态位置。 我正在简化公式,但您可以使用它来设置水平间距,或者同时设置垂直和水平间距。 它超级强大!

这是我们的乘数。

Label1 = 1/4 = .25,

Label2 = 2/4 = .5,

Label3 = 3/4 = .75

(编辑:@Rivera评论说,你可以简单地直接在乘数字段中使用比率,而xCode则可以在数学中使用!)

4)所以,我们选择Label1并选择底部约束。 喜欢这个: 在这里输入图像描述

5)在属性检查器中选择“第二项”。

6)从下拉菜单中选择“倒退第一项和第二项”。

7)将常量和wC hAny值清零。 (如果需要,你可以在这里添加一个偏移量)。

8)这是关键部分:在乘数字段中,添加第一个乘数0.25。

9)当你在它的时候,将顶部的“第一项”设置为“CenterY”,因为我们想将它置于标签的y中心。 以下是应有的一切。

在这里输入图像描述

10)对每个标签重复这个过程并插入相关的乘数:Label2为0.5,Label3为0.75。 这是所有紧凑型设备的最终产品! 超级简单。 我一直在寻找许多涉及代码和间隔符的解决方案。 这是我在这个问题上看到的最好的解决方案。

更新:@ kraftydevil补充说,底部布局指南只出现在故事​​板,而不是xibs。 在xibs中使用'Bottom Space to Container'。 接得好!

在这里输入图像描述


非常快速的Interface Builder解决方案:

对于任何数量的视图要在超视图中均匀分布,只需为水平布局分别设置“对齐中心X到超视图”约束或“对齐中心Y超视图”,并将乘数设置为N:p (注意:有些人对p:N有更好的运气 - 见下文)

哪里

N = total number of views ,以及

p = position of the view including spaces

第一个位置是1,然后是一个空格,使下一个位置3,所以p成为一系列[1,3,5,7,9,...]。 适用于任意数量的视图。

所以,如果你有3个空间的意见,它看起来像这样:

关于如何在IB中均匀分布视图的示例

编辑注意: N:pp:N取决于对齐约束的关系顺序。 如果“First Item”是Superview.Center,则可以使用p:N ,而如果Superview.Center是“Second Item”,则可以使用N:p 。 如果有疑问,就试试两种...... :-)

链接地址: http://www.djcxy.com/p/28273.html

上一篇: Evenly space multiple views within a container view

下一篇: ios6 uilabel not center text aligned