ios9之后增加了新的布局神器UIStackView,首先我們先介紹一下UIStackView的常用屬性，然后我們根據(jù)相應(yīng)的demo闡述其在實(shí)際生產(chǎn)中的作用。
UIStackView有兩種形式，一種是橫向布局 Horizontal Stack View，一種是豎向布局 Vertical Stack View。
<b>
Axis</b>通過上圖，我們看到了第一個(gè)屬性
Axis（控制 stackView的布局）,其值分別為Horizontal,Vertical,從字面意思可以看出，兩者主要是控制UIStackView是橫向布局還是縱向布局。<b>
Alignment</b>第二個(gè)屬性
Alignment(控制 stackView中子控件的布局位置)，在不同的布局中其值也是不一樣的，在Axis=Horizontal的時(shí)候，Alignment的值等于Fill, top, center, bottom, first BaseLine, Last BaseLine, 從字面的意思中我們也可以看出來，分別是填充整個(gè)屏幕，頂部對(duì)齊，居中對(duì)齊，底部對(duì)齊，以第一個(gè)元素的BaseLine對(duì)齊，以最后一個(gè)元素的BaseLine對(duì)齊
在
Axis=Vertical的時(shí)候，Alignment的值等于fill, leading, trailing, center,分別為填充，左側(cè)，右邊，居中。效果圖就是橫向布局豎起來就是了，在這里不一一截圖了（有興趣的可以自己試試）<b>
Distribution</b>第三個(gè)屬性
Distribution，其實(shí)它是控制子空間的一些屬性的，其值：Fill Equally 占據(jù)相同空間(按最大者)Fill proportionally 保持比例填充Equal SpacingEqual Centering
拖入兩個(gè) UIView，此時(shí)，我是在 Distribution的選項(xiàng)中，選擇了 fill equal。這時(shí)，拖入的兩個(gè) view均會(huì)布局為自動(dòng)布滿。另外，可以看到，其實(shí)stackView的原理，應(yīng)該是根據(jù) 相關(guān)屬性，然后自動(dòng)添加約束。
因此，在
Distribution中選擇 fill equal和fill proportionally兩個(gè)選項(xiàng)時(shí)，stackView均會(huì)為其自動(dòng)添加約束。等比例的布局，在很多 UI界面上總是可以碰到的。所以這個(gè)還是挺有 實(shí)用性的。至于 Distribution的選項(xiàng)，那么需要為其額外添加一些 高度約束。比如選擇 fill（默認(rèn)），那么需要為其添加 一些高度約束，以確定 控件的大小。比如九宮格布局的話，可以在 vertical stackView中再嵌入三個(gè) horizontal stackView,之后得到九宮格布局。<b>
Spacing</b>第三個(gè)屬性
Spacing, 顧名思義就是子控件之間的簡(jiǎn)介
ok, 基本的屬性我們已經(jīng)介紹到這里了，這時(shí)候，我會(huì)問，在實(shí)際生產(chǎn)中，有何用處呢？下面我們實(shí)現(xiàn)幾個(gè)常用的功能，就知道UIStackView的簡(jiǎn)潔性了。
- 三個(gè)單元格橫向平分整個(gè)屏幕，左右等間距，寬度高度一致
我覺得在我們的實(shí)際生產(chǎn)中，這是最常見的一種布局了。在實(shí)際的生產(chǎn)場(chǎng)景中，我們也許會(huì)選擇UICollectionView,但是總覺得用CollectionView是大材小用了，或者用三個(gè)UIView,增加各種約束來實(shí)現(xiàn)，這也是我們最容易的選擇的方案。我們以第二個(gè)方案為例：
如果我們實(shí)現(xiàn)這樣的布局，首先：
1.相對(duì)于父 view 的約束。如：距離上邊距 10，左邊距 10。
2.相對(duì)于前一個(gè)元素的約束。如：距離上一個(gè)元素 20，距離左邊的元素 5 等。
3.對(duì)齊類約束。如：跟父 view 左對(duì)齊，跟上一個(gè)元素居中對(duì)齊等。
4.相等約束。如：跟父 view等寬高。
這樣的話，我們要寫很多的約束，這是我不喜歡的。
如果用UIStackView就會(huì)簡(jiǎn)單很多了
- 定義
UIStackView的距離父元素的左右間距 - 在
UIStackView中拖入三個(gè)UIView - 設(shè)置
Alignment=fill, Distribution=fill equal（這個(gè)是實(shí)現(xiàn)的重點(diǎn)所在）
解決戰(zhàn)斗。
- 用代碼實(shí)現(xiàn)大眾點(diǎn)評(píng)網(wǎng)中一個(gè)小布局
實(shí)現(xiàn)紅色標(biāo)注的部分
首先需要init UIStackView
UIStackView *stackView = [[UIStackView alloc] init];
設(shè)置屬性
UIStackView *stackView = [[UIStackView alloc] init];
stackView.axis = UILayoutConstraintAxisHorizontal;
stackView.alignment = UIStackViewAlignmentFill;
stackView.spacing = 10;
[stackView setFrame:CGRectMake(10, 150, 300, 74)];
[self.view addSubview:stackView];
添加左側(cè)的圖片
UIImageView *leftImageView = [[UIImageView alloc] init];
[leftImageView setImage:[UIImage imageNamed:@"2.png"]];
[leftImageView setFrame:CGRectMake(10, 10, 100, 74)];
[stackView addArrangedSubview:leftImageView];
當(dāng)把imageView加入到StackView的時(shí)候，不是使用的addSubview而是addArrangedSubview
下面定義右邊的部分，直接上代碼
UIStackView *secondStackView = [[UIStackView alloc] init];
secondStackView.axis = UILayoutConstraintAxisVertical;
secondStackView.alignment = UIStackViewAlignmentFill;
secondStackView.distribution = UIStackViewDistributionFill;
[secondStackView setFrame:CGRectMake(0, 0, 184, 74)];
[stackView addArrangedSubview:secondStackView];
UILabel *lable = [[UILabel alloc] init];
lable.text = @"煲宮(龍陽(yáng)店)";
UIImageView *secondImage = [[UIImageView alloc] init];
[secondImage setImage:[UIImage imageNamed:@"1.png"]];
UILabel *lable2 = [[UILabel alloc] init];
lable2.text = @"世紀(jì)公園 更多火鍋";
[secondStackView addArrangedSubview:lable];
[secondStackView addArrangedSubview:secondImage];
[secondStackView addArrangedSubview:lable2];
[stackView addArrangedSubview:secondStackView];
UIStackView暫時(shí)先介紹到這里。
上面的代碼：https://github.com/BernardChina/UIStackViewDemo.git
請(qǐng)各位看官多多指教，目前代碼有些布局有些小調(diào)整。
