使用自动布局在屏幕上水平均匀分布按钮。它们之间的间距不相等
Evenly spread buttons horizontally across screen using autolayout. Not equal spacing between them
我需要在屏幕上水平布置一系列按钮,以便它们在屏幕上的间距相等,而不是它们之间的间距相等。一个例子是那里有 3 个按钮,它们均匀分布,因此第一个按钮居中于屏幕宽度的 25%,其他按钮居中于屏幕宽度的 50%、75%。
手动将它们放置在 x,y 坐标中相对简单,但我试图避免混合方法。
普遍的建议是在按钮之间使用间隔符 (UIView) 并设置约束以使间隔符相等。如果间隔开的按钮大小可能不同,则此方法不起作用。假设有 3 个标记为 "A"、"B"、"ReallyLong" 的按钮。我仍然希望它们居中,"B" 在屏幕中间。相等的间隔符在它们之间留下相等的间距,但不是均匀分布的按钮。 ReallyLong太占地方,B不居中
您可以创建约束以将按钮的 centerX 与其容器对齐。然后,编辑该约束,使按钮的 centerX 等于容器的 trailing 属性,乘数为 0.25、0.5 或 0.75(以及 0 常量)。为了最自然地做到这一点,您可能需要告诉 Xcode 交换第一项和第二项,以便 Button.CenterX 等于 Superview.Trailing(带乘数)而不是相反。
我想我解决了。通过在每个按钮之间插入垫片并将垫片宽度设置为相等,我早些时候能够在按钮之间获得均匀的空间。另外就是还要指定按钮宽度相等。这似乎运作良好。所有文本都在适当的位置居中。
对于 3 个按钮,这是一个似乎可以做到的视觉约束。
Constraint = "H:|[spacer0(>=0)][button0][spacer1(==spacer0)][button1(==button0)][spacer2(==spacer0)][button2(==button0)][spacer3(==spacer0)]|"
上面的文字看起来像这样,这正是我要找的。中间按钮居中,右边按钮居中在屏幕右三分之一处:
Apple解释的真好。
在视图之间创建相等的间距
要根据设备的方向布置多个按比例间隔的视图,请在可见视图之间创建间隔视图。正确设置这些间隔视图的约束,以确保可见视图能够根据设备的方向保持间隔。
以下示例 使用上述任务中的步骤来展示如何按比例间隔放置两个视图。间隔视图已为该示例进行了注释,但通常留空且没有背景。首先,创建两个视图并将它们放在故事板中。
添加三个间隔视图——一个在最左侧视图的左侧,一个在两个视图之间,一个在最右侧视图的右侧。此时间隔视图不必具有相同的大小,因为它们的大小将通过约束设置。
为间隔视图创建以下约束:
约束间隔视图2和间隔视图3的宽度等于
间隔视图 1.
的宽度
约束间隔视图1的宽度大于等于
所需的最小宽度。
创建从间隔视图 1 到容器约束的前导 Space
容器。
创建从间隔视图 1 到视图 1 的水平间距约束。
使用
将此约束设置为小于或等于约束
优先级 1000.
创建从间隔视图 2 到视图 1 的水平间距约束
和视图 2. 将这些约束设置为小于或等于
优先级为 999 的约束。
创建从间隔视图 3 到视图 2 的水平间距约束。
使用
将此约束设置为小于或等于约束
优先级 1000.
创建从间隔视图 3 到容器约束的尾随 Space
容器。
这些约束创建了两个可见视图和三个不可见视图(间隔视图)。这些间隔视图会随着设备方向的变化自动调整大小,保持可见视图按比例间隔,如下两图所示:
我需要在屏幕上水平布置一系列按钮,以便它们在屏幕上的间距相等,而不是它们之间的间距相等。一个例子是那里有 3 个按钮,它们均匀分布,因此第一个按钮居中于屏幕宽度的 25%,其他按钮居中于屏幕宽度的 50%、75%。
手动将它们放置在 x,y 坐标中相对简单,但我试图避免混合方法。
普遍的建议是在按钮之间使用间隔符 (UIView) 并设置约束以使间隔符相等。如果间隔开的按钮大小可能不同,则此方法不起作用。假设有 3 个标记为 "A"、"B"、"ReallyLong" 的按钮。我仍然希望它们居中,"B" 在屏幕中间。相等的间隔符在它们之间留下相等的间距,但不是均匀分布的按钮。 ReallyLong太占地方,B不居中
您可以创建约束以将按钮的 centerX 与其容器对齐。然后,编辑该约束,使按钮的 centerX 等于容器的 trailing 属性,乘数为 0.25、0.5 或 0.75(以及 0 常量)。为了最自然地做到这一点,您可能需要告诉 Xcode 交换第一项和第二项,以便 Button.CenterX 等于 Superview.Trailing(带乘数)而不是相反。
我想我解决了。通过在每个按钮之间插入垫片并将垫片宽度设置为相等,我早些时候能够在按钮之间获得均匀的空间。另外就是还要指定按钮宽度相等。这似乎运作良好。所有文本都在适当的位置居中。
对于 3 个按钮,这是一个似乎可以做到的视觉约束。
Constraint = "H:|[spacer0(>=0)][button0][spacer1(==spacer0)][button1(==button0)][spacer2(==spacer0)][button2(==button0)][spacer3(==spacer0)]|"
上面的文字看起来像这样,这正是我要找的。中间按钮居中,右边按钮居中在屏幕右三分之一处:
Apple解释的真好。
在视图之间创建相等的间距
要根据设备的方向布置多个按比例间隔的视图,请在可见视图之间创建间隔视图。正确设置这些间隔视图的约束,以确保可见视图能够根据设备的方向保持间隔。
以下示例 使用上述任务中的步骤来展示如何按比例间隔放置两个视图。间隔视图已为该示例进行了注释,但通常留空且没有背景。首先,创建两个视图并将它们放在故事板中。
添加三个间隔视图——一个在最左侧视图的左侧,一个在两个视图之间,一个在最右侧视图的右侧。此时间隔视图不必具有相同的大小,因为它们的大小将通过约束设置。
为间隔视图创建以下约束:
约束间隔视图2和间隔视图3的宽度等于 间隔视图 1.
的宽度
约束间隔视图1的宽度大于等于
所需的最小宽度。创建从间隔视图 1 到容器约束的前导 Space 容器。
创建从间隔视图 1 到视图 1 的水平间距约束。 使用
将此约束设置为小于或等于约束 优先级 1000.创建从间隔视图 2 到视图 1 的水平间距约束
和视图 2. 将这些约束设置为小于或等于
优先级为 999 的约束。创建从间隔视图 3 到视图 2 的水平间距约束。 使用
将此约束设置为小于或等于约束 优先级 1000.创建从间隔视图 3 到容器约束的尾随 Space 容器。
这些约束创建了两个可见视图和三个不可见视图(间隔视图)。这些间隔视图会随着设备方向的变化自动调整大小,保持可见视图按比例间隔,如下两图所示: