ios9之后增加了新的布局神器UIStackView,首先我們先介紹一下UIStackView的常用屬性翰蠢，然后我們根據(jù)相應(yīng)的demo闡述其在實(shí)際生產(chǎn)中的作用芋绸。
UIStackView有兩種形式，一種是橫向布局 Horizontal Stack View迁客，一種是豎向布局 Vertical Stack View郭宝。

Paste_Image.png

fill.png

top.png

center.png

bottom.png

?first-baseline.png

last-baseline.png

拖入兩個(gè) UIView霸妹，此時(shí)十电，我是在 Distribution的選項(xiàng)中，選擇了 fill equal叹螟。這時(shí)鹃骂，拖入的兩個(gè) view均會(huì)布局為自動(dòng)布滿(mǎn)。另外罢绽，可以看到畏线，其實(shí)stackView的原理，應(yīng)該是根據(jù) 相關(guān)屬性良价，然后自動(dòng)添加約束寝殴。

Paste_Image.png

Spacing.png

ok, 基本的屬性我們已經(jīng)介紹到這里了，這時(shí)候拒秘，我會(huì)問(wèn)号显，在實(shí)際生產(chǎn)中，有何用處呢躺酒？下面我們實(shí)現(xiàn)幾個(gè)常用的功能押蚤，就知道UIStackView的簡(jiǎn)潔性了。

1. 三個(gè)單元格橫向平分整個(gè)屏幕羹应，左右等間距揽碘，寬度高度一致

Paste_Image.png

我覺(jué)得在我們的實(shí)際生產(chǎn)中，這是最常見(jiàn)的一種布局了园匹。在實(shí)際的生產(chǎn)場(chǎng)景中雳刺，我們也許會(huì)選擇UICollectionView,但是總覺(jué)得用CollectionView是大材小用了，或者用三個(gè)UIView,增加各種約束來(lái)實(shí)現(xiàn)裸违，這也是我們最容易的選擇的方案掖桦。我們以第二個(gè)方案為例：
如果我們實(shí)現(xiàn)這樣的布局，首先：
1.相對(duì)于父 view 的約束供汛。如：距離上邊距 10枪汪，左邊距 10。
2.相對(duì)于前一個(gè)元素的約束怔昨。如：距離上一個(gè)元素 20雀久，距離左邊的元素 5 等。
3.對(duì)齊類(lèi)約束朱监。如：跟父 view 左對(duì)齊，跟上一個(gè)元素居中對(duì)齊等原叮。
4.相等約束赫编。如：跟父 view等寬高。
這樣的話(huà)奋隶，我們要寫(xiě)很多的約束擂送，這是我不喜歡的。
如果用UIStackView就會(huì)簡(jiǎn)單很多了

1. 定義UIStackView的距離父元素的左右間距
2. 在UIStackView中拖入三個(gè)UIView
3. 設(shè)置Alignment=fill, Distribution=fill equal（這個(gè)是實(shí)現(xiàn)的重點(diǎn)所在）
   解決戰(zhàn)斗唯欣。

代碼地址：https://github.com/BernardChina/UIStackViewDemo.git

2. 用代碼實(shí)現(xiàn)大眾點(diǎn)評(píng)網(wǎng)中一個(gè)小布局

Paste_Image.png

實(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)整碰纬。