iOS線性佈局

WHC發表於2017-01-08
iOS

前言

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

主題

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

UIStackView介紹

我相信很多做iOS的同學都還沒正式開始使用這個框架吧，因為它最低支援iOS9，很顯然我們App很多都需要支援iOS7甚至iOS6。UIStackView是一種快速UI佈局框架（水平/垂直方向）根據引數自動約束子檢視，能大大提高我們開發效率。
使用UIStackView我們不需要對新增其中的子檢視新增約束了，取而代之的是你需要設定一些很有描述性的屬性，比如座標（Axis）、間隔（Spacing）、對齊（Alignment）以及分佈（Distribution ）等。自然的，你可以在屬性設定皮膚上來配置，這樣你就可以通過滑鼠輕鬆的製作出在所有iOS裝置上都還不錯的使用者介面了。

iOS線性佈局

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

iOS線性佈局

實現程式碼如下：

- (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

iOS線性佈局

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

iOS線性佈局

自動寬高的WHC_StackView

iOS線性佈局

結束

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…

到了這裡非常感謝您的閱讀謝謝！

相關文章