iOS線性佈局

前言

首先寫這篇文章以前祝你們週末愉快，而後自我介紹一下，我叫吳海超(WHC)在iOS領域有豐富的開發架構經驗Github之後我也會以文章的形式分享具備實戰意義的文章給你們，但願可以給你們有所幫助。

主題

這期我想給你們講講iOS中的線性佈局,我想作過Android的朋友都熟悉線性佈局，很是好用快捷強大，而咱們iOS9官方也推出了相似線性佈局的框架UIStackView，好下面咱們詳細介紹這個UIStackView。

UIStackView介紹

我相信不少作iOS的同窗都還沒正式開始使用這個框架吧，由於它最低支持iOS9，很顯然咱們App不少都須要支持iOS7甚至iOS6。UIStackView是一種快速UI佈局框架（水平/垂直方向）根據參數自動約束子視圖，能大大提升咱們開發效率。
使用UIStackView咱們不須要對添加其中的子視圖添加約束了，取而代之的是你須要設置一些頗有描述性的屬性，好比座標（Axis）、間隔（Spacing）、對齊（Alignment）以及分佈（Distribution ）等。天然的，你能夠在屬性設置面板上來配置，這樣你就能夠經過鼠標輕鬆的製做出在全部iOS設備上都還不錯的用戶界面了。

下面咱們看看這個使用UIStackView的例子：

實現代碼以下：

- (void)viewDidLoad {
    [super viewDidLoad];
    // 建立StackView實例
    UIStackView * containerView = UIStackView.new;
    [self.view addSubview: containerView];
    // 對StackView添加約束
    containerView.whc_LeftSpace(0)
                .whc_TopSpace(100)
                .whc_RightSpace(0)
                .whc_Height(200);
    /// 設置佈局方向水平
    containerView.axis = UILayoutConstraintAxisHorizontal;
    /// 設置子視圖分佈StackView比例相等
    containerView.distribution = UIStackViewDistributionFillEqually;
    /// 設置子視圖之間間隙爲10
    containerView.spacing = 10;
    /// 設置子視圖填充StackView
    containerView.alignment = UIStackViewAlignmentFill;
    /// 往StackView裏面添加4個子視圖
    for (NSInteger i = 0; i < 4; i++) {
        UIView *view = [[UIView alloc] init];
        view.backgroundColor = [UIColor colorWithRed:random()%256/255.0 green:random()%256/255.0 blue:random()%256/255.0 alpha:1];
        [containerView addArrangedSubview:view];
    }
}複製代碼

上面使用約束佈局庫WHC_AutoLayout

UIStackView總結

咱們如今能夠看到UIStackView確實給咱們開發帶來了不少方便，可是它也有兩個不足的地方：
（1）因爲只支持iOS9以上的系統，這讓咱們兼容很困難。
（2）只支持水平和垂直方向，有時候咱們須要向九宮格同樣的佈局（同時具備水平和垂直方向佈局），這就有點不方便。
（3）佈局參數理解比較困難，表達不夠清楚（多是個人問題，呵呵。。。）

WHC_StackView介紹

我根據上面3點不足我本身就開始了構造相似UIStackView的計劃名爲：WHC_StackView。
首先WHC_StackView是徹底基於自動佈局庫WHC_AutoLayout而開發也是其中的一個子模塊，因此WHC_StackView有Swift，OC版本。

優勢

（1）支持iOS6以上系統
（2）支持水平/垂直和同時水平垂直佈局（相似九宮格）
（3）支持自動分割線設置
（3）簡單清晰的參數配置

例子

- (void)viewDidLoad {
    [super viewDidLoad];
    WHC_StackView * stackView = [WHC_StackView new];
    [self.view addSubview: stackView];

    /// 一行代碼添加約束
    stackView.whc_LeftSpace(10)
             .whc_TopSpace(10)
             .whc_RightSpace(10)
             .whc_Height(100);

    /// 配置StackView
    stackView.whc_Edge = UIEdgeInsetsMake(10, 10, 10, 10); // 內邊距
    stackView.whc_Orientation = All;                  // 自動水平垂直混合佈局
    stackView.whc_HSpace = 10;                             // 子視圖橫向間隙
    stackView.whc_VSpace = 10;                             // 子視圖垂直間隙
    stackView.whc_Column = 2；                             // 設置水平子視圖爲2列

    /// 向StackView中添加4子視圖
    for (int i = 0; i < 4; i++) {
       UIView * view = UIView.new;
       [stackView addSubview:view];
    }
    /// 開始進行佈局
    [stackView whc_StartLayout];
}複製代碼

Demo

支持分割線設置的WHC_StackView（水平，垂直，水平垂直方向）

自動寬高的WHC_StackView

結束

WHC_StackView開源地址：github.com/netyouli/WH…

• 若是您在使用過程當中有任何問題，歡迎issue me!
• 很樂意爲您解答任何相關問題!
• 與其給我點star，不如向我狠狠地拋來一個BUG！
• 若是您想要更多的接口來自定義或者建議/意見，歡迎issue me！我會根據你們的需求提供更多的接口！

也藉此機會推薦閱讀本人其餘優秀開源項目：Github
1.存儲高性能模型對象數據庫：github.com/netyouli/WH…
2.Json轉Model類Mac工具：github.com/netyouli/WH…
3.局部監聽VC自動管理鍵盤：github.com/netyouli/WH…
4.掃描iOS/Android項目沒有使用圖片mac工具：github.com/netyouli/WH…

到了這裏很是感謝您的閱讀謝謝！