版本記錄
| 版本號 | 時間 |
|---|---|
| V1.0 | 2018.04.29 |
前言
iOS中的視圖加載可以有兩種方式，一種是通過xib加載润讥，另外一種就是通過純代碼加載转锈。它們各有優(yōu)點(diǎn)和好處，xib比較直觀簡單楚殿，代碼比較靈活但是看著很多很亂撮慨，上一家公司主要風(fēng)格就是用純代碼，這一家用的就是xib用的比較多。這幾篇我們就詳細(xì)的介紹一個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)行約束之說明和注意事項（二）
7. xib相關(guān)（七） —— Storyboard中的segue （一）
8. xib相關(guān)（八） —— Size Classes（一）
9. xib相關(guān)（九） —— 幾個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)備
理解幾個屬性
下面看一下基礎(chǔ)準(zhǔn)備。
- Axis表示Stack View的subview是水平排布還是垂直排布猖闪。
- Alignment控制subview對齊方式鲜棠。
- Distribution定義subview的分布方式。
- Spacing 為subview間的最小間距培慌。
你可這樣理解：Alignment 用于控制X 和 Y值岔留，而Distribution 用于控制高度和寬度。另兩個值都會影響對齊检柬。
區(qū)分兩個概念
開始使用Stack View前，我們先看一下它的屬性subViews和arrangedSubvies屬性的不同竖配。如果你想添加一個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í)踐就缆，可以參考下面這兩篇文章帖渠。
這篇根據(jù)那兩篇的指引，做一個這方面的類似的實(shí)踐例子竭宰。
1. 放入兩個stackview
在xib中放入兩個stackview空郊，上邊的是縱向的，下邊的是橫向的切揭。
下面對這兩個stackview進(jìn)行配置狞甚。
設(shè)置上面stackview的約束，如下所示：
接著廓旬，設(shè)置下面stackview的約束哼审，如下所示：
設(shè)置好了下面我們就要往里面添加控件了。
2. 為上面的stackview添加控件
下面我們就為上面的stackview添加控件。從上往下一次放入UILabel棺蛛、UIImageView和UIButton三個控件怔蚌。
添加控件如下所示。
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)行效果
可見下面的圖片被拉伸了。
選擇下面的Stack View终畅，查看Attributes Inspector會看到問題所在籍胯。由于Alignment 和Distribution 都設(shè)置成了Fill，Stack View 拉伸了星星以適應(yīng)其大小离福。
這在添加更多的星星的時候會引起更多問題杖狼。我們希望星星居中顯示，而不是被拉伸來適應(yīng)Stack View的寬度妖爷。
修改Alignment 的值為Center 蝶涩，修改Distribution 的值為Fill Equally。
所以進(jìn)行如下設(shè)置
并添加一句代碼
starImageView.contentMode = UIViewContentModeScaleAspectFit;
下面我們看一下實(shí)際效果
可以看見實(shí)現(xiàn)了自動布局絮识。
4. 減少星星
下面我們就看一下減少星星绿聘。
首先這里涉及到一個stackview的嵌套，上面的垂直的stackview里面只有addStar一個按鈕次舌，這里我們需要在垂直stackview里面熄攘，嵌套一個水平的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一個簡單示例也殖，感興趣的給個贊或者關(guān)注~~~
