iOS 開發(fā)中自動布局之 masonry 第三方框架的使用

一敛瓷、先做一個比較

  • 使用系統(tǒng)自帶的方法
    UIView *superview = self.view;

    //創(chuàng)建一個 view1
    UIView *view1 = [[UIView alloc] init];
    view1.translatesAutoresizingMaskIntoConstraints = NO;
    view1.backgroundColor = [UIColor greenColor];
    [superview addSubview:view1];
    
    UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);

    [superview addConstraints:@[
            //view1 constraints
            [NSLayoutConstraint constraintWithItem:view1
                                         attribute:NSLayoutAttributeTop
                                         relatedBy:NSLayoutRelationEqual
                                            toItem:superview
                                         attribute:NSLayoutAttributeTop
                                        multiplier:1.0
                                          constant:padding.top],
            
            [NSLayoutConstraint constraintWithItem:view1
                                         attribute:NSLayoutAttributeLeft
                                         relatedBy:NSLayoutRelationEqual
                                            toItem:superview
                                         attribute:NSLayoutAttributeLeft
                                        multiplier:1.0
                                          constant:padding.left],
            
            [NSLayoutConstraint constraintWithItem:view1
                                         attribute:NSLayoutAttributeBottom
                                         relatedBy:NSLayoutRelationEqual
                                            toItem:superview
                                         attribute:NSLayoutAttributeBottom
                                        multiplier:1.0
                                          constant:-padding.bottom],
            
            [NSLayoutConstraint constraintWithItem:view1
                                         attribute:NSLayoutAttributeRight
                                         relatedBy:NSLayoutRelationEqual
                                            toItem:superview
                                         attribute:NSLayoutAttributeRight
                                        multiplier:1
                                          constant:-padding.right]
            ]];
  • 使用 masonry 實現同樣效果玄柠,代碼進行比較:
  • 第一種方法:
    UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);

    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(superview.mas_top).with.offset(padding.top); //with is an optional semantic filler
    make.left.equalTo(superview.mas_left).with.offset(padding.left);
    make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom);
    make.right.equalTo(superview.mas_right).with.offset(-padding.right);
    }];
  • 第二種方法:
    UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);

    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(superview).with.insets(padding);
}];

二憋飞、masonry 的簡單使用

2.1.創(chuàng)建一個 size 為 (100同规,100) 大小,位置位于右下角的 view:
  • 首先創(chuàng)建一個 view:yellow
    UIView *yellow = [[UIView alloc]init];
    yellow.backgroundColor = [UIColor yellowColor];
    yellow.backgroundColor = [UIColor cyanColor];
    [self.view addSubview:yellow];

注:創(chuàng)建完 view 控件之后就要加入父控件中咧擂,因為添加約束時候會參照父控件進行約束敛助,如果不這樣做運行時就會在約束處報錯。

  • 添加約束方法一:
    [yellow mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(100, 100));
        make.bottom.mas_equalTo(self.view).offset(-20);
        make.right.mas_equalTo(self.view.mas_right).offset(-20);
    }];
  • 添加約束方法二:
    [yellow mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(100, 100));
        make.bottom.offset(-20);
        make.right.mas_equalTo(self.view).offset(-20);
    }];
  • 添加約束方法三:
[yellow mas_makeConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(@(100));
        make.height.mas_equalTo(100);
        make.right.offset(-20);
        make.bottom.mas_equalTo(self.view).offset(-20);
    }];

總結:①方法一和方法二所添加約束代碼有所不同屋确,通過仔細觀察可以發(fā)現以下三句代碼所起作用一樣纳击,系統(tǒng)會根據 make. 后面的關鍵詞進行自動匹配后面的內容:

make.bottom.mas_equalTo(self.view.mas_bottom).offset(-20);
make.bottom.mas_equalTo(self.view).offset(-20);
make.bottom.offset(-20);
  • 如果后面有 mas_equalTo 就進行匹配;
  • 如果句中沒有 mas_equalTo 就會自動添加和 make. 后面的關鍵詞對應的約束攻臀。

②方法三種 make.width.equalTo(@(100))make.width.equalTo 中傳入的參數要是 id 類型的焕数,所以必須要對基本數據類型進行封裝;而 make.height.width.mas_equalTo(100) 中的 mas_equalTo 會對傳入的參數進行自動封裝刨啸,所以對傳入的參數可以不封裝堡赔。

2.2.創(chuàng)建一個大小為父控件大小 0.3 倍的控件,并居中顯示:
  • 方法一:
  [yellow mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.equalTo(self.view).multipliedBy(0.3);
        make.centerX.mas_equalTo(self.view.mas_centerX);
        make.centerY.mas_equalTo(self.view.mas_centerY);
  }];

以上約束 X 和 Y 的語句中设联,都可以再進行更改善已,例如把 mas_equalTo(self.view.mas_centerY) 改成 mas_equalTo(self.view)灼捂,效果一樣。

  • 方法二:
  [yellow mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.equalTo(self.view).multipliedBy(0.3);
        make.center.mas_equalTo(self.view.center);
  }];

