Masonry 筆記

最近每周末都會(huì)看葉孤城的直播,對(duì)于我們iOS開(kāi)發(fā)者來(lái)說(shuō),確實(shí)是一個(gè)福利杯道,很感謝他們的分享精神,收獲到的一些東西特此記錄下责蝠。

12月12號(hào) Masonry

昨天聽(tīng)了里脊串的視頻之后党巾,對(duì)Masonry 有進(jìn)一步了解。

Masonry的進(jìn)一步認(rèn)識(shí)

以前用Masonry感覺(jué)就是把一些約束條件一加霜医,就完事了齿拂,沒(méi)有進(jìn)行一些細(xì)致的了解。

首先看一下系統(tǒng)的肴敛,通過(guò)這七個(gè)參數(shù)來(lái)大致了解下

[NSLayoutConstraint constraintWithItem:self.testRedView   // 第一個(gè)視圖
                             attribute:NSLayoutAttributeTop // 第一個(gè)視圖的屬性attr1
                             relatedBy:NSLayoutRelationEqual // 兩個(gè)視圖的關(guān)系
                                toItem:self.view // 第二個(gè)視圖
                             attribute:NSLayoutAttributeTop // 第二個(gè)視圖的屬性attr1
                            multiplier:1.0 //乘
                              constant:10]; //常量

 相當(dāng)于//    view1.attr1 <relation> view2.attr2 * multiplier + constant

而Masonry中可以分為這五個(gè)參數(shù)來(lái)了解

  Attribute(屬性) ,Relation(關(guān)系),Multiplier(乘),Constant(大小),Priority(優(yōu)先級(jí))
Attribute
串哥的圖片1

leadingtrailing 是和 leftright是相同的署海,只是考慮到阿拉伯國(guó)家不用左右而定的,官方就用前面一組的医男。

Relation
typedef NS_ENUM(NSInteger, NSLayoutRelation) {
    NSLayoutRelationLessThanOrEqual = -1, // 小于或等于
    NSLayoutRelationEqual = 0, // 相等
    NSLayoutRelationGreaterThanOrEqual = 1, //大于或等于
};
Multiplier

簡(jiǎn)單的說(shuō)砸狞,就是兩種之間的倍數(shù),例如經(jīng)常使用

make.width.equalTo(self.view.mas_width).multipliedBy(0.5);           
Constant

就是我們常用的常量

串哥的圖片2
Priority 優(yōu)先級(jí)
串哥的圖片3
static const UILayoutPriority UILayoutPriorityRequired NS_AVAILABLE_IOS(6_0) = 1000; 
static const UILayoutPriority UILayoutPriorityDefaultHigh NS_AVAILABLE_IOS(6_0) = 750; 
static const UILayoutPriority UILayoutPriorityDefaultLow NS_AVAILABLE_IOS(6_0) = 250; 
static const UILayoutPriority UILayoutPriorityFittingSizeLevel NS_AVAILABLE_IOS(6_0) = 50;
Masonry注意點(diǎn)一

有時(shí)我們用的是NavgationController,會(huì)導(dǎo)致我們?nèi)绻苯佑?/p>

make.top.equalTo(self.view.as_top);

會(huì)被狀態(tài)欄遮住.

遮住狀態(tài)欄

所以此時(shí)我們需要注意下面幾個(gè)屬性啦

串哥的圖片4

此時(shí)可以用

 make.top.equalTo(self.mas_topLayoutGuideBottom);

代替上面 make.top.equalTo(self.view.as_top)

或者采取下面的方法镀梭,都能解決遮住狀態(tài)欄的問(wèn)題

self.edgesForExtendedLayout = UIRectEdgeNone;
self.automaticallyAdjustsScrollViewInsets = NO;
Masonry注意點(diǎn)二
串哥的圖片5

intrinsicContentSize

這個(gè)方法在我們沒(méi)有指定高度或?qū)挾鹊臅r(shí)候刀森,它會(huì)自動(dòng)幫我們確定寬度或高度,特別是用于UILabel的時(shí)候是相當(dāng)方便的报账。

- (UILabel *)testLabel
{
    if(!_testLabel)
    {
        _testLabel = [[UILabel alloc] init];
        _testLabel.text = @"hjsfjhfkjfskfsdkjfdskj";
        _testLabel.numberOfLines = 0;
        _testLabel.backgroundColor = [UIColor redColor];
    }
    return _testLabel;
}

