Masonry简单使用及如何利用Masonry约束宽相等
其实Masonry封装的API和苹果官方的思路是非常一致的，如果你经常用storyBoard或者Xib来自动布局的话，上手Masonry应该是很容易的。前段时间看了很多的Masonry的介绍和使用，很多demo都是给定高度。那么长度和高度相等如何约束呢？其中宽度是随屏幕的宽度自动适应的。
如何使用Masonry
Masonry源码链接：Masonry,如果你项目使用Swift，建议你使用SnapKit
使用前导入Masonry库
- ***#import "Masonry.h" *** ，或者通过cocoapod进行安装。
- 添加宏#define MAS_SHORTHAND 这样就可以在使用masonry时不需要用mas_前缀了。
- 由于masonry使用到大量的block,为防止循环引用，需要对某些对象进行弱引用。添加宏 #define WS(weakSelf) __weak __typeof(&*self) weakSelf = self；也可以使用__weak typeof(self) weakSelf = self;
Demo One 约束两个View的长度和宽度相等
要求：现有两个View，垂直居中，两个View的间隙为10，它们距离屏幕左右的间隙也为10，长度和宽度相等。
// 搭建UI demo 长宽等比例
- (void) setupUI2
{
WS(weakSelf);
UIView * bgView = UIView.new;
bgView.backgroundColor = [UIColor blueColor];
[self.view addSubview:bgView];
CGFloat padding = 10.0f;
[bgView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(weakSelf.view).with.insets(UIEdgeInsetsMake(padding, padding, padding, padding));
}];
UIView * redView = UIView.new;
redView.backgroundColor = [UIColor redColor];
[bgView addSubview:redView];
UIView * yellowView = UIView.new;
[bgView addSubview:yellowView];
yellowView.backgroundColor = [UIColor yellowColor];
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(bgView).offset(padding);
make.right.equalTo(yellowView.left).offset(-padding);
make.centerY.equalTo(bgView);
/**
* 长宽相等 注意，这里不能用 make.height.equalTo(make.width);
*/
make.height.equalTo(redView.width); /// 约束长度等于宽度
make.width.equalTo(yellowView.width);
}];
[yellowView makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(bgView);
make.right.equalTo(bgView).offset(-padding);
make.height.equalTo(yellowView.width);
}];
}
demoOne_01.png
demoOne_02.png
Demo Two 约束任意个数的View,高度等于固定值，宽度相等
// 搭建UI 多个视图的布局
- (void) setupUI3
{
WS(weakSelf);
CGFloat padding = 10.0f;
UIView * superView = UIView.new;
[self.view addSubview:superView];
superView.backgroundColor = [UIColor redColor];
[superView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(weakSelf.view).with.insets(UIEdgeInsetsMake(padding+64.0f, padding, padding, padding));
}];
NSInteger count = 3;
UIView * tempView = nil;
CGFloat height = 50.0f; // 高度固定等于50
for (NSInteger i = 0; i<count; i++) {
UIView * subView = UIView.new;
[superView addSubview:subView];
subView.backgroundColor = [UIColor brownColor];
if (i == 0) {
[subView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(superView).offset(padding);
make.height.equalTo(@(height));
make.centerY.equalTo(superView);
}];
} else if (i == count -1) {
[subView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(tempView.mas_right).offset(padding);
make.right.equalTo(superView.mas_right).offset(-padding);
make.height.equalTo(tempView);
make.width.equalTo(tempView);
make.centerY.equalTo(tempView);
}];
} else {
[subView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(tempView.mas_right).offset(padding);
make.centerY.equalTo(tempView);
make.height.equalTo(tempView);
make.width.equalTo(tempView);
}];
}
tempView = subView;
//[subView layoutIfNeeded];
}
}
demoTwo_01.png
demoTwo_02.png
Demo Three约束任意个数的View，宽度自动适应，高度等于宽度
// 搭建UI 高度和宽度相等
- (void) setupUI4
{
WS(weakSelf);
CGFloat padding = 10.0f;
UIView * superView = UIView.new;
[self.view addSubview:superView];
superView.backgroundColor = [UIColor redColor];
[superView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(weakSelf.view).with.insets(UIEdgeInsetsMake(padding+64.0f, padding, padding, padding));
}];
NSInteger count = 3;
UIView * tempView = nil;
// CGFloat height = 50.0f;
for (NSInteger i = 0; i<count; i++) {
UIView * subView = UIView.new;
[superView addSubview:subView];
subView.backgroundColor = [UIColor brownColor];
if (i == 0) {
[subView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(superView).offset(padding);
//make.height.equalTo(@(height));
make.centerY.equalTo(superView);
make.height.equalTo(subView.width);
}];
} else if (i == count -1) {
[subView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(tempView.mas_right).offset(padding);
make.right.equalTo(superView.mas_right).offset(-padding);
make.height.equalTo(tempView);
make.width.equalTo(tempView);
make.centerY.equalTo(tempView);
}];
} else {
[subView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(tempView.mas_right).offset(padding);
make.centerY.equalTo(tempView);
//make.height.equalTo(tempView);
make.width.equalTo(tempView);
make.height.equalTo(subView.width);
}];
}
tempView = subView;
}
}
demoThree_01.png
demoThree_02.png
大家可以比较Demo2和Demo3的区别，可以看出它们之间约束的不同点。如果你文章能帮助到你,希望你关注我给我评论，留言，或者给我写信。谢谢。
