首先寫這篇文章以前祝你們週末愉快,而後自我介紹一下,我叫吳海超(WHC)在iOS領域有豐富的開發架構經驗Github之後我也會以文章的形式分享具備實戰意義的文章給你們,但願可以給你們有所幫助。git
這期我想給你們講講iOS中的線性佈局,我想作過Android的朋友都熟悉線性佈局,很是好用快捷強大,而咱們iOS9官方也推出了相似線性佈局的框架UIStackView,好下面咱們詳細介紹這個UIStackView。github
我相信不少作iOS的同窗都還沒正式開始使用這個框架吧,由於它最低支持iOS9,很顯然咱們App不少都須要支持iOS7甚至iOS6。UIStackView是一種快速UI佈局框架(水平/垂直方向)根據參數自動約束子視圖,能大大提升咱們開發效率。
使用UIStackView咱們不須要對添加其中的子視圖添加約束了,取而代之的是你須要設置一些頗有描述性的屬性,好比座標(Axis)、間隔(Spacing)、對齊(Alignment)以及分佈(Distribution )等。天然的,你能夠在屬性設置面板上來配置,這樣你就能夠經過鼠標輕鬆的製做出在全部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_AutoLayoutswift
咱們如今能夠看到UIStackView確實給咱們開發帶來了不少方便,可是它也有兩個不足的地方:
(1)因爲只支持iOS9以上的系統,這讓咱們兼容很困難。
(2)只支持水平和垂直方向,有時候咱們須要向九宮格同樣的佈局(同時具備水平和垂直方向佈局),這就有點不方便。
(3)佈局參數理解比較困難,表達不夠清楚(多是個人問題,呵呵。。。)架構
我根據上面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];
}複製代碼
WHC_StackView開源地址:github.com/netyouli/WH…工具
也藉此機會推薦閱讀本人其餘優秀開源項目: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…佈局
到了這裏很是感謝您的閱讀謝謝!性能