版本記錄

前言

iOS中的視圖加載可以有兩種方式，一種是通過xib加載，另外一種就是通過純代碼加載。它們各有優(yōu)點(diǎn)和好處，xib比較直觀簡單，代碼比較靈活但是看著很多很亂，上一家公司主要風(fēng)格就是用純代碼，這一家用的就是xib用的比較多。這幾篇我們就詳細(xì)的介紹一個(gè)xib相關(guān)知識。感興趣的可以看上面寫的幾篇。
1. xib相關(guān)（一） —— 基本知識（一）
2. xib相關(guān)（二） —— 文件沖突問題（一）
3. xib相關(guān)（三） —— xib右側(cè)標(biāo)簽介紹（一）
4. xib相關(guān)（四） —— 連線問題（一）
5. xib相關(guān)（五） —— 利用layout進(jìn)行約束之界面（一）
6. xib相關(guān)（六） —— 利用layout進(jìn)行約束之說明和注意事項(xiàng)（二）
7. xib相關(guān)（七） —— Storyboard中的segue （一）
8. xib相關(guān)（八） —— Size Classes（一）
9. xib相關(guān)（九） —— 幾個(gè)IB修飾符（一）
10. xib相關(guān)（十） —— xib的國際化（一）
11. xib相關(guān)（十一） —— xib的高冷用法之修改視圖的圓角半徑、邊框?qū)挾群皖伾ㄒ唬?/a>
12. xib相關(guān)（十二） —— UIStackView之基本介紹（一）
13. xib相關(guān)（十三） —— UIStackView之枚舉UIStackViewDistribution使用（二）
14. xib相關(guān)（十四） —— UIStackView之UIStackViewAlignment使用（三）

回顧

上一篇主要介紹了UIStackView的對齊方式UIStackViewAlignment枚舉，這一篇主要根據(jù)實(shí)際工程實(shí)踐說明UIStackView的使用。

基礎(chǔ)準(zhǔn)備

理解幾個(gè)屬性

下面看一下基礎(chǔ)準(zhǔn)備。

• Axis表示Stack View的subview是水平排布還是垂直排布。
• Alignment控制subview對齊方式。
• Distribution定義subview的分布方式。
• Spacing 為subview間的最小間距。

你可這樣理解：Alignment 用于控制X 和 Y值，而Distribution 用于控制高度和寬度。另兩個(gè)值都會影響對齊。

區(qū)分兩個(gè)概念

開始使用Stack View前，我們先看一下它的屬性subViews和arrangedSubvies屬性的不同。如果你想添加一個(gè)subview給Stack View管理，你應(yīng)該調(diào)用addArrangedSubview:或insertArrangedSubview:atIndex:，arrangedSubviews數(shù)組是subviews屬性的子集。

要移除Stack View管理的subview，需要調(diào)用removeArrangedSubview:和removeFromSuperview。移除arrangedSubview只是確保Stack View不再管理其約束，而非從視圖層次結(jié)構(gòu)中刪除，理解這一點(diǎn)非常重要。

需要注意的是：調(diào)用removeFromSuperview是把subview從視圖層級中移除。調(diào)用removeArrangedSubview只是告訴Stack View不再需要管理subview的約束。而subview會一直保持在視圖層級結(jié)構(gòu)中直到調(diào)用removeFromSuperview把它移除。

工程實(shí)踐

關(guān)于stackview的工程實(shí)踐，可以參考下面這兩篇文章。

• iOS 9: Getting Started with UIStackView

• iOS 9: UIStackView入門

這篇根據(jù)那兩篇的指引，做一個(gè)這方面的類似的實(shí)踐例子。

1. 放入兩個(gè)stackview

在xib中放入兩個(gè)stackview，上邊的是縱向的，下邊的是橫向的。

下面對這兩個(gè)stackview進(jìn)行配置。

垂直stackview

水平stackview

設(shè)置上面stackview的約束，如下所示：

接著，設(shè)置下面stackview的約束，如下所示：

設(shè)置好了下面我們就要往里面添加控件了。

2. 為上面的stackview添加控件

下面我們就為上面的stackview添加控件。從上往下一次放入U(xiǎn)ILabel、UIImageView和UIButton三個(gè)控件。

添加控件如下所示。

3. 增加星星

將addStar按鈕和水平的stackview連線到view中，如下所示。

下面添加代碼

- (IBAction)addStarButtonDidClick:(UIButton *)sender
{
    UIImageView *starImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"star1"]];
    [self.horizontalStackView addArrangedSubview:starImageView];
    [UIView animateWithDuration:0.25 animations:^{
        [self.horizontalStackView layoutIfNeeded];
    }];    
}

下面看一下運(yùn)行效果

運(yùn)行效果

可見下面的圖片被拉伸了。

選擇下面的Stack View，查看Attributes Inspector會看到問題所在。由于Alignment 和Distribution 都設(shè)置成了Fill，Stack View 拉伸了星星以適應(yīng)其大小。

這在添加更多的星星的時(shí)候會引起更多問題。我們希望星星居中顯示，而不是被拉伸來適應(yīng)Stack View的寬度。

修改Alignment 的值為Center ，修改Distribution 的值為Fill Equally。

所以進(jìn)行如下設(shè)置

并添加一句代碼

starImageView.contentMode = UIViewContentModeScaleAspectFit;

下面我們看一下實(shí)際效果

可以看見實(shí)現(xiàn)了自動布局。

4. 減少星星

下面我們就看一下減少星星。

首先這里涉及到一個(gè)stackview的嵌套，上面的垂直的stackview里面只有addStar一個(gè)按鈕，這里我們需要在垂直stackview里面，嵌套一個(gè)水平的stackview，并將addStar和removeStar放在里面。

具體配置如下所示。

下面配置新的stackview如下

下面將Remove Star！按鈕進(jìn)行連線，并添加代碼。

- (IBAction)removeStarButtonDidClick:(UIButton *)sender
{
    UIImageView *starImageView = self.horizontalStackView.arrangedSubviews.lastObject;
    [self.horizontalStackView removeArrangedSubview:starImageView];
    [starImageView removeFromSuperview];
    [UIView animateWithDuration:0.25 animations:^{
        [self.horizontalStackView layoutIfNeeded];
    }];
}

運(yùn)行可以查看效果

可見，這就實(shí)現(xiàn)了簡單的視圖自動布局。

后記

本篇主要介紹了UIStackView一個(gè)簡單示例，感興趣的給個(gè)贊或者關(guān)注~~~