Xcode7提供兩種方式使用UIStackView.你可以從對象庫中拖一個Stack View(水平的/豎直的)放到storyboard的正確位置上.然后你可以托一些label,button,imageView等視圖放到stack view中.另外,你可以在自動布局欄中使用Stack選項.對于這個方式,你可以簡單的選擇兩個或更多的視圖,之后點擊Stack選項,IB將會把這些視圖嵌入到一個stackView中,并自動的調(diào)整.
Demo App
先瞧一眼我們將要構(gòu)建的demo app.在這篇文章中我將會給你展示如何使用stackView布局一個類似的用戶界面:

UIStackView.gif

從對象庫中添加Stack Views
打開Xcode并打開Main.storyboard.從對象庫中拖出水平的stack view放到storyboard中的view controller中.Stack View可以在縱向和橫向布局安排其子視圖.因為我們要布局水平的圖像視圖,所以我們選擇垂直的Stack View.

Stack1.png

接下來,從對象庫中拖出一個圖像視圖,當(dāng)你把圖像視圖放到stack view中,圖像視圖會自動調(diào)整.重復(fù)同樣的操作,添加更多的image view.這就是它神奇的地方: 當(dāng)你添加另一個圖像視圖時,stack view 會自動布局圖像視圖.為你設(shè)置必要的約束.
image view的寬和高分別設(shè)置為寬125,高500

Image.gif

接下來,從對象庫中拖出一個label控件放到剛剛建好的stack view的下方.在屬性控制器中設(shè)置屬性,分別為寬75, 高28, X:29 字體大小為13號.再從對象庫中拖出一個Segmented Control放到label的→_→,,設(shè)置其相關(guān)的屬性.寬477,Segment:5接下來我們將這兩個控件放到一個UIStackView里面,會發(fā)生什么呢?

Distribution.gif

就是這么的神奇,這兩個控件合成一個StackView 接下來我們約束這個StackView就可以了,可以不再約束里面的label和segmented control
同理我們再建一個Alignment的Segmented control.

Stack2.png

然后我們對剛剛我們建的那兩個stack view進(jìn)行簡單的高約束

SegmentedControl.gif

接下來我們選中這三個StackView把這三個放到一個大的StackView中然后我們對這個大的StackView進(jìn)行相應(yīng)的約束就可以了.

約束.gif

Image1.gif

調(diào)整完成之后我們就來實現(xiàn)segmented control的點擊事件,分別拖成屬性和方法去實現(xiàn)代碼部分代碼如下:
//distribution的Segement

• (IBAction)distribution:(id)sender {

  [UIView animateWithDuration:1.0 delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:0.2 options:UIViewAnimationOptionCurveEaseInOut animations:^{

    if (self.distribution.selectedSegmentIndex == 0) {
        self.stackView.distribution = UIStackViewDistributionFill;
    } else if (self.distribution.selectedSegmentIndex == 1) {
        self.stackView.distribution = UIStackViewDistributionFillEqually;
    } else if (self.distribution.selectedSegmentIndex == 2) {
        self.stackView.distribution = UIStackViewDistributionFillProportionally;
    } else if (self.distribution.selectedSegmentIndex == 3) {
        self.stackView.distribution = UIStackViewDistributionEqualSpacing;
    } else if (self.distribution.selectedSegmentIndex == 4) {
        self.stackView.distribution = UIStackViewDistributionEqualCentering;
    }
  

  } completion:^(BOOL finished) {

  }];

}
//alignment的Segement

• (IBAction)alignment:(id)sender {

  [UIView animateWithDuration:1.0 delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:0.2 options:UIViewAnimationOptionCurveEaseInOut animations:^{

    if (self.alignment.selectedSegmentIndex == 0) {
        self.stackView.alignment = UIStackViewAlignmentFill;
    } else if (self.alignment.selectedSegmentIndex == 1) {
        self.stackView.alignment = UIStackViewAlignmentTop;
    } else if (self.alignment.selectedSegmentIndex == 2) {
        self.stackView.alignment = UIStackViewAlignmentCenter;
    } else if (self.alignment.selectedSegmentIndex == 3) {
        self.stackView.alignment = UIStackViewAlignmentBottom;
    }
  

  } completion:^(BOOL finished) {

  }];
  }