運用Masonry自適應布局

從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);

}];


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末匙奴,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子妄荔,更是在濱河造成了極大的恐慌泼菌,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件懦冰,死亡現(xiàn)場離奇詭異灶轰,居然都是意外死亡,警方通過查閱死者的電腦和手機刷钢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進店門笋颤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人内地,你說我怎么就攤上這事伴澄。” “怎么了阱缓?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵非凌,是天一觀的道長。 經(jīng)常有香客問我荆针,道長敞嗡,這世上最難降的妖魔是什么颁糟? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮喉悴,結(jié)果婚禮上棱貌,老公的妹妹穿的比我還像新娘。我一直安慰自己箕肃,他們只是感情好婚脱,可當我...
    茶點故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著勺像,像睡著了一般障贸。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上吟宦,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天篮洁,我揣著相機與錄音,去河邊找鬼督函。 笑死嘀粱,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的辰狡。 我是一名探鬼主播锋叨,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼宛篇!你這毒婦竟也來了娃磺?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤叫倍,失蹤者是張志新(化名)和其女友劉穎偷卧,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體吆倦,經(jīng)...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡听诸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了蚕泽。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片晌梨。...
    茶點故事閱讀 39,711評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖须妻,靈堂內(nèi)的尸體忽然破棺而出仔蝌,到底是詐尸還是另有隱情,我是刑警寧澤荒吏,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布敛惊,位于F島的核電站找筝,受9級特大地震影響即寒,放射性物質(zhì)發(fā)生泄漏蒲障。R本人自食惡果不足惜描焰,卻給世界環(huán)境...
    茶點故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望特恬。 院中可真熱鬧员辩,春花似錦、人聲如沸鸵鸥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽妒穴。三九已至,卻和暖如春摊崭,著一層夾襖步出監(jiān)牢的瞬間讼油,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工呢簸, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留矮台,地道東北人。 一個月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓根时,卻偏偏與公主長得像瘦赫,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子蛤迎,可洞房花燭夜當晚...
    茶點故事閱讀 44,611評論 2 353

推薦閱讀更多精彩內(nèi)容