版本记录

前言

iOS中的视图加载可以有两种方式，一种是通过xib加载，另外一种就是通过纯代码加载。它们各有优点和好处，xib比较直观简单，代码比较灵活但是看着很多很乱，上一家公司主要风格就是用纯代码，这一家用的就是xib用的比较多。这几篇我们就详细的介绍一个xib相关知识。感兴趣的可以看上面写的几篇。
1. xib相关（一） —— 基本知识（一）
2. xib相关（二） —— 文件冲突问题（一）
3. xib相关（三） —— xib右侧标签介绍（一）
4. xib相关（四） —— 连线问题（一）
5. xib相关（五） —— 利用layout进行约束之界面（一）
6. xib相关（六） —— 利用layout进行约束之说明和注意事项（二）
7. xib相关（七） —— Storyboard中的segue （一）
8. xib相关（八） —— Size Classes（一）
9. xib相关（九） —— 几个IB修饰符（一）
10. xib相关（十） —— xib的国际化（一）
11. xib相关（十一） —— xib的高冷用法之修改视图的圆角半径、边框宽度和颜色（一）

Overview

一个流线型的界面，用于布置列或行中的视图集合。

UIStackView使您可以利用自动布局的强大功能，创建可动态适应设备方向，屏幕大小和可用空间更改的用户界面。 UIStackView管理其arrangedSubviews
属性中所有视图的布局。 这些视图是根据它们在arrangedSubviews数组中的顺序沿着UIStackView的轴排列的。 确切的布局取决于UIStackView的axis、distribution、alignment、 spacing和其他属性。

要使用stack view，请打开您想要编辑的Storyboard。 从对象库中拖出水平堆栈视图或垂直堆栈视图，并将堆栈视图放置在所需的位置。 接下来，拖出堆栈的内容，将视图或控件放入堆栈。 根据需要，您可以继续将视图和控件添加到stack。Interface Builder根据其内容调整stack大小。 您还可以通过在属性检查器中修改Stack View的属性来调整stack内容的外观。

注意：你负责定义stack view的位置和（可选）大小。 stack view然后管理其内容的布局和大小。

Stack View and Auto Layout - Stack View和自动布局

stack view使用自动布局来定位和调整排列视图的大小。 stack view将第一个和最后一个排列的视图与沿着stack轴的边缘对齐。 在一个水平stack中，这意味着第一个排列的视图的前缘被固定到stack的前缘，最后一个排列的视图的后缘被固定到stack的后缘。 在垂直stack中，顶部和底部边缘分别固定到stack的顶部和底部边缘。 如果将stack视图的layoutMarginsRelativeArrangement 属性设置为YES，则stack view会将其内容固定到相关边距而不是其边缘。

对于除UIStackViewDistributionFillEqually布局之外的所有布局，stack view在计算沿着stack的大小时使用每个排列视图的 intrinsicContentSize属性。 UIStackViewDistributionFillEqually调整所有排列视图的大小，使它们具有相同的大小，沿着它的轴填充stack view。 如果可能的话，stack view会拉伸所有排列的视图，以匹配stack轴上最长固有大小的视图。

对于除UIStackViewAlignmentFill对齐外的所有对齐，当计算垂直于stack view轴的大小时，stack view使用每个排列视图的intrinsicContentSize属性。 UIStackViewAlignmentFill调整所有排列的视图的大小，以便它们垂直于其轴填充stack view。 如果可能，stack view会拉伸所有排列的视图以匹配垂直于stack轴的最大固有尺寸的视图。

Stack view

1. Positioning and Sizing the Stack View - 定位和Stack View视图的尺寸计算

尽管stack view允许您直接使用自动布局来布局其内容，但仍需要使用自动布局来定位stack view。 通常，这意味着钉住堆叠视图的至少两个相邻边缘以定义其位置。 如果没有附加限制，系统将根据其内容计算stack view的大小。

• 沿着stack view的轴，它的装配尺寸等于所有布置的视图的尺寸与视图之间的间隔的总和。

• 垂直于stack view的轴，其适配尺寸等于最大排列视图的尺寸。

• 如果stack view的layoutMarginsRelativeArrangement属性设置为YES，则会增加stack view的适配尺寸以包含边距空间。

您可以提供额外的约束来指定stack view的高度，宽度或两者。 在这些情况下，stack view会调整排列视图的布局和大小以填充指定区域。 确切的布局取决于stack view的属性。 请参阅UIStackViewDistribution和UIStackViewAlignment枚举，以获取关于stack view如何处理具有额外空间或其内容空间不足的完整说明。

您也可以根据第一个或最后一个基线来定位stack view，而不是使用顶部，底部或中心Y位置。 像stack view的适配尺寸，这些基准根据stack view的内容进行计算。

• 水平stack view返回viewForFirstBaselineLayout和viewForLastBaselineLayout方法的最高视图。 如果最高视图也是stack view，则返回在嵌套stack view中调用viewForFirstBaselineLayout或viewForLastBaselineLayout的结果。

