Masonry 控件詳解

Masonry 控件詳解

1.Masonry的屬性

@property (nonatomic,strong,readonly)MASConstraint *left; //左側

@property(nonatomic,strong,readonly) MASConstraint *top;//上側

@property(nonatomic,strong,readonly)MASConstraint*right;//右側

@property(nonatomic,strong,readonly)MASConstraint*bottom;?//下側

@property(nonatomic,strong,readonly)MASConstraint*leading;?//首部

@property(nonatomic,strong,readonly) MASConstraint *trailing;?//尾部

@property(nonatomic, strong, readonly) MASConstraint *width;???//寬

@property (nonatomic, strong, readonly) MASConstraint *height; ?//高

@property(nonatomic, strong, readonly)MASConstraint *centerX;?//橫向居中

@property(nonatomic, strong,readonly)MASConstraint *centerY;? //縱向居中

@property (nonatomic, strong, readonly) MASConstraint *baseline; //文本基線

2.Masonry給我們提供了3個方法

//新增約束

- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;

//更新約束

- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;

//清楚之前的所有約束,只會保留最新的約束

- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;

3.常見約束的各種類型

1.尺寸:width休偶、height韭邓、size

2.邊界:left姐叁、leading衅胀、right曹仗、trailing纸巷、top粥喜、bottom

3.中心點:center乘凸、centerX、centerY

4.邊界:edges

5.偏移量:offset党远、insets削解、sizeOffset、centerOffset

6.priority()約束優(yōu)先級(0~1000)沟娱,multipler乘因數, dividedBy除因數

4.Masonry約束易忽略的技術點

使用Masonry不需要設置控件的translatesAutoresizingMaskIntoConstraints屬性為NO;

防止block中的循環(huán)引用氛驮,使用弱引用(這是錯誤觀點),在這里block是局部的引用济似,block內部引用self不會造成循環(huán)引用的

__weak typeof (self) weakSelf = self;(沒必要的寫法)

5.Masonry約束控件出現沖突的問題

當約束沖突發(fā)生的時候矫废,我們可以設置view的key來定位是哪個view

redView.mas_key = @"redView";

greenView.mas_key = @"greenView";

blueView.mas_key = @"blueView";

若是覺得這樣一個個設置比較繁瑣盏缤,怎么辦呢,Masonry則提供了批量設置的宏MASAttachKeys

MASAttachKeys(redView,greenView,blueView); //一句代碼即可全部設置

6.equalTomas_equalTo的區(qū)別

mas_equalTo只是對其參數進行了一個BOX(裝箱) 操作蓖扑,目前支持的類型:數值類型(NSNumber)唉铜、 點(CGPoint)、大新筛堋(CGSize)潭流、邊距(UIEdgeInsets),而equalTo:這個方法不會對參數進行包裝柜去。

7.Masonry布局

make.top.equalTo(view).with.offset(10);// 距離上10

make.left.equalTo(view).with.offset(10);//距離左10

make.bottom.equalTo(view).with.offset(-10);//距離下10

make.right.equalTo(view).with.offset(-10);//距離右10

等同于make.edges.mas_offset(UIEdgeInsetsMake(10,10,10,10));

等高 \等寬

make.height.mas_equalTo(@[redView, blueView]);

make.width.mas_equalTo(@[redView, blueView]);

最大值

make.width.height.lessThanOrEqualTo(@250);

最大放大到整個view make.width.height.lessThanOrEqualTo(self.view);

最小值make.width.height.greaterThanOrEqualTo(@90);

優(yōu)先級最低

make.width.height.mas_equalTo(100 * self.scacle).priorityLow();

設置高/寬為3:1,要求是同一個控件的屬性比例

make.height.mas_equalTo(bottomInnerView.mas_width).multipliedBy(3);

*? axisType???????? 軸線方向

*? fixedSpacing???? 間隔大小

*? fixedItemLength? 每個控件的固定長度/寬度

*? leadSpacing????? 頭部間隔

*? tailSpacing????? 尾部間隔

//首先添加5個視圖

NSMutableArray *array = [NSMutableArray new];

for (int i = 0; i < 5; i ++) {

UIView *view = [UIView new];

view.backgroundColor = [UIColor greenColor];

[self addSubview:view];

[array addObject:view]; //保存添加的控件

}

水平方向控件間隔固定等間隔

[array mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:15 leadSpacing:10 tailSpacing:10];

[array makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(50);

make.height.equalTo(70);

}];

水平方向寬度固定等間隔

[array mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedItemLength:70 leadSpacing:10 tailSpacing:10];

[array makeConstraints:^(MASConstraintMaker *make) { //數組額你不必須都是view

make.top.equalTo(50);

make.height.equalTo(70);

}];

設置preferredMaxLayoutWidth:多行label約束的完美解決

[self.label makeConstraints:^(MASConstraintMaker *make) {

make.left.top.equalTo(10);

make.right.equalTo(-10);

}];

更新約束 mas_updateConstraints

// 告訴self.view約束需要更新

[self.view setNeedsUpdateConstraints];

// 調用此方法告訴self.view檢測是否需要更新約束灰嫉,若需要則更新,下面添加動畫效果才起作用

[self.view updateConstraintsIfNeeded];

[UIView animateWithDuration:0.3 animations:^{

[self.view layoutIfNeeded];

}];

- (void)updateViewConstraints {

[self.growingButton mas_updateConstraints:^(MASConstraintMaker *make) { }];

[super updateViewConstraints];

}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末嗓奢,一起剝皮案震驚了整個濱河市讼撒,隨后出現的幾起案子,更是在濱河造成了極大的恐慌股耽,老刑警劉巖根盒,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異豺谈,居然都是意外死亡郑象,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進店門茬末,熙熙樓的掌柜王于貴愁眉苦臉地迎上來厂榛,“玉大人,你說我怎么就攤上這事丽惭』髂蹋” “怎么了?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵责掏,是天一觀的道長柜砾。 經常有香客問我,道長换衬,這世上最難降的妖魔是什么痰驱? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮瞳浦,結果婚禮上担映,老公的妹妹穿的比我還像新娘。我一直安慰自己叫潦,他們只是感情好蝇完,可當我...
    茶點故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般短蜕。 火紅的嫁衣襯著肌膚如雪氢架。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天朋魔,我揣著相機與錄音岖研,去河邊找鬼。 笑死铺厨,一個胖子當著我的面吹牛缎玫,可吹牛的內容都是我干的。 我是一名探鬼主播解滓,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼筝家!你這毒婦竟也來了洼裤?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤溪王,失蹤者是張志新(化名)和其女友劉穎腮鞍,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體莹菱,經...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡移国,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了道伟。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片迹缀。...
    茶點故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖蜜徽,靈堂內的尸體忽然破棺而出祝懂,到底是詐尸還是另有隱情,我是刑警寧澤拘鞋,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布砚蓬,位于F島的核電站,受9級特大地震影響盆色,放射性物質發(fā)生泄漏灰蛙。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一隔躲、第九天 我趴在偏房一處隱蔽的房頂上張望摩梧。 院中可真熱鬧,春花似錦蹭越、人聲如沸障本。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽驾霜。三九已至案训,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間粪糙,已是汗流浹背强霎。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蓉冈,地道東北人城舞。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像寞酿,于是被迫代替她去往敵國和親家夺。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,527評論 2 349

推薦閱讀更多精彩內容