iOS自动布局:两个宽度相等的按钮并排


92

我目前在使用AutoLayout时遇到困难。我正在使用界面生成器,并试图将两个宽度相等的按钮并排放置,如下图所示。

目标布局

从下面的预览图像中,我的titleImage已被适当地约束并且可以正确显示,但是按钮却没有。我已经尝试过将button 1与titleImage的前端对齐,将button2与titleImage的后端对齐,但是此时两个按钮之间的宽度分布变得偏斜,如下所示。

问题场景

我的目标是了解缺少哪些约束,并且无论设备如何,都应将其应用于两个按钮以保持相等的宽度。如果可能的话,我想通过界面生成器来实现,而不是其他代码。


1
推荐使用砌体以编程方式完成此任务。链接:github.com/Masonry/Masonry
Itachi,

1
这里是链接...您可以检查... stackoverflow.com/questions/29620409/...
EI队长V2.0

Answers:


246

添加以下约束

  1. 从button1到button2分配相等的宽度。
  2. 在两个按钮之间分配水平间距。
  3. 将button1的前导空格分配给其超级视图。
  4. 将button2的尾随空格分配给其超级视图。
  5. 为两个按钮分配顶部空间。
    请让我知道这对你有没有用。

7
太好了-这对我有用。具体来说,第2点-添加水平间距。
Scratcha

哇!我是什么意思?它真的像一种魅力,我已经浪费了大约3个小时!:(在我的情况下,我在超级视图中划分了两个等宽的视图。但是最后它问我,例如“需要Y或高度的约束”,我选择做“添加缺少的约束”,然后解决了。
Randika Vishman

@Abubakr:由于两个按钮的宽度相同,因此仅适用于一个屏幕尺寸。
AG

1
也可以用于2个以上的相邻UI元素!
siege_Perilous 2016年

1
很好,但是我找到了解决方案及其更好的代码。使其中任何一个居中对齐到父对象,并提供内容大小的恒定一半,您可以在代码中计算出该大小,或者如果内容是静态的,则可以更新框架并更新常量。除此之外,还将两个按钮之间的中心间距增加一半,以使该中心对齐。只需将前导或尾随设置为另一个按钮即可。为我解决此问题。并且,如果您的内容是固有的并且需要更新,则只需调用layout updates方法并再次计算常数值即可。
Amber K

79

按照步骤和屏幕截图轻松解决


第1步)

  • 对于按钮1:设置约束: (1)领先,(2)根据需要顶部或底部,(3)高度


第2步)

  • 对于按钮2:设置约束: (1)跟踪,(2)根据需要设置顶部或底部,(3)高度

步骤3)

  • 按Ctrl +从按钮1拖动到按钮2

  • 选择水平间距


第4步)

  • 选择两个按钮(使用命令)并添加约束等宽


输出值

希望它能对您有所帮助:)


1
高度不应该固定。让视图根据屏幕大小确定按钮的高度。
Kunal Kumar

@KunalKumar在这种情况下,高度是固定的。你能告诉我你的衣服吗?
Vvk '16

@Vvk ... perfect bro :)
Jaywant Khedkar '19

18

iOS9中的堆栈布局可以很好地完成这项工作。将堆栈视图添加到您的视图并进行如下配置:

在此处输入图片说明



0

我的解决方案是

  1. 在两个按钮的中间放一个小视图,使其居中(容器中的水平中心和容器中的垂直中心为0)。
  2. 在小视图中添加高度和宽度。
  3. 添加按钮约束,并将水平空间约束赋予小视图。
  4. 给小视图背景颜色与按钮或视图的颜色相同。

注意:请参见屏幕截图。

在此处输入图片说明

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.