不同于XIB的第三方 Masonry 自動(dòng)布局

這個(gè)第三方還是比較好用的铆隘,當(dāng)然你也可以使用XIB,但是在有些場(chǎng)景下南用,Masonry更為好用膀钠,比如說(shuō)此時(shí)你創(chuàng)建的視圖并不是全局屬性,或者是所添加的視圖是在某些情況下才會(huì)創(chuàng)建裹虫,也就是說(shuō)這個(gè)視圖是局部變量肿嘲,而此時(shí)用XIB就很牽強(qiáng)了。所以筑公,Masonry這時(shí)候就果斷的站出來(lái)了蜜徽,他可以直接進(jìn)行局部變量的布局躏救,而且布局思路和XIB的約束也是有些類似堕油,但是他是純代碼哦女气,也比較好懂,用的是鏈?zhǔn)降暮?jiǎn)單語(yǔ)言耸采。這里要注意的是 語(yǔ)句中的and 和 with 實(shí)際上時(shí)無(wú)意義的兴泥,只是便于我們?nèi)ダ斫獯a的意思。說(shuō)了這么多虾宇,直接來(lái)代碼給你們解釋Zzzz

我也是慢慢的學(xué)習(xí),所以這篇文章還會(huì)一直補(bǔ)充如绸,希望不要斷了嘱朽。。怔接。搪泳。

我就直接上代碼了,不解釋太多了扼脐,代碼里面有很多注釋岸军,還是比較詳細(xì)的。

這個(gè)代碼是直接寫(xiě)在控制器的ViewDidLoad方法里面的

說(shuō)下我遇到的大坑吧瓦侮,就是在設(shè)置布局的時(shí)候艰赞,一定要進(jìn)行添加,其實(shí)添加到哪個(gè)視圖上影響的只是視圖的層次關(guān)系肚吏,并不是他的布局方妖,具體的布局還是要看 make.edges.equalTo(view1) 這句,這里是將布局的相對(duì)對(duì)象設(shè)置成view1了


- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    
    
#pragma mark ---- 一個(gè)視圖在另一個(gè)視圖上的布局 -----
    
    UIView *view1 = [UIView new];
    view1.backgroundColor = [UIColor redColor];
    
    // 要有一個(gè)父視圖
    [self.view addSubview:view1];
    
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        // 將圖形設(shè)置居中(在self.view)中
        make.center.equalTo(self.view);
        
        // 設(shè)置尺寸
        make.size.mas_equalTo(CGSizeMake(350, 350));
        
    }];
//
    
    UIView *view2 = [[UIView alloc] init];
    view2.backgroundColor = [UIColor cyanColor];
    
     // 要有一個(gè)父視圖罚攀,這個(gè)只是圖層的關(guān)系党觅,布局還是和make.edges.equalTo(view1) 對(duì)象有關(guān)
    [view1 addSubview:view2];
    [view2 mas_makeConstraints:^(MASConstraintMaker *make) {
        
        // 這里的make 就相當(dāng)于調(diào)用對(duì)象view2
        // equalTo(對(duì)象), 這里指的是相對(duì)布局對(duì)象
        // 注意這里是with 是一種鏈?zhǔn)降淖匀徽Z(yǔ)言
        // 上左下右
        make.edges.equalTo(view1).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
        
        // 可以看到 edges 其實(shí)就是top,left,bottom,right的一個(gè)簡(jiǎn)化 分開(kāi)寫(xiě)也可以 一句話更省事
        
         // 等價(jià)于
       make.top.equalTo(view1).with.offset(10);
       make.left.equalTo(view1).with.offset(10);
       make.bottom.equalTo(view1).with.offset(-10);
       make.right.equalTo(view1).with.offset(-10);
     
        // 那么為什么bottom和right里的offset是負(fù)數(shù)呢? 因?yàn)檫@里計(jì)算的是絕對(duì)的數(shù)值 計(jì)算的bottom需要小于view1的底部高度 所以要-10 同理用于right
        
        
        // 也等價(jià)于
  //make.top.left.bottom.and.right.equalTo(view1).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
    }];
     
    
  
    
//    - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
//    - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
//    - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
    
     
     //mas_makeConstraints 只負(fù)責(zé)新增約束 Autolayout不能同時(shí)存在兩條針對(duì)于同一對(duì)象的約束 否則會(huì)報(bào)錯(cuò)
     //mas_updateConstraints 針對(duì)上面的情況 會(huì)更新在block中出現(xiàn)的約束 不會(huì)導(dǎo)致出現(xiàn)兩個(gè)相同約束的情況
     //mas_remakeConstraints 則會(huì)清除之前的所有約束 僅保留最新的約束
    // 三種函數(shù)善加利用 就可以應(yīng)對(duì)各種情況了
     
     
    

  
    
    
    
    
    