[self.view addSubview:self.testLabel];
[self.testLabel mas_makeConstraints:^(MASConstraintMaker * make){

   
    make.width.equalTo(@100);
    make.top.equalTo(@100);
    make.left.equalTo(@50);

}];
自動(dòng)計(jì)算高度
Content Priority 拉伸和壓縮
串哥的圖片-拉伸和壓縮
 [self.testLabel setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
 [self.testLabel setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisVertical];

這個(gè)要根據(jù)情況而定研底,有時(shí)會(huì)很有用的。

  • setContentHuggingPriority: 優(yōu)先級(jí)越高透罢,代表壓縮越厲害榜晦,越晚被拉伸。就是上圖中那人拉的力量更強(qiáng)琐凭。
  • setContentCompressionResistancePriority:: 優(yōu)先級(jí)越高芽隆,代表拉伸越厲害,越晚被壓縮统屈。就是上圖那人推的力量更強(qiáng)胚吁。
Masonry注意問(wèn)題三
- (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ì)各種情況了
*/

設(shè)置動(dòng)畫(huà)改變的時(shí)候,就是改變某一項(xiàng)屬性愁憔,位置或大小腕扶,此時(shí)需要用到mas_updateConstraints:

Masonry中ScrollerView

注意的是UIScrollView依靠與其subviews之間的約束來(lái)確定ContentSize的大小,所以它很特殊吨掌,我們添加約束的時(shí)候半抱,常常額外給其添加一個(gè)ContentView,控制subViews脓恕。

UIView *container = [[UIView alloc] init];
[testScrollView addSubview:container];
[container mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(testScrollView);
    make.width.equalTo(testScrollView);
}];

然后最后的時(shí)候最后再根據(jù)subViews更新達(dá)到效果。

[container mas_updateConstraints:^(MASConstraintMaker *make) {
    make.bottom.mas_equalTo(subView.mas_bottom).with.offset(40);
}];

詳細(xì)的可以看串哥這篇博客.

備注

很感謝串哥窿侈,這是里脊串的博客炼幔,特此分享。作為同是長(zhǎng)沙人的我史简,真是我學(xué)習(xí)的榜樣啊乃秀,??。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末圆兵,一起剝皮案震驚了整個(gè)濱河市跺讯,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌殉农,老刑警劉巖刀脏,帶你破解...
    沈念sama閱讀 217,657評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異超凳,居然都是意外死亡愈污,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門(mén)聪建,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)钙畔,“玉大人,你說(shuō)我怎么就攤上這事金麸。” “怎么了簿盅?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,057評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵挥下,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我桨醋,道長(zhǎng)棚瘟,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,509評(píng)論 1 293
  • 正文 為了忘掉前任喜最,我火速辦了婚禮偎蘸,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘瞬内。我一直安慰自己迷雪,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,562評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布虫蝶。 她就那樣靜靜地躺著章咧,像睡著了一般。 火紅的嫁衣襯著肌膚如雪能真。 梳的紋絲不亂的頭發(fā)上赁严,一...
    開(kāi)封第一講書(shū)人閱讀 51,443評(píng)論 1 302
  • 那天扰柠,我揣著相機(jī)與錄音,去河邊找鬼疼约。 笑死卤档,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的程剥。 我是一名探鬼主播裆装,決...
    沈念sama閱讀 40,251評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼倡缠!你這毒婦竟也來(lái)了哨免?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,129評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤昙沦,失蹤者是張志新(化名)和其女友劉穎琢唾,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體盾饮,經(jīng)...
    沈念sama閱讀 45,561評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡采桃,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,779評(píng)論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了丘损。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片普办。...
    茶點(diǎn)故事閱讀 39,902評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖徘钥,靈堂內(nèi)的尸體忽然破棺而出衔蹲,到底是詐尸還是另有隱情,我是刑警寧澤呈础,帶...
    沈念sama閱讀 35,621評(píng)論 5 345
  • 正文 年R本政府宣布舆驶,位于F島的核電站,受9級(jí)特大地震影響而钞,放射性物質(zhì)發(fā)生泄漏沙廉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,220評(píng)論 3 328
  • 文/蒙蒙 一臼节、第九天 我趴在偏房一處隱蔽的房頂上張望撬陵。 院中可真熱鬧,春花似錦网缝、人聲如沸巨税。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,838評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)垢夹。三九已至,卻和暖如春维费,著一層夾襖步出監(jiān)牢的瞬間果元,已是汗流浹背促王。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,971評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留而晒,地道東北人蝇狼。 一個(gè)月前我還...
    沈念sama閱讀 48,025評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像倡怎,于是被迫代替她去往敵國(guó)和親迅耘。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,843評(píng)論 2 354

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