我希望两个按钮具有相同的宽度,并使用自动布局从屏幕顶部按比例放置所有屏幕尺寸?

时间:2016-09-08 07:06:50

标签: ios autolayout nslayoutconstraint ios-autolayout

附加我计划设计的视图。我想将按钮放在Superview上,它们的宽度和高度必须与屏幕尺寸成比例增加,而不是保持固定。

附加屏幕预览:

enter image description here

6 个答案:

答案 0 :(得分:2)

这只是一行按钮的示例,因此它们可以重复用于其他UI元素。

将这些约束放在按钮上:

LEFT BUTTON:

  • 左前导约束
  • 最高领先约束
  • 身高约束

右键按钮

  • 右尾随约束
  • 最高领先约束
  • 身高约束

与两个按钮相关的约束: (您需要选择两个按钮才能应用关系约束)

  • 按钮之间的间距约束
  • 这些按钮的宽度相等

Interface Builder 中,它看起来像这样:

enter image description here

这些布局是通用,因此我选择了一些设备尺寸:

iPhone 5 enter image description here

iPhone 6 enter image description here

iPhone 6 Plus enter image description here

......等等。

答案 1 :(得分:0)

对于左按钮:

  1. 视图顶部的最高约束
  2. 来自视图左边缘的左约束
  3. 高度限制
  4. 右键约束右键 - >那将是0
  5. 对于右键:

    1. 视图顶部的最高约束
    2. 来自视图右边缘的右边约束
    3. 高度限制
    4. 左侧约束到右侧按钮 - >那将是0

答案 2 :(得分:0)

您可以尝试使用Xcode7支持的StackView功能,看一下本教程。 StackView Sample

答案 3 :(得分:0)

我的答案有点不同。除非特别要求,否则我不想使用尺寸等级。现在根据您的要求,我将禁用大小类,我将添加如下的约束。

我将在名为SpacerView的按钮上方的superview中添加一个清晰的颜色alpha 0 UIView

SpacerView -

1)导致superView - 0 - 用于SpacerView的对齐

2)追踪到superView - 0 - 用于SpacerView的对齐

3)顶级到superView - 0 - 用于SpacerView的对齐

4)SuperView的比例高度 - 用于SpacerView的动态尺寸高度

按钮1 -

1)导致超级视图 - 0 - 用于按钮1的对齐

2)跟踪按钮2 - 0 - 用于按钮1和按钮2的对齐

3)超视图的比例高度 - 40:568 - 按钮1的动态尺寸高度

4)按钮2的宽度相等 - 0 - 按钮2的宽度大小等于按钮1

5)按钮2的相等高度 - 0 - 用于按钮2的高度大小等于按钮1

6)SpacerView的顶部 - 0 - 用于按钮1的对齐

7)中心Y到按钮2 - 0 - 用于按钮2的对齐等于按钮1

按钮2 -

1)追踪到superView - 用于按钮2的对齐

根据您的要求,这里甚至没有一个额外的约束。如果您还有问题,我可以寄给您一个测试库,我将为您的理解。

答案 4 :(得分:0)

步骤 1.并排取两个按钮。 2.为左按钮前导,顶部到superview提供约束。 3.选择左键的高度。 3.按控制键将光标从左键拖动到右键,选择水平间距(选择两个键之间的空格) 4.给右侧按钮顶部约束,跟踪到superview。 5.选择右按钮的高度。 6.现在按下命令,选择两个按钮并查看右侧下方的引脚选项,选择相等的宽度。 7.如果显示某些警告意味着没有问题,请单击删除该警告。

答案 5 :(得分:0)

我找到了解决方案。以下是我提供的限制

LEFT BUTTON:

1.左前导约束 2.最高领先约束

右键按钮

1.right尾随约束 2.top主要约束

两者共同

1.等高度约束 2.Equal宽度约束

根据超视图按比例增加高度我从两个按钮添加宽高比约束到超视图高度为0.6的按钮高度。