通用 Stack 视图布局Common Stack View Layouts
Here are some common approaches for laying out content using stack views.
1. Define the position only. You can define the stack view’s position by pinning two of its adjacent edges to its superview. In this case, the stack view’s size grows freely in both dimensions, based on its arranged views. This approach is particularly useful when you want the stack view’s content to appear at its intrinsic content size, and you want to arrange other user interface elements relative to the stack view.
这有一些通用方法用于 stack 视图。这个清单是要高亮一些有用的示例来显示 stack 视图的灵活性。目前这还不是一个完整的清单。
只是定义位置。你可以通过固定两个与其父视图相邻的边界来定义 stack 视图的位置。在这里，stack 视图的尺寸将根据其管理的视图在两个维度上自由扩展。当你想要 stack 视图的内容展现其原有内容尺寸，和你想要管理其他与 stack 视图有关联的用户接口元素时是特别有用的。
Figure 1 shows a stack view with its leading and top edges pinned to its superview. The labels are first baseline aligned, with an 8-point space between them, left-aligning the stack view’s content in its superview.
举个例子，在 Figure 1中，stack 视图的左边界和上边界都已经相对固定于其父视图。这些标签将根据带有8个点的两者之间的空间作为第一基线校准。这对于相对于其本身左对齐的 stack 视图内容是有效的。
Figure 1.定义位置Defining the position
Define the stack’s size along its axis. In this case, pin both edges of the stack along it’s axis to its superview, defining the stack view’s size in that dimension. You also need to pin one of the other edges to define the stack view’s position. The stack view sizes and positions its content along its axis to fill the defined space; however, the unpinned edge moves freely, based on the size of the largest arranged view.
定义沿着 stack 视图轴向的尺寸。这里，你固定了沿着 stack 视图轴向相对于其父视图的两个边界，定义了 stack 视图沿着其轴向的尺寸。你将需要固定其他边界中的一个来定义 stack 视图的位置。stack 视图将沿着其轴向改变尺寸和位置来填充定义的空间；然而，未固定的边界将根据其管理的最大视图的尺寸自由移动。
Figure 2 shows a stack view with the leading, top, and trailing edges pinned to its superview. Using the UIStackViewDistributionFill distribution causes the content to resize to fill the view’s width, and since the text field has a lower content hugging priority than the label, it is stretched as necessary.
举例如 Figure 2，stack 视图的左、上、右边界都已经相对于其父视图固定了。使用 UIStackViewDistributionFill 分布使得其内容重设尺寸来填充它的宽度，并且从文本框有比标签更低的内容紧凑优先级开始，它将在必要的时候被拉伸。
Figure 2.定义沿着 stack 视图轴向的尺寸Defining the size along the stack view’s axis
Define the stack’s size perpendicular to its axis. This approach is similar to the previous example, but you pin the two edges perpendicular to the stack view’s axis and only one edge along the axis. This lets the stack view grow and shrink along its axis as you add and remove arranged views. Unless you use a UIStackViewDistributionFillEqually distribution, the arranged views are sized according to their intrinsic content size. Perpendicular to the axis, the views are laid out in the defined space based on the stack view’s alignment.
定义垂直于 stack 视图轴向的尺寸。这类似于上一个示例，但是你固定了垂直于 stack 视图轴向的两个边界和沿着轴向的一个边界。这使得 stack 视图在你增加或移除其管理的视图时将沿着其轴向扩展或回缩。除非你使用了 UIStackViewDistributionFillEqually 分布，被管理的视图将根据其原有尺寸调节尺寸。垂直于其轴向的视图将根据其 stack 视图的对其模式在其定义的范围内平铺。
Figure 3 shows a vertical stack containing four labels and a button. The stack uses 8.0 point spacing and the UIStackViewAlignmentCenter alignment. The stack view’s height will grow and shrink as items are added to or removed from the stack.
举例，Figure 3展示了一个包含了四个标签和一个按钮的垂直 stack 视图。这个 stack 视图使用了8个点的间隙和 UIStackViewAlignmentCenter 对齐方式。stack 视图的高度将根据 stack 内部的元素的增减而增大或回缩。
Figure 3.定义垂直于 stack 视图轴向的尺寸
Define the size and position of the stack view. In this case, you pin all four edges of the stack view, causing the stack view to lays out its content within the provided space.
Figure 4 shows a vertical stack view with all four edges pinned to its superview. By using the UIStackViewAlignmentCenter alignment and UIStackViewDistributionFill distribution, the stack view ensures that its content is centered horizontally and vertically fills the screen. However, getting the desired layout with this approach requires a couple of additional steps. By default, the stack view vertically stretches the label and not the image view. To resize the image view, lower its content hugging priority below the label’s content hugging priority. Additionally, to maintain the image view’s aspect ratio as it resizes, set its Mode to Aspect Fit. Adding an equal width constraint between the image view and the stack view helps ensure the image is sized to fill the available space.
同时定义 stack 视图的位置和尺寸。这里你固定了 stack 视图的所有四个边界。stack 视图将在提供的范围之内平铺其内容。举例，Figure 4展示了一个所有四个边界都相对于其父视图固定的垂直 stack 视图。通过使用 UIStackViewAlignmentCenter 对齐方式和 UIStackViewDistributionFill 分布方式，stack 视图确保其内容将水平和垂直居中填充屏幕。然而，获得想要的布局需要两个额外的步骤。默认情况下，stack视图会垂直拉伸标签而不是图片。要缩放图片控件，就要降低其内容紧凑优先级到低于标签。额外的，为了保持图片缩放时的长宽比，你必须设置图片视图的模式为 Aspect Fit。增加一个图片视图与 stack 视图间宽度相等约束将有助于确保图片将被缩放来填充可用范围。
Figure 4.同时定义 stack 视图的位置和尺寸Defining both the size and the position
最近才开始往github上放东西 在公司写的又不能放= = 大家姑且看看吧
github地址: https://github.com/FuThD
466
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
