從iPhone剛面世到如今的iPhone6s,屏幕大小、種類不斷發(fā)生著改變, iOS開發(fā)的布局方式從純代碼到Storyboard在升級著。個人覺得不要太過糾結(jié)使用哪種布局方式掠廓,純代碼有純代碼的好處、SB也有SB的麻煩甩恼,關(guān)鍵還是得根據(jù)項目、團隊的需要選擇一種適合自己的方式。
Masonry是一個輕量級的布局框架 擁有自己的描述語法 采用更優(yōu)雅的鏈式語法封裝自動布局 簡潔明了 并具有高可讀性 而且同時支持 iOS 和 Max OS X条摸。
下面用個小Demo簡單演示如何使用Masonry悦污。
Masonry下載地址:https://github.com/SnapKit/Masonry
最終運行效果
集成方式
下載Masonry并導入至項目中,在控制器里或PCH文件里引入Masonry.h
核心代碼
self.view.backgroundColor= [UIColorwhiteColor];
/**
*要求:保持100*100钉蒲,居中
*/
UIView*grayView = [UIViewnew];
grayView.backgroundColor= [UIColorgrayColor];
[self.viewaddSubview:grayView];
[grayViewmas_makeConstraints:^(MASConstraintMaker*make) {
make.size.mas_equalTo(CGSizeMake(100,100));
make.center.equalTo(self.view);
}];
/**
*要求:大小保持100*30切端,距離頂部20,距離右邊20
*/
UIView*redView = [UIViewnew];
redView.backgroundColor= [UIColorredColor];
[self.viewaddSubview:redView];
[redViewmas_makeConstraints:^(MASConstraintMaker*make) {
make.size.mas_equalTo(CGSizeMake(100,30));
make.right.mas_equalTo(-20);
make.top.mas_equalTo(20);
}];
/**
*要求:黃色塊大小保持100*30顷啼,左邊距20踏枣,上邊距50,
藍色塊大小保持50*30钙蒙,左邊距離黃色塊20茵瀑,上邊距50
*/
UIView*yellowView = [UIViewnew];
yellowView.backgroundColor= [UIColoryellowColor];
[self.viewaddSubview:yellowView];
[yellowViewmas_makeConstraints:^(MASConstraintMaker*make) {
make.size.mas_equalTo(CGSizeMake(100,30));
make.left.mas_equalTo(20);
make.top.mas_equalTo(50);
}];
UIView*blueView = [UIViewnew];
blueView.backgroundColor= [UIColorblueColor];
[self.viewaddSubview:blueView];
[blueViewmas_makeConstraints:^(MASConstraintMaker*make) {
make.size.mas_equalTo(CGSizeMake(50,30));
make.top.mas_equalTo(50);
make.left.mas_equalTo(yellowView.mas_right).offset(20);
}];
/**
*要求:黑色塊高度保持30,與屏幕等寬躬厌,下邊距0
紫色塊高度40马昨,寬度是屏幕一半,下邊距與黑色塊上編劇距離0.5
*/
UIView*blackView = [UIViewnew];
blackView.backgroundColor= [UIColorblackColor];
[self.viewaddSubview:blackView];
[blackViewmas_makeConstraints:^(MASConstraintMaker*make) {
make.height.mas_equalTo(30);
make.width.equalTo(self.view);
make.bottom.mas_equalTo(0);
}];
UIView*purpleView = [UIViewnew];
purpleView.backgroundColor= [UIColorpurpleColor];
[self.viewaddSubview:purpleView];
[purpleViewmas_makeConstraints:^(MASConstraintMaker*make) {
make.height.mas_equalTo(40);
make.width.mas_equalTo(self.view.frame.size.width/2);
make.bottom.mas_equalTo(blackView.mas_top).offset(-0.5);
}];
/**
*要求:灰扛施、紅兩個色塊鸿捧,左右間距為5,高度30疙渣,寬度平分
*/
UIView*grayView = [UIViewnew];
grayView.backgroundColor= [UIColorgrayColor];
[self.viewaddSubview:grayView];
UIView*redView = [UIViewnew];
redView.backgroundColor= [UIColorredColor];
[self.viewaddSubview:redView];
CGFloatmargin =5;
CGFloatheight =30;
[grayViewmas_makeConstraints:^(MASConstraintMaker*make) {
make.left.mas_equalTo(margin);
make.bottom.mas_equalTo(-margin);
make.height.mas_equalTo(height);
make.right.equalTo(redView.mas_left).offset(-margin);
make.width.equalTo(redView);
}];
[redViewmas_makeConstraints:^(MASConstraintMaker*make) {
make.right.mas_equalTo(-margin);
make.bottom.equalTo(grayView);
make.height.equalTo(grayView);
}];