如何在iOS自动布局中为button添加等间距和等宽

在Xcode中,自动布局约束是新的。 我有一个像UITabBar 6 UIButtons底视图。 没有限制,我将这些button与每个button的5个空格填充alignment,每个button都有50个宽度。 现在,我试图通过使用自动布局来支持所有的屏幕尺寸。

在故事板约束中,我为6个button设置了相等的宽度,并在每个button之间创build了60个空间。 我将第一个button0设置为前导空格,并将最后一个button0设置为尾部约束。

我希望所有设备尺寸的视图之间buttons with equal width and flexible spacesbuttons with equal width and flexible spaces

任何人都可以请求帮助我吗? 寻求帮助。 提前致谢。

在这里输入图像说明

检查这个图像,并做出如下约束…

在这里输入图像说明

结果: –以不同尺寸预览

在这里输入图像说明


随着Stackview (iOS 9.0及以上)

在这里输入图像说明

注意:如果你必须为iOS 9开发应用程序,那么UIStackView是另一种select

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

以下逐步使用Storyboard。

  1. 创build6个UIButton和5个UIView 。 水平alignment它们。 给你的意见一些颜色。

在这里输入图像说明

  1. select所有的视图和button,然后点击Stackbutton。 您将在UIStackView中将所有button和彩色视图alignment。

在这里输入图像说明

  1. select你的堆栈视图,进入Utilities面板并selectAttributes Inspector项目。 在那里,点击Distributionbutton,然后select“平等填充”。

在这里输入图像说明

  1. 现在,你的堆栈视图的高度依赖于你的button的内容大小。 如果你没有问题,你可以到第5步。但是,如果需要的话,你可以给你的堆栈视图一个高度限制。 select你的堆栈视图,点击Pinbutton,选中Heightbutton,添加所需的值,然后点击Add 1 Constraintbutton。

在这里输入图像说明

或者,如果您希望堆栈视图的每个元素的高度都与其宽度匹配,请select堆栈视图的第一个button,单击Pinbutton,selectAspect Ratio ,然后单击Add 1 Constraintbutton。

在这里输入图像说明

您可以检查Document outline (左侧面板)中的宽高比约束是否正确,如果需要,可以在“ Attribute inspector (右侧面板)中使用不同的约束条件对其进行更改。

在这里输入图像说明

  1. 现在,是时候给你的堆栈视图提供一些外部约束。 select你的堆栈视图。 点击pinbutton,确保“ Constrain to marginbutton不被select,并将前导,尾部和底部约束设置为零。 确保底部约束与您的视图控制器的视图相关。 然后,将Update Framesbutton更改为“容器中的所有框架”。 你现在可以点击Add 3 Constraintsbutton。

在这里输入图像说明

你的堆栈视图现在被设置。

在这里输入图像说明

进一步说明:

如果你不需要你的彩色视图宽度来匹配你的button宽度,你可以只用UIButtonsbuild立一个堆栈视图,只需在Attribute inspector为你的堆栈视图添加空格。 但是,您将不得不在堆栈视图后面添加背景颜色。 苹果在UIKit框架参考中声明 :

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


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

  • 一个有着色的视图,依靠embedded的UIButton内在的内容大小为其高度,
  • 一个带有彩色视图和UIButton “等宽和高”约束,
  • 一个有色的意见和自己的身高限制,
  • 一个没有彩色的意见,但与间距,embedded彩色视图内。

你可以在这个GitHub仓库中find这个项目。

iOS 9有一个名为UIStackView的新UIKit类。 这是在水平或垂直堆放视图非常有用,就像你想要的方式。 你应该看看这个教程: Raywenderlich:UIStackView教程

select所有button,然后在Xcode的Pin菜单中

  1. 通过select红线到所选视图的右侧最近邻居,从左上angular到右上angular创build一个水平约束
  2. 通过select所选视图的左侧最近邻居的红线,从右上angular视图到左上angular视图创build一个水平约束
  3. 通过select红线到所选视图的顶端最近邻居,从顶视图创build垂直约束
  4. select“高度”,“等宽”旁边的checkbox,然后单击“ 添加22约束