同樣:以上代碼中的 mas_equalTo(self.view.center) 可以把參數中的 **.center **去掉换团。

三悉稠、總結:

  • 一般的項目都很少使用系統(tǒng)提供的自動布局方法,轉而使用 masonry 第三方框架艘包;
  • mas_equalTo 和 equalTo 比較:
  • mas_equalTo:這個方法會對參數進行包裝的猛;
  • equalTo:這個方法不會對參數進行包裝;
  • mas_equalTo 的功能強于 equalTo 想虎。
  • 優(yōu)化 mas_
  • 加入下面這句代碼** #define MAS_SHORTHAND** 卦尊,在所有地方都可以把 mas_ 去掉,但是此句必須要加在 **#import "本類類名"; ** 之前(即導入本類頭文件之前)舌厨;
  • 但是有些 mas_ 不能去掉岂却,比如:make.width.mas_equalTo(100);必須要進行包裝,此時在 #import "本類類名" 之前加入以下一句即可:#define MAS_SHORTHAND_GLOBALS
  • 建議:
    • 在不確定的時候裙椭,所有地方都使用帶有 mas_ 的關鍵字淌友;
    • 在文件中引入 ** #define MAS_SHORTHAND** 和 #define MAS_SHORTHAND_GLOBALS 之后,就不需要在考慮任何 mas_ 骇陈。
  • 約束的類型:
  • 尺寸:width/height/size
  • 邊界:left/leading/right/trailing/top/bottom
  • 中心的:center/centerX/centerY
  • 邊界:edges

總之,masonry 的語法很靈活瑰抵,勤加練習你雌,找到規(guī)律,使用起來就會覺得很輕松了 O(∩_∩)O

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末二汛,一起剝皮案震驚了整個濱河市婿崭,隨后出現的幾起案子,更是在濱河造成了極大的恐慌肴颊,老刑警劉巖氓栈,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異婿着,居然都是意外死亡授瘦,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進店門竟宋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來提完,“玉大人,你說我怎么就攤上這事丘侠⊥叫溃” “怎么了?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵蜗字,是天一觀的道長打肝。 經常有香客問我脂新,道長,這世上最難降的妖魔是什么粗梭? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任争便,我火速辦了婚禮,結果婚禮上楼吃,老公的妹妹穿的比我還像新娘始花。我一直安慰自己,他們只是感情好孩锡,可當我...
    茶點故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布酷宵。 她就那樣靜靜地躺著,像睡著了一般躬窜。 火紅的嫁衣襯著肌膚如雪浇垦。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天荣挨,我揣著相機與錄音男韧,去河邊找鬼。 笑死默垄,一個胖子當著我的面吹牛此虑,可吹牛的內容都是我干的。 我是一名探鬼主播口锭,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼朦前,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了鹃操?” 一聲冷哼從身側響起韭寸,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎荆隘,沒想到半個月后恩伺,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡椰拒,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年晶渠,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片燃观。...
    茶點故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡乱陡,死狀恐怖,靈堂內的尸體忽然破棺而出仪壮,到底是詐尸還是另有隱情憨颠,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站爽彤,受9級特大地震影響养盗,放射性物質發(fā)生泄漏。R本人自食惡果不足惜适篙,卻給世界環(huán)境...
    茶點故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一往核、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧嚷节,春花似錦聂儒、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至效斑,卻和暖如春非春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背缓屠。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工奇昙, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人敌完。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓储耐,卻偏偏與公主長得像,于是被迫代替她去往敵國和親滨溉。 傳聞我的和親對象是個殘疾皇子什湘,可洞房花燭夜當晚...
    茶點故事閱讀 43,514評論 2 348

推薦閱讀更多精彩內容

  • 一、前言 關于蘋果的布局一直是我比較糾結的問題业踏,是寫代碼來控制布局,還是使用storyboard來控制布局呢涧卵?以前...
    iplaycodex閱讀 2,440評論 0 1
  • (一)Masonry介紹 Masonry是一個輕量級的布局框架 擁有自己的描述語法 采用更優(yōu)雅的鏈式語法封裝自動布...
    木易林1閱讀 2,320評論 0 3
  • Masonry是一個輕量級的布局框架勤家,擁有自己的描述語法,采用更優(yōu)雅的鏈式語法封裝自動布局柳恐,簡潔明了并具有高可讀性...
    3dcc6cf93bb5閱讀 1,759評論 0 1
  • iOS_autoLayout_Masonry 概述 Masonry是一個輕量級的布局框架與更好的包裝AutoLay...
    指尖的跳動閱讀 1,155評論 1 4
  • 一位朋友說你要記得亂語的限制伐脖,那是經驗之談也是初心,帶領者要敏感你所帶群組的能量 經過Amma的撬...
    貓秘閱讀 604評論 0 0