• 垂直stack view返回viewForFirstBaselineLayout的第一个排列视图和viewForLastBaselineLayout的最后一个排列视图。 如果这些视图中的任何一个也是stack view视图，则它返回在嵌套stack view堆栈视图上调用viewForFirstBaselineLayout或viewForLastBaselineLayout的结果。

注意：基线对齐仅适用于高度与intrinsic content size的高度相匹配的视图。 如果视图被拉伸或压缩，则基线出现在错误的位置。

2. Common Stack View Layouts - 通用Stack View布局

以下是使用stack views布局内容的一些常用方法。

• Define the position only - 仅定义位置

您可以通过将其两个相邻边钉在其父视图上来定义stack view的位置。 在这种情况下，stack view的大小根据其排列的视图在两个维度上自由增长。 当您希望stack view的内容在intrinsic content size中显示时，并且您希望相对于stack view安排其他用户界面元素时，此方法特别有用。

图3显示了一个stack view，其左边和顶部边缘固定在其父视图上。 label首先是基线对齐的，它们之间有一个8点的空间，在其父视图中，左对齐stack view的内容。

Figure 3 Defining the position

• Define the stack’s size along its axis - 沿轴线定义堆栈尺寸

在这种情况下，将stack的两个边缘沿着它的轴的固定到其父视图，定义该维度中的堆栈视图的大小stack view的size。 您还需要固定其中一个边来定义堆栈视图的位置。 堆栈视图将其内容沿着其轴线调整尺寸并定位以填充定义的空间。但是，基于最大排列视图的尺寸，未固定的边可以自由移动。

图4显示了将左部，顶部和尾部边缘固定到其父视图的堆栈视图。 使用填充布局会导致内容调整大小以填充视图的宽度，并且由于text field的内容hugging的优先级低于label，因此会根据需要进行拉伸。

Figure 4 Defining the size along the stack view’s axis

• Define the stack’s size perpendicular to its axis - 定义垂直于其轴的堆栈尺寸

定义垂直于其轴的堆栈大小。 这种方法与前面的例子类似，但是您将两个边垂直于堆视图的轴并沿着该轴只有一个边。 这样，当您添加和移除排列的视图时，堆栈视图将沿着其轴向增长和缩小。 除非使用fillEqually布局，否则排列的视图将根据其intrinsic content size进行调整。 垂直于轴线，视图根据堆栈视图的对齐方式布置在定义的空间中。

图5显示了一个包含四个标签和一个按钮的垂直堆栈。 该堆栈使用8.0点间距和中心对齐。 随着项目被添加到堆栈或从堆栈移除，堆栈视图的高度将会增大和缩小。

Figure 5 Defining the size perpendicular to the stack view’s axis

• Define the size and position of the stack view - 定义堆栈视图的尺寸和位置

在这种情况下，您将堆栈视图的所有四个边固定起来，使堆栈视图在提供的空间内布局其内容。

图6显示了一个垂直堆栈视图，所有四个边都固定在其父视图上。 通过使用中心对齐和填充布局，堆栈视图确保其内容水平居中并垂直填充屏幕。 但是，使用这种方法获得所需的布局需要一些额外的步骤。 默认情况下，堆栈视图垂直拉伸label而不是imageview。 要调整图像视图的大小，请将其内容hugging优先级降低到标签的内容hugging优先级以下。 此外，为了在调整大小时保持imageview的宽高比，请将其模式Mode设置为Aspect Fit。 在图像视图和堆栈视图之间添加相等宽度的约束有助于确保图像调整大小以填充可用空间。

Figure 6 Defining both the size and the position

Managing the Stack View’s Appearance - 管理堆栈视图的显示

UIStackView是UIView的非渲染视图的子类，也就是说，它不提供任何自己的用户界面。 相反，它只是管理其排列视图的位置和大小。 因此，一些属性（如backgroundColor）对堆栈视图没有影响。 同样，您不能重写layerClass，drawRect:或drawLayer：inContext :。

有许多属性定义了堆栈视图如何布置其内容。

• axis属性可以垂直或水平地确定堆栈的方向。
• distribution属性确定沿堆栈轴布置的视图的布局。
• alignment属性决定垂直于堆栈轴的排列视图的布局。
• spacing属性决定排列视图之间的最小间距。
• baselineRelativeArrangement属性确定是否从基线测量视图之间的垂直间距。
• layoutMarginsRelativeArrangement属性确定堆栈视图是否相对于其布局边距来布置其布局视图。

通常，您使用单个堆栈视图来布置少量项目。 您可以通过在其他堆栈视图内嵌套堆栈视图来构建更复杂的视图层次结构。 例如，图7显示了一个包含两个水平堆栈视图的垂直堆栈视图。 每个水平堆栈视图都包含一个label和一个text field。

您还可以通过向排列的视图添加附加约束来微调排列视图的外观。 例如，您可以使用约束为视图设置最小或最大高度或宽度。 或者您可以为视图定义纵横比。 在布置其内容时，堆栈视图使用这些约束。 例如，在图像视图中有一个宽高比约束，在图像调整大小时强制执行恒定宽高比。

注意：小心避免在向堆栈视图内的视图添加约束时引入冲突。 根据一般经验，如果视图的大小默认返回给定维度的intrinsic content大小，则可以安全地为该维度添加约束。

Maintaining Consistency Between the Arranged Views and Subviews - 保持排列视图和子视图之间的一致性

堆栈视图确保其arrangedSubviews属性始终是其subviews属性的子集。 具体来说，堆栈视图执行以下规则：

• 当堆栈视图将视图添加到其arrangedSubviews数组时，它还将该视图添加为子视图（如果它尚未）。

• 当子视图从堆栈视图中移除时，堆栈视图也会将其从arrangeSubviews数组中移除。

• 从arrangedSubviews数组中移除视图不会将其作为子视图移除。 堆栈视图不再管理视图的大小和位置，但视图仍然是视图层次结构的一部分，并且如果可见，则在屏幕上呈现该视图。

尽管arrangedSubviews数组总是包含subviews数组的子集，但这些数组的顺序保持独立。

• arrangeSubviews数组的顺序定义视图在堆栈中的显示顺序。 对于水平堆栈，视图按阅读顺序排列，较低的索引视图出现在较高的索引视图之前。 例如，英语中的意见按从左到右的顺序排列。 对于垂直堆栈，视图从上到下布置，索引视图下方的索引视图位于较高索引视图之上。

• 子视图数组的顺序定义了子视图的Z顺序。 如果视图重叠，则具有较低索引的子视图出现在具有较高索引的子视图后面。

Dynamically Changing the Stack View’s Content - 动态更改堆栈视图的内容

每当视图添加，删除或插入到arrangeSubviews数组中时，或者每当排列的子视图的隐藏属性发生更改时，堆栈视图都会自动更新其布局。

// Listing 1

// Appears to remove the first arranged view from the stack.
// The view is still inside the stack, it's just no longer visible, and no longer contributes to the layout.
UIView * firstView = self.stackView.arrangedSubviews[0];
firstView.hidden = YES;

堆栈视图也会自动响应对其任何属性的更改。 例如，您可以通过更新堆栈视图的axis属性来动态更改堆栈的方向。

// Listing 2

// Toggle between a vertical and horizontal stack
if (self.stackView.axis == UILayoutConstraintAxisHorizontal) {
    self.stackView.axis = UILayoutConstraintAxisVertical;
}
else {
    self.stackView.axis = UILayoutConstraintAxisHorizontal;
}

您可以为排列的子视图的hidden属性更改进行动画，并通过将这些更改放置在动画块中来更改堆栈视图的属性。

// Listing 3

// Animates removing the first item in the stack.
[UIView animateWithDuration:0.25 animations:^{
    UIView * firstView = self.stackView.arrangedSubviews[0];
    firstView.hidden = YES;
}];

最后，您可以直接在Interface Builder中为许多堆栈视图的属性定义size - class指定的值。 只要堆栈视图的size class发生变化，系统就会自动为这些更改制作动画。

Topics

1. Initializing a Stack View

• - initWithArrangedSubviews:

  • 返回一个新的stack view对象，包含了管理的指定views。

• - initWithFrame:

• - initWithCoder:

2. Managing Arranged Subviews

• - addArrangedSubview:

  • 向arrangedSubviews数组末尾中添加一个view。

• arrangedSubviews

  • stack view管理的views列表。

• - insertArrangedSubview:atIndex:

  • 在数组arrangedSubviews指定index位置处添加指定的view。

• - removeArrangedSubview:

  • 从数组arrangedSubviews中移除指定的view。

3. Configuring The Layout

• alignment

  • 排列的子视图与堆栈视图的轴垂直对齐。

• axis

  • 排列视图布局所沿的轴线。

• baselineRelativeArrangement

  • 一个布尔值，用于确定视图之间的垂直间距是否从其基线测量。

• distribution

  • 排列视图沿堆栈视图轴的分布。

• layoutMarginsRelativeArrangement

  • 一个布尔值，用于确定堆栈视图是否相对于其布局边距布局它的arranged视图。

• spacing

  • 堆栈视图的排列视图的相邻边之间的点数距离。

4. Adding Space Between Items

• - customSpacingAfterView:

  • 返回指定view的自定义间隔。

• - setCustomSpacing:afterView:

  • 在指定的view之后应用自定义间隔。

• UIStackViewSpacingUseDefault

  • 在stackview中子视图的默认间隔。

• UIStackViewSpacingUseSystem

  • 系统定义的相邻view的间隔。

5. Constants

• UIStackViewDistribution

  • 沿着堆栈视图的轴定义排列视图的大小和位置的布局。

• UIStackViewAlignment

  • 排列视图垂直于堆栈视图的轴的布局。

后记

好几天没有更新了，感兴趣的给个赞或者关注，继续支持我，谢谢~~~~