iOS線性佈局

前言

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

主題

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

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_AutoLayoutswift

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)簡單清晰的參數配置dom

例子

- (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…佈局

到了這裏很是感謝您的閱讀謝謝!性能

相關文章
相關標籤/搜索