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()約束優先級(0~1000),multipler乘因數, dividedBy除因數

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

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

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

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

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

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

redView.mas_key = @"redView";

greenView.mas_key = @"greenView";

blueView.mas_key = @"blueView";

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

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

6.equalTomas_equalTo的區別

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);

優先級最低

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];

}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容