#pragma mark ---- 兩個(gè)視圖在另一個(gè)視圖上的布局雌澄,自動(dòng)調(diào)整適應(yīng) -----
    
    UIView *view3 = [[UIView alloc] init];
    UIView *view4 = [[UIView alloc] init];
    
    view3.backgroundColor = [UIColor yellowColor];
    view4.backgroundColor = [UIColor yellowColor];
    
    // 要有一個(gè)父視圖
    [view1 addSubview:view3];
    [view1 addSubview:view4];
    // 設(shè)置距離的變量
    int padding = 10;
    // 先對(duì)view3布局
    [view3 mas_makeConstraints:^(MASConstraintMaker *make) {
       
        // 這里只是兩個(gè)視圖在同一條水平線上,所以不用center.X
        make.centerY.mas_equalTo(view1.mas_centerY);
        // 這里是相對(duì)布局杯瞻,不需要設(shè)置距離底端和上端的距離镐牺,直接設(shè)置高度
//        make.top.equalTo(self.view.mas_top).offset(padding);
//  make.bottom.equalTo(self.view.mas_bottom).with.offset(- padding);
        make.left.equalTo(view1.mas_left).with.offset(padding);
        
        
        make.right.equalTo(view4.mas_left).with.offset(- padding);
        
        // 設(shè)置高度的數(shù)值
        // mas_equalTo 用來(lái)設(shè)置數(shù)值
        // equalTo 是直接等于某個(gè)對(duì)象的數(shù)值
        make.height.mas_equalTo(150);
        
        // 設(shè)置和view4等寬
        make.width.equalTo(view4);
        
        
        
        
    }];
    
    [view4 mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.centerY.mas_equalTo(view1.mas_centerY);
        make.left.equalTo(view3.mas_right).with.offset(padding);
        make.right.equalTo(view1.mas_right).with.offset(- padding);
        
        make.height.mas_equalTo(150);
        make.width.equalTo(view3);
        
        
    }];
    

貼張最后效果圖,視圖從最下到上一次是view1魁莉,view2睬涧,view3 +view4

A9CE0A9D-0339-4C83-8510-42FFE94AE962.png

OK 就到這里,我看明天有沒(méi)有空繼續(xù)補(bǔ)充吧沛厨,不定時(shí)補(bǔ)充~~~~
未完待續(xù)~~~~~~~~~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末宙地,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子逆皮,更是在濱河造成了極大的恐慌宅粥,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,843評(píng)論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件电谣,死亡現(xiàn)場(chǎng)離奇詭異秽梅,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)剿牺,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén)企垦,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人晒来,你說(shuō)我怎么就攤上這事钞诡。” “怎么了湃崩?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,187評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵荧降,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我攒读,道長(zhǎng)朵诫,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,264評(píng)論 1 292
  • 正文 為了忘掉前任薄扁,我火速辦了婚禮剪返,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘邓梅。我一直安慰自己脱盲,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,289評(píng)論 6 390
  • 文/花漫 我一把揭開(kāi)白布震放。 她就那樣靜靜地躺著宾毒,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上诈铛,一...
    開(kāi)封第一講書(shū)人閱讀 51,231評(píng)論 1 299
  • 那天乙各,我揣著相機(jī)與錄音,去河邊找鬼幢竹。 笑死耳峦,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的焕毫。 我是一名探鬼主播蹲坷,決...
    沈念sama閱讀 40,116評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼邑飒!你這毒婦竟也來(lái)了循签?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 38,945評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤疙咸,失蹤者是張志新(化名)和其女友劉穎县匠,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體撒轮,經(jīng)...
    沈念sama閱讀 45,367評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡乞旦,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,581評(píng)論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了题山。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片兰粉。...
    茶點(diǎn)故事閱讀 39,754評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖顶瞳,靈堂內(nèi)的尸體忽然破棺而出玖姑,到底是詐尸還是另有隱情,我是刑警寧澤慨菱,帶...
    沈念sama閱讀 35,458評(píng)論 5 344
  • 正文 年R本政府宣布客峭,位于F島的核電站,受9級(jí)特大地震影響抡柿,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜等恐,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,068評(píng)論 3 327
  • 文/蒙蒙 一洲劣、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧课蔬,春花似錦囱稽、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,692評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至扎即,卻和暖如春吞获,著一層夾襖步出監(jiān)牢的瞬間况凉,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,842評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工各拷, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留刁绒,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,797評(píng)論 2 369
  • 正文 我出身青樓烤黍,卻偏偏與公主長(zhǎng)得像知市,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子速蕊,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,654評(píng)論 2 354

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

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)嫂丙、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,096評(píng)論 4 62
  • 沒(méi)想到,尼爾會(huì)死媳叨。 英俊腥光,善解人意,陽(yáng)光糊秆,尼爾占據(jù)青春核心要素武福。美好的生命匆忙隕落,究竟是為何痘番? 渴望自由捉片,卻欲得...
    師爺是枚美男子閱讀 779評(píng)論 0 2
  • Xposed是什么 Xposed 是一款可以在不修改 APK 的情況下影響程序運(yùn)行的框架服務(wù),基于 Xposed ...
    fengzhizi715閱讀 2,026評(píng)論 0 4
  • 不知不覺(jué)汞舱,第二天就要過(guò)去了伍纫,繼續(xù)堅(jiān)持寫(xiě)點(diǎn)什么,不管什么昂芜。 今天去面試復(fù)試了莹规,offer似乎來(lái)的那么簡(jiǎn)單,又似乎來(lái)的...
    大大大榴蓮閱讀 131評(píng)論 0 0
  • Today is Thursday. I am going to read a new book, Frog an...
    Mr_Oldman閱讀 189評(píng)論 0 0