iOS9新特性 - UIStack View

本人錄制技術視訊位址：https://edu.csdn.net/lecturer/1899 歡迎觀看。

在iOS9中，蘋果引進了UIStackView，UIStackView可以友善的在你的應用中進行水準或者豎直方向進行試圖的布局工作。而UIStackView會自動的管理它裡面的子試圖，并且讓他們自動布局，達到自适應UI的分布效果。

UIStackView提供了一個高效的接口用于平鋪一行或一列的視圖組合。對于嵌入到StackView的視圖，你不用再添加自動布局的限制 了。Stack View管理這些子視圖的布局，并幫你自動布局限制。也就是說，這些子視圖能夠适應不同的螢幕尺寸。此外，你可以嵌入一個stack View到另一個stack view中來建立更為複雜的使用者界面。不要誤解我的意思，這并不意味着你就不需要處理自動布局了。你仍舊要定義一些布局限制來限制stack view。它隻是幫你節約了為每個UI元素建立限制的時間，同時它更容易的從布局中添加/删除一個視圖。 

Xcode7提供兩種方式使用UIStackView。

1.  從對象庫中拖一個Stack View（水準的/豎直的）放到storyboard的正确位置上。然後你可以拖一些label，button，imageView等視圖放到stack view中。

2. 自動布局欄中使用Stack選項。對于這個方式，你可以簡單的選擇兩個或更多的視圖，之後點選Stack選項（下圖中紅色标記的地方）,IB将會把這些 視圖嵌入到一個stackview中，并自動的調整。

一旦你添加了stack view，你可以改變一些stack view的屬性來改變它的外觀。

1. Axis選項決定視圖是垂直布置還是水準布置。 

2. Alignment選項控制這些視圖的對齊方式。比如你如果設定成Leading，stack view管理的視圖排列按Leading對齊。

3. Distribution屬性決定了其管理的視圖的大小和位置。預設設定為Fill。這是stack view盡量讓它的所有子視圖在一個合理的距離。

4. Spacing屬性讓你設定視圖之間的間距。

在介紹完畢UIStackView的基本資訊後，我們用一個Demo解釋它的基本使用。你可以在GitHub中下載下傳Demo的源代碼。在分析Demo之前，我們先看看最終的運作效果：

界面中，有4個朋友的頭像及兩個分段控件。這個UI設計使用了自動布局并且适應任何的螢幕尺寸。令人驚訝的是：整個界面的UI設計，自動布局的限制隻要作用與頂層的UIStackView即可。即隻要設定頂層的UIStackView的限制即可，而其内部的相關限制，隻需要設定頂層的UIStackView的屬性或者嵌套UIStackView中的頂層的UIStackView的屬性即可。下圖中就是UI布局結構圖：

然後，我們隻需要設定 "Main Stack View"的限制：

UIStackView有垂直和水準兩個方向的布局模式 (是以拖拽進去的子視圖呈現形式如下)：

現在我們來分析具體的布局：

1. "Person Stack View" 包含四張圖檔，你需要做的僅僅是将四張圖檔拖拽到"Person Stack View" 中，Demo中所使用的圖檔在尺寸上面有輕微的差别。并且我們不希望圖檔出現變形現象，是以應該設定所有圖檔的内容模式為"Aspect Fit"。這就意味着不管圖檔進行怎樣的拉伸操作，圖檔将保持相同的寬高比。

2. "Stack View" 與 "Person Stack View" 是平級的, 它用來包裝 下方的兩個分段控件的區域。當 "Stack View" 與 "Person Stack View" 拖拽到"Main Stack View" 上面之後，我們就可以設定"Main Stack View" 的相關屬性，來調節它内部内容的分布。

Axis設定為"Vertical"： 就是 "Main Stack View" 内部的内容豎直分布； Spacing設定為 8； 就是其内部的内容間距為 8。

3. "Alignment Stack View" 和 "Distribution Stack View" 就是用來存放底部的分段控件及其說明文字的。很顯然，分段控件和其前面的說明文字是水準分布的，是以我們設定"Alignment Stack View" 和 "Distribution Stack View" 的 Axis設定為"Horizontal"。

在布局完成之後，我們添加分段控件的相關事件，進行連線工作，并且添加事件代碼，具體代碼如下：

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIStackView *personStackView;
- (IBAction)changeDistribution:(UISegmentedControl *)sender;
- (IBAction)changeAlignment:(UISegmentedControl *)sender;
@end

@implementation ViewController

- (IBAction)changeDistribution:(UISegmentedControl *)sender {
    NSInteger index = sender.selectedSegmentIndex;
    [UIView animateWithDuration:0.5 animations:^{
        switch (index) {
            case 0:
                self.personStackView.distribution = UIStackViewDistributionFill;
                break;
            case 1:
                self.personStackView.distribution = UIStackViewDistributionFillEqually;
                break;
            case 2:
                self.personStackView.distribution = UIStackViewDistributionFillProportionally;
                break;
            case 3:
                self.personStackView.distribution = UIStackViewDistributionEqualSpacing;
                break;
            case 4:
                self.personStackView.distribution = UIStackViewDistributionEqualCentering;
                break;
            default:
                break;
        }
    }];
}

- (IBAction)changeAlignment:(UISegmentedControl *)sender {
    NSInteger index = sender.selectedSegmentIndex;
    [UIView animateWithDuration:0.5 animations:^{
        switch (index) {
            case 0:
                self.personStackView.alignment = UIStackViewAlignmentFill;
                break;
            case 1:
                self.personStackView.alignment = UIStackViewAlignmentTop;
                break;
            case 2:
                self.personStackView.alignment = UIStackViewAlignmentCenter;
                break;
            case 3:
                self.personStackView.alignment = UIStackViewAlignmentBottom;
                break;
            default:
                break;
        }
    }];
}
@end
           

參考文章：

http://www.open-open.com/lib/view/open1440081657817.html

http://www.csdn.net/article/2015-08-04/2825372/1