Autolayout-Masonry框架

作者:Mitchell 

一休偶、Masonry簡介###

Masonry框架是一個使用了優(yōu)雅語法封裝的輕量級layout框架笑撞。Masonry有它自己的一套框架用來描述NSLayoutConstraints布局的DSL,提高了約束代碼的簡潔性與可讀性扔水。


二、Masonry約束添加步驟###

  • 創(chuàng)建控件
  • 將控件添加到父控件之中
  • 禁用autoresizing
  • 設(shè)置約束

三、Masonry的引入###

  • 第一步:在Masonry鏈接下載庫抬闷,用CocoaPod的方式,或者直接拖拽的方式引入文件夾耕突。
  • 第二步:在需要的類中引入頭文件#import "Masonry.h"笤成,先編譯運行一下,如果沒錯那么就引入成功眷茁。

四炕泳、Masonry的具體使用###

  • 主要方法:
  • 創(chuàng)建約束:
   - (NSArray*)makeConstraints:(void(^)(MASConstraintMaker *))block {
    return [self mas_makeConstraints:block];
}
  • 更新約束:(如果沒有約束的時候會自動添加)
     - (NSArray*)updateConstraints:(void(^)(MASConstraintMaker *))block {
    return [self mas_updateConstraints:block];
}
  • 刪除約束
     - (NSArray*)remakeConstraints:(void(^)(MASConstraintMaker *))block {
    return [self mas_remakeConstraints:block];
}
  • 具體使用:
  • 代碼:
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {     
        make.top.equalTo(self.view.mas_top).offset(20);
        make.left.equalTo(self.view.mas_left).offset(20);
        make.right.equalTo(self.view.mas_right).offset(-20);
        make.height.equalTo([NSNumber numberWithFloat:50]);
    }];
  • 說明:
    顯而易見,代碼的意思就是讓blueView距離self.view的上下左右各位20上祈。
  • 使用技巧:
  • 為了增加代碼的可讀性這里有兩個簡化代碼的宏:#define MAS_SHORTHAND#define MAS_SHORTHAND_GLOBALS
  • MAS_SHORTHAND:只要在導(dǎo)入Masonry主頭文件之前定義這個宏, 那么以后在使用Masonry框架中的屬性和方法的時候, 就可以省略mas_前綴
  • MAS_SHORTHAND_GLOBALS:只要在導(dǎo)入Masonry主頭文件之前定義這個宏,那么就可以讓equalTo函數(shù)接收基本數(shù)據(jù)類型, 內(nèi)部會對基本數(shù)據(jù)類型進(jìn)行包裝
  • 注意:這兩個宏如果想有效使用培遵,必須要再添加Masonry頭文件之前導(dǎo)入進(jìn)去浙芙。
  • 簡化后的代碼:
[blueView makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view.top).offset(20); // y
        make.left.equalTo(self.view.left).offset(20); // x
        make.right.equalTo(self.view.right).offset(-20); // w
        make.height.equalTo(50);
    }];
  • Masonry當(dāng)然也支持乘除法,例如:
[redView makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(blueView.bottom).offset(20);
        make.right.equalTo(blueView.right);
        make.height.equalTo(blueView.height);
        make.width.equalTo(blueView.width).multipliedBy(0.5);
    }];

五籽腕、總結(jié)###

  • Masonry是一個非常棒的編寫Autolayout的第三方庫嗡呼,以及其優(yōu)雅的語言以及極佳的可讀性征服了工程師們。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末皇耗,一起剝皮案震驚了整個濱河市南窗,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌郎楼,老刑警劉巖万伤,帶你破解...
    沈念sama閱讀 222,464評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異箭启,居然都是意外死亡壕翩,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評論 3 399
  • 文/潘曉璐 我一進(jìn)店門傅寡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來放妈,“玉大人,你說我怎么就攤上這事荐操∥呤悖” “怎么了?”我有些...
    開封第一講書人閱讀 169,078評論 0 362
  • 文/不壞的土叔 我叫張陵托启,是天一觀的道長宅倒。 經(jīng)常有香客問我,道長屯耸,這世上最難降的妖魔是什么拐迁? 我笑而不...
    開封第一講書人閱讀 59,979評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮疗绣,結(jié)果婚禮上线召,老公的妹妹穿的比我還像新娘。我一直安慰自己多矮,他們只是感情好缓淹,可當(dāng)我...
    茶點故事閱讀 69,001評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著塔逃,像睡著了一般讯壶。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上湾盗,一...
    開封第一講書人閱讀 52,584評論 1 312
  • 那天伏蚊,我揣著相機與錄音,去河邊找鬼格粪。 笑死丙挽,一個胖子當(dāng)著我的面吹牛肺孵,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播颜阐,決...
    沈念sama閱讀 41,085評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼吓肋!你這毒婦竟也來了凳怨?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,023評論 0 277
  • 序言:老撾萬榮一對情侶失蹤是鬼,失蹤者是張志新(化名)和其女友劉穎肤舞,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體均蜜,經(jīng)...
    沈念sama閱讀 46,555評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,626評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了筛圆。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片面褐。...
    茶點故事閱讀 40,769評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖充择,靈堂內(nèi)的尸體忽然破棺而出德玫,到底是詐尸還是另有隱情,我是刑警寧澤椎麦,帶...
    沈念sama閱讀 36,439評論 5 351
  • 正文 年R本政府宣布宰僧,位于F島的核電站,受9級特大地震影響观挎,放射性物質(zhì)發(fā)生泄漏琴儿。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,115評論 3 335
  • 文/蒙蒙 一嘁捷、第九天 我趴在偏房一處隱蔽的房頂上張望造成。 院中可真熱鬧,春花似錦普气、人聲如沸谜疤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽夷磕。三九已至,卻和暖如春仔沿,著一層夾襖步出監(jiān)牢的瞬間坐桩,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1 274
  • 我被黑心中介騙來泰國打工封锉, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留绵跷,地道東北人膘螟。 一個月前我還...
    沈念sama閱讀 49,191評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像碾局,于是被迫代替她去往敵國和親荆残。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,781評論 2 361

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