如何在 iOS 自动布局中为按钮添加等距和等宽
How to add Equal Spacing and equal width for button in iOS Auto layout
我是 Xcode 中的自动布局约束的新手。我有一个底部视图，例如 UITabBar 和 6 个 UIButtons。在没有约束的情况下，我将这些按钮与每个按钮的 5 space 填充对齐，每个按钮的宽度为 50。
现在，我试图通过使用自动布局来支持所有屏幕尺寸来实现它。
In Storyboard constrains I set equal width for 6 buttons and I made 60
space between each buttons. I set first button 0 to leading space and
I set the last button 0 to tail constraints.
我想要 buttons with equal width and flexible spaces 在所有设备尺寸的视图之间。
谁能帮帮我？寻求帮助。提前致谢。
检查这张图片并像下面这样设置你的约束...
结果：- 不同尺寸的预览
使用 Stackview（对于 iOS 9.0 及更高版本）
NOTE: If you have to make app for iOS 9 and later then UIStackView is another option for you
Select 所有按钮和 Xcode 的 Pin 菜单
- 通过选择到所选视图右侧最近邻居的红线，创建从左上视图到右上视图的水平约束
- 通过选择到所选视图左侧最近邻居的红线，创建从右上视图到左上视图的水平约束
- 通过选择红线到所选视图的顶侧最近邻居，从顶视图创建垂直约束
- Select 复选框靠近“高度”、“等宽”，然后单击“添加 22 个约束”
iOS 9 有一个名为 UIStackView 的新 UIKit class。这对于按照您想要的方式水平或垂直堆叠视图非常有帮助。您应该查看本教程：Raywenderlich: UIStackView Tutorial
使用 iOS 9 和 Xcode 7，您现在可以使用 UIStackView 和仅 3 或 4 个自动布局约束获得预期结果。
下面一步步使用 Storyboard。
- 创建 6 个
UIButton 和 5 个 UIView。水平对齐它们。为您的观点增添色彩。
- Select 您所有的视图和按钮，然后单击
Stack 按钮。您将所有按钮和彩色视图对齐 UIStackView。
- Select 您的堆栈视图，转到
Utilities 面板和 select Attributes Inspector 项目。在那里，单击 Distribution 按钮和 select "Fill Equally"。
- 目前，堆栈视图的高度取决于按钮的固有内容大小。如果你觉得没问题，你可以转到第 5 步。但是，如果需要，你可以给你的堆栈视图一个高度限制。 Select 您的堆栈视图，单击
Pin 按钮，选中 Height 按钮，添加所需的值并单击 Add 1 Constraint 按钮。
作为替代方案，如果您希望堆栈视图的每个元素的高度与其宽度相匹配，select堆栈视图的第一个按钮，单击 Pin 按钮，select Aspect Ratio 然后点击 Add 1 Constraint 按钮。
您可以在 Document outline（左面板）中检查纵横比约束是否正确，如果需要，您可以在 Attribute inspector（右面板）中使用不同的约束来更改它).
- 现在，是时候为您的堆栈视图提供一些外部约束了。 Select 你的堆栈视图。单击
pin 按钮，确保 Constrain to margin 按钮不是 select 并将前导、尾随和底部约束设置为零。确保底部约束与视图控制器的视图相关。然后，将 Update Frames 按钮更改为 "All Frames in Container"。您现在可以单击 Add 3 Constraints 按钮。
您的堆栈视图现已设置。
进一步说明：
如果您不需要彩色视图宽度与按钮宽度相匹配，您可以仅使用 UIButtons 构建堆栈视图，并在 Attribute inspector 中简单地向堆栈视图添加间距。但是，您必须找到一种方法在堆栈视图后面添加背景颜色。 Apple 在 UIKit Framework Reference:
中对此进行了说明
The UIStackView is a nonrendering subclass of UIView. It does not
provide any user interface of its own. Instead, it just manages the
position and size of its arranged views. As a result, some properties
(like backgroundColor) have no affect on the stack view.
我用 4 个不同的堆栈视图构建了一个 Xcode 项目：
- 具有彩色视图并依赖于嵌入的
UIButton 其高度的内在内容大小，
- 有彩色视图和
UIButton "equal width and height" 约束，
- 一个有彩色视图并有自己的高度限制，
- 一个没有彩色视图但有间距并嵌入彩色视图中。
你可以在这个GitHub repo上找到这个项目。
不再需要间隔视图，除非您需要 space 边框。
您可以创建一个具有相等间距的 StackView，它将动态调整您的堆栈视图之间的 space 以用尽所有可用的 space，而不改变您的子视图的大小。
界面生成器在这里可能有点误导。您为间距输入的值是所需的最小间距，而不是实际间距。
StackView 将处理您的间距，使您的按钮大小相等，您可以使用常规约束。
我是 Xcode 中的自动布局约束的新手。我有一个底部视图，例如 UITabBar 和 6 个 UIButtons。在没有约束的情况下，我将这些按钮与每个按钮的 5 space 填充对齐，每个按钮的宽度为 50。
现在，我试图通过使用自动布局来支持所有屏幕尺寸来实现它。
In Storyboard constrains I set equal width for 6 buttons and I made 60 space between each buttons. I set first button 0 to leading space and I set the last button 0 to tail constraints.
我想要 buttons with equal width and flexible spaces 在所有设备尺寸的视图之间。
谁能帮帮我？寻求帮助。提前致谢。
检查这张图片并像下面这样设置你的约束...
结果：- 不同尺寸的预览
使用 Stackview（对于 iOS 9.0 及更高版本）
NOTE: If you have to make app for iOS 9 and later then
UIStackViewis another option for you
Select 所有按钮和 Xcode 的 Pin 菜单
- 通过选择到所选视图右侧最近邻居的红线，创建从左上视图到右上视图的水平约束
- 通过选择到所选视图左侧最近邻居的红线，创建从右上视图到左上视图的水平约束
- 通过选择红线到所选视图的顶侧最近邻居，从顶视图创建垂直约束
- Select 复选框靠近“高度”、“等宽”，然后单击“添加 22 个约束”
iOS 9 有一个名为 UIStackView 的新 UIKit class。这对于按照您想要的方式水平或垂直堆叠视图非常有帮助。您应该查看本教程：Raywenderlich: UIStackView Tutorial
使用 iOS 9 和 Xcode 7，您现在可以使用 UIStackView 和仅 3 或 4 个自动布局约束获得预期结果。
下面一步步使用 Storyboard。
- 创建 6 个
UIButton和 5 个UIView。水平对齐它们。为您的观点增添色彩。
- Select 您所有的视图和按钮，然后单击
Stack按钮。您将所有按钮和彩色视图对齐UIStackView。
- Select 您的堆栈视图，转到
Utilities面板和 selectAttributes Inspector项目。在那里，单击Distribution按钮和 select "Fill Equally"。
- 目前，堆栈视图的高度取决于按钮的固有内容大小。如果你觉得没问题，你可以转到第 5 步。但是，如果需要，你可以给你的堆栈视图一个高度限制。 Select 您的堆栈视图，单击
Pin按钮，选中Height按钮，添加所需的值并单击Add 1 Constraint按钮。
作为替代方案，如果您希望堆栈视图的每个元素的高度与其宽度相匹配，select堆栈视图的第一个按钮，单击 Pin 按钮，select Aspect Ratio 然后点击 Add 1 Constraint 按钮。
您可以在 Document outline（左面板）中检查纵横比约束是否正确，如果需要，您可以在 Attribute inspector（右面板）中使用不同的约束来更改它).
- 现在，是时候为您的堆栈视图提供一些外部约束了。 Select 你的堆栈视图。单击
pin按钮，确保Constrain to margin按钮不是 select 并将前导、尾随和底部约束设置为零。确保底部约束与视图控制器的视图相关。然后，将Update Frames按钮更改为 "All Frames in Container"。您现在可以单击Add 3 Constraints按钮。
您的堆栈视图现已设置。
进一步说明：
如果您不需要彩色视图宽度与按钮宽度相匹配，您可以仅使用 UIButtons 构建堆栈视图，并在 Attribute inspector 中简单地向堆栈视图添加间距。但是，您必须找到一种方法在堆栈视图后面添加背景颜色。 Apple 在 UIKit Framework Reference:
The UIStackView is a nonrendering subclass of UIView. It does not provide any user interface of its own. Instead, it just manages the position and size of its arranged views. As a result, some properties (like backgroundColor) have no affect on the stack view.
我用 4 个不同的堆栈视图构建了一个 Xcode 项目：
- 具有彩色视图并依赖于嵌入的
UIButton其高度的内在内容大小， - 有彩色视图和
UIButton"equal width and height" 约束， - 一个有彩色视图并有自己的高度限制，
- 一个没有彩色视图但有间距并嵌入彩色视图中。
你可以在这个GitHub repo上找到这个项目。
不再需要间隔视图，除非您需要 space 边框。
您可以创建一个具有相等间距的 StackView，它将动态调整您的堆栈视图之间的 space 以用尽所有可用的 space，而不改变您的子视图的大小。
界面生成器在这里可能有点误导。您为间距输入的值是所需的最小间距，而不是实际间距。
StackView 将处理您的间距，使您的按钮大小相等，您可以使用常规约束。