iOS Autolayout:两个等宽的按钮并排

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/28148843/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-31 04:30:45  来源:igfitidea点击:

iOS Autolayout: two buttons of equal width, side by side

iosiphonexcodeautolayout

提问by Scratcha

I am currently having difficulty with AutoLayout. I am using interface builder and am trying to position two buttons of equal width side by side as illustrated in the following image.

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

objective layout

客观布局

From the following Preview image, my titleImage has been properly constrained and is displaying correctly however the buttons are not. I have experimented by aligning button 1 with the leading edge of titleImage, and button2 with the trailing edge of titleImage, however the width distribution between the two buttons becomes skewed at this point, as demonstrated below.

从下面的预览图像中,我的 titleImage 已被正确约束并正确显示,但按钮不是。我已经尝试将按钮 1 与 titleImage 的前缘对齐,将按钮 2 与 titleImage 的后缘对齐,但是此时两个按钮之间的宽度分布变得倾斜,如下所示。

problem scenario

问题场景

My objective is to understand what constraints are missing and should be applied to the two buttons to maintain equal widths regardless of device. If possible I would like to achieve this through interface builder as opposed to additional code.

我的目标是了解缺少哪些约束并且应该应用于两个按钮以保持相等的宽度,而不管设备如何。如果可能的话,我想通过界面构建​​器而不是附加代码来实现这一点。

回答by Abubakr Dar

Add the following constraints

添加以下约束

  1. Assign equal width from button1 to button2.
  2. Assign horizontal spacing between both buttons.
  3. Assign leading space from button1 to its superview.
  4. Assign trailing space from button2 to its superview.
  5. Assign top space to both the buttons.
    Let me know if it works for you.
  1. 从按钮 1 到按钮 2 分配相等的宽度。
  2. 在两个按钮之间分配水平间距。
  3. 将 button1 的前导空间分配给它的超级视图。
  4. 将 button2 的尾随空间分配给它的超级视图。
  5. 为两个按钮分配顶部空间。
    请让我知道这对你有没有用。

回答by Vvk

Follow Steps and Screenshots for easy solution

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



Step-1)

第1步)

  • For Button 1 : Set Constraints:(1)Leading, (2)Top or Bottom asper your need, (3)Height
  • 对于按钮 1:设置约束:(1)领先,(2)顶部或底部根据您的需要,(3)高度



Step-2)

第2步)

  • For Button 2 : Set Constraints:(1)Trailing,(2)Top or Bottom asper your need, (3)Height
  • 对于按钮 2 :设置约束:(1)尾随,(2)顶部或底部根据您的需要,(3)高度

Step-3)

步骤 3)

  • Press Ctrl + Drag From Button 1 to Button 2
  • 按 Ctrl + 从按钮 1 拖动到按钮 2

  • Select Horizontal Spacing
  • 选择水平间距



Step-4)

第四步)

  • Select Both Button (using Command) and Add Constraints Equal Width
  • 选择两个按钮(使用命令)并添加约束等宽



OUTPUT

输出

Hope it Helps you :)

希望对你有帮助:)

回答by Ben

Stack layout in iOS9, will do the job really nice. Add stack view to your view and configure as follow:

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

enter image description here

在此处输入图片说明

回答by Vitaliy Gozhenko

You can check my example - you can easy aim this, by using proportional constraint. Also you can easy aim proportional multiple UIViews. Please look attached example

您可以查看我的示例 - 通过使用比例约束,您可以轻松实现这一目标。您也可以轻松瞄准成比例的多个 UIView。请看附件示例

https://dl.dropboxusercontent.com/u/48223929/TestViewController.xib

https://dl.dropboxusercontent.com/u/48223929/TestViewController.xib

回答by A.G

My solution is to

我的解决办法是

  1. Put a small view in the middle of two buttons and make it centre(Horizontal centre in container and vertical centre in contener as 0).
  2. Add height and width to the small view.
  3. Add buttons the constraints and give horizontal space constraints to small view.
  4. Give the small view background colour same as buttons or View's colour.
  1. 在两个按钮的中间放一个小视图并使其居中(容器中的水平中心和容器中的垂直中心为0)。
  2. 为小视图添加高度和宽度。
  3. 添加按钮约束并为小视图提供水平空间约束。
  4. 给小视图背景颜色与按钮或视图的颜色相同。

Note:See the Screenshot.

注意:请参阅屏幕截图。

enter image description here

在此处输入图片说明