版本記錄

前言

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

  • 排列視圖垂直于堆棧視圖的軸的布局。

后記

好幾天沒有更新了，感興趣的給個贊或者關注，繼續支持我，謝謝~~~~