如何在iOS Auto布局中为按钮添加Equal Spacing和相等宽度

Question

我对Xcode中的Auto布局约束不熟悉.我有一个像UITabBar6的底部视图UIButtons.在没有约束的情况下,我将这些按钮与每个按钮的5个空格填充对齐,每个按钮的宽度为50.现在,我试图通过使用自动布局来支持所有屏幕尺寸.

在Storyboard约束中,我为6个按钮设置了相等的宽度,每个按钮之间有60个空格.我将第一个按钮0设置为前导空格,然后将最后一个按钮0设置为尾部约束.

我想要buttons with equal width and flexible spaces所有设备尺寸的视图之间.

有人可以帮我吗？寻求帮助.提前致谢.

Answer 1

检查此图像,并使您的约束如下...

结果: -以不同尺寸预览

使用Stackview(适用于iOS 9.0及更高版本)

注意:如果您必须为iOS 9及更高版本制作应用程序,那么这UIStackView是另一种选择

Answer 2

使用iOS 9和Xcode 7,您现在可以获得预期的结果,UIStackView并且只有3或4个自动布局约束.

以下逐步使用Storyboard.

1. 创建6 UIButton秒和5 UIView秒.水平对齐它们.为您的观点添加一些颜色.

2. 选择所有视图和按钮,然后单击Stack按钮.您将所有按钮和彩色视图对齐UIStackView.

3. 选择堆栈视图,转到Utilities面板并选择Attributes Inspector项目.在那里,单击Distribution按钮并选择"同等填充".

4. 目前,您的堆栈视图的高度取决于您的按钮内在内容大小.如果你对它很好,你可以转到第5步.但是,如果需要,你可以给你的堆栈视图一个高度约束.选择堆栈视图,单击Pin按钮,选中Height按钮,添加所需的值,然后单击Add 1 Constraint按钮.

或者,如果希望堆栈视图的每个元素的高度与其宽度相匹配,请选择堆栈视图的第一个按钮,单击Pin按钮,选择Aspect Ratio并单击Add 1 Constraint按钮.

您可以在Document outline(左侧面板)中检查宽高比约束是否正确,如果需要,可以在Attribute inspector(右侧面板)中使用不同的约束更改它.

5. 现在,是时候给堆栈视图提供一些外部约束了.选择堆栈视图.单击pin按钮,确保Constrain to margin未选择按钮并将前导,尾随和底部约束设置为零.确保底部约束与视图控制器的视图相关.然后,将Update Frames按钮更改为"容器中的所有帧".您现在可以单击Add 3 Constraints按钮.

您的堆栈视图现已设置.

进一步说:

如果您不需要彩色视图宽度来匹配按钮宽度,则只需构建一个堆栈视图,UIButtons只需在堆栈视图中添加间距即可Attribute inspector.但是,您必须找到一种在堆栈视图后面添加背景颜色的方法.Apple在UIKit框架参考中说明了这一点:

UIStackView是UIView的非渲染子类.它不提供自己的任何用户界面.相反,它只管理其排列视图的位置和大小.因此,某些属性(如backgroundColor)对堆栈视图没有影响.

我用4种不同的堆栈视图构建了一个Xcode项目:

• 一个有彩色视图并依赖嵌入式UIButton内在尺寸的高度,
• 一个有彩色视图和UIButton"相等的宽度和高度"约束,
• 一个有彩色视图和自己的高度约束,
• 一个没有彩色视图但有间距并嵌入彩色视图内.

你可以在这个GitHub仓库找到这个项目.