簡便的自動布局，對UIStackView的個人理解！

 

---

 

序言：

　　更新了很久的Linux，我怕朋友們都視覺疲勞了，今天就更新在學ios開發時候，對一些知識點的理解。希望各位會喜歡！　　

正文：

　　UIStackView 類提供了一個高效的接口用於平鋪一行或一列的視圖組合，stackView提供了高效的單行單列自動布局的手段，一般情況下，我們不需要對stackView.subviews做任何約束，只需要通過對stackView的axis, distribution, alignment, spacing屬性進行修改；

• axis(軸向) 屬性決定了 stack 的朝向，只有垂直或水平；
• distribution(分布) 屬性決定了其管理的視圖在沿着其軸向上的布局；

• Fill : 鋪滿
  Fill Equal ： 等寬鋪滿
  Fill Proportionally : 等比例鋪滿
  Equal Spacing ：等距離放置
  Equal Centering ：各個試圖的中心距離保持一致，不夠放置則壓縮后面的試圖距離；

• alignment(對齊) 屬性決定了其管理的視圖在垂直於其軸向上的布局；

• Fill : 垂直方向上鋪滿
  Top : 沿頂端對齊
  Center : 沿中心線對其
  Bottom : 沿底部對齊
  First Baseline : 按照第一個子視圖的文字的第一行對齊，同時保證高度最大的子視圖底部對齊（只在axis為水平方向有效）
  Last Baseline : 按照最后一個子視圖的文字的最后一行對齊，同時保證高度最大的子視圖頂部對齊（只在axis為水平方向有效）

• spacing(空隙) 屬性決定了其管理的視圖間的最小間隙；
• baselineRelativeArrangement 屬性決定了其視圖間的垂直間隙是否根據基線測量得到，選中 Baseline Relative 將根據subview的基線調整垂直間距；
• layoutMarginsRelativeArrangement 屬性決定了 stack 視圖平鋪其管理的視圖時是否要參照它的布局邊距，選中 Layout Margins Relative 將相對於標准邊界空白來調整subview位置；

　　UIStackView 實現有對齊要求的視圖布局非常非常得簡單，而使用 UICollectionView 和 UITableView 來實現，相對而言就比較麻煩，相比於collectionView而言，stackView更加小巧靈活，然而根據過來人的說法，想要完成更精致的效果，最終還是得靠UICollectionView；

• 源代碼：

• #import "ViewController.h"
  
  @interface ViewController ()
  
  @property (weak, nonatomic) IBOutlet UIStackView *VerticalStackView;
  @property (weak, nonatomic) IBOutlet UIStackView *HorizontalStackView;
  
  
  @end
  
  @implementation ViewController
  
  - (void)viewDidLoad {
      [super viewDidLoad];
      // Do any additional setup after loading the view, typically from a nib.
  }
  
  - (void)didReceiveMemoryWarning {
      [super didReceiveMemoryWarning];
      // Dispose of any resources that can be recreated.
  }
  
  - (IBAction)addStarBtn:(id)sender {
      
      UIImageView *starImg = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"star"]];
      starImg.contentMode = UIViewContentModeScaleAspectFit;
      
      [self.HorizontalStackView addArrangedSubview:starImg];
      [UIView animateWithDuration:0.25 animations:^{
          [self.HorizontalStackView layoutIfNeeded];
      }];
      
  }
  
  - (IBAction)reduceStarBtn:(id)sender {
      
      UIImageView *starImg = self.HorizontalStackView.subviews.lastObject;
      
      [self.HorizontalStackView removeArrangedSubview:starImg];
      [self.HorizontalStackView reloadInputViews];
      [UIView animateWithDuration:0.25 animations:^{
          [self.view layoutIfNeeded];
          [starImg removeFromSuperview];
      }];
  }
  
  
  @end

   

使用環境：

 

---

　　根據GitHub上Most Stars前幾名的demo來看，stackView最多就是應用於運行時的界面變化，其自動約束的特性盡顯無疑,如下圖：

　　

結束總結：　

　　博客園：愛家人愛老婆的IT男

　　微信公眾號：程序猿的野生香蕉【公眾號：你可以下載到我的教程，工具，筆記，以及其他我分享的資源，資源今天可能晚點上傳，不過我會每天更新。】 ----附上官方UIstackView :回復 UIstackView-----