IOS自适配利器Masonry使用指南
更新时间：2016年01月20日 08:46:22 作者：FlyElephant
如果说自动布局解救了多屏幕适配，那众多三方库的出现就解救了系统自动布局的写法。Masonry就是其中一个。用法上也比较简单灵活，很大程度上替代了传统的NSLayoutConstraint布局方式。下面我们就来具体探讨下吧
关于iOS布局自动iPhone6之后就是AutoLayOut，AutoLayOut固然非常好用，不过有时候我们需要在页面手动进行页面布局，VFL算是一种选择，而且VFL不复杂，理解起来很容易，实际开发中用的特别熟还好，要是第一次看估计要花点功夫才能搞定。Masonry算是VFL的简化版，用的人比较多，之前项目中用过一次，对手动写页面的开发来说算是福利。
基础知识
首先我们看一个常见的问题将一个子View放在的UIViewController的某个位置，通过设置边距来实现，效果如下:
如果通过VFL我们代码会是这样的:
UIView *superview = self.view; UIView *view1 = [[UIView alloc] init]; view1.translatesAutoresizingMaskIntoConstraints = NO; view1.backgroundColor = [UIColor redColor]; [superview addSubview:view1]; UIEdgeInsets padding = UIEdgeInsetsMake(200, 50, 200, 50); [superview addConstraints:@[ //约束 [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeTop multiplier:1.0 constant:padding.top], [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeLeft multiplier:1.0 constant:padding.left], [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-padding.bottom], [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeRight multiplier:1 constant:-padding.right], ]];
只是简单的设置了一个边距，如果视图的关系比较复杂，维护起来会是一个很痛苦的事情，我们看一下Masonry是如何实现的，导入Masonry.h头文件，约束的代码:
UIView *childView=[UIView new];
[childView setBackgroundColor:[UIColor redColor]];
//先将子View加入在父视图中
[self.view addSubview:childView];
__weak typeof(self) weakSelf = self;
UIEdgeInsets padding = UIEdgeInsetsMake(200, 50, 200, 50);
[childView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(weakSelf.view).with.insets(padding);
}];
通过mas_makeConstraints设置边距有种鸟枪换炮的感觉，我们即将开启一段新的旅程，可以紧接着看下面比较实用的功能~
实用知识
1.View设置大小
UIView *childView=[UIView new];
[childView setBackgroundColor:[UIColor redColor]];
//先将子View加入在父视图中
[self.view addSubview:childView];
__weak typeof(self) weakSelf = self;
[childView mas_makeConstraints:^(MASConstraintMaker *make) {
//设置大小
make.size.mas_equalTo(CGSizeMake(100, 100));
//居中
make.center.equalTo(weakSelf.view);
}];
效果如下:
这里友情其实一个小内容，目前我们设置约束都是通过mas_makeConstraints用来创建约束,mas_updateConstraints用来更新约束，mas_remakeConstraints重置约束，清除之前的约束，保留最新的约束,如果想深入解释下，可以阅读下面的英文解释~
/** * Creates a MASConstraintMaker with the callee view. * Any constraints defined are added to the view or the appropriate superview once the block has finished executing * * @param block scope within which you can build up the constraints which you wish to apply to the view. * * @return Array of created MASConstraints */ - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block; /** * Creates a MASConstraintMaker with the callee view. * Any constraints defined are added to the view or the appropriate superview once the block has finished executing. * If an existing constraint exists then it will be updated instead. * * @param block scope within which you can build up the constraints which you wish to apply to the view. * * @return Array of created/updated MASConstraints */ - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block; /** * Creates a MASConstraintMaker with the callee view. * Any constraints defined are added to the view or the appropriate superview once the block has finished executing. * All constraints previously installed for the view will be removed. * * @param block scope within which you can build up the constraints which you wish to apply to the view. * * @return Array of created/updated MASConstraints */ - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
2.设置高度，这里设置左右边距，因此不设置宽度，如果想单独设置width可参考高度的设置方式:
UIView *childView=[UIView new];
[childView setBackgroundColor:[UIColor greenColor]];
//先将子View加入在父视图中
[self.view addSubview:childView];
__weak typeof(self) weakSelf = self;
[childView mas_makeConstraints:^(MASConstraintMaker *make) {
//距离顶部44
make.top.equalTo(weakSelf.view.mas_top).with.offset(44);
//距离左边30
make.left.equalTo(weakSelf.view.mas_left).with.offset(30);
//距离右边30，注意是负数
make.right.equalTo(weakSelf.view.mas_right).with.offset(-30);
//高度150
make.height.mas_equalTo(@150);
}];
3.子视图之间的位置设置:
UIView *childView=[UIView new];
[childView setBackgroundColor:[UIColor greenColor]];
//先将子View加入在父视图中
[self.view addSubview:childView];
__weak typeof(self) weakSelf = self;
[childView mas_makeConstraints:^(MASConstraintMaker *make) {
//距离顶部44
make.top.equalTo(weakSelf.view.mas_top).with.offset(44);
//距离左边30
make.left.equalTo(weakSelf.view.mas_left).with.offset(30);
//距离右边30，注意是负数
make.right.equalTo(weakSelf.view.mas_right).with.offset(-30);
//高度150
make.height.mas_equalTo(@150);
}];
//地址:http://www.cnblogs.com/xiaofeixiang/
UIView *nextView=[UIView new];
[nextView setBackgroundColor:[UIColor redColor]];
[self.view addSubview:nextView];
[nextView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(childView.mas_bottom).with.offset(30);
make.right.equalTo(childView.mas_right).with.offset(-30);
make.width.mas_equalTo(@100);
make.height.mas_equalTo(@100);
}];
4.链式写法，算是一个便利的写法:
UIView *childView=[UIView new];
[childView setBackgroundColor:[UIColor greenColor]];
//先将子View加入在父视图中
[self.view addSubview:childView];
__weak typeof(self) weakSelf = self;
[childView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.and.left.mas_equalTo(weakSelf.view).with.offset(100);
make.bottom.and.right.mas_equalTo(weakSelf.view).with.offset(-100);
//第二种写法更简单，相对于就是父视图
// make.top.and.left.mas_equalTo(100);
// make.bottom.and.right.mas_equalTo(-100);
}];
UILabel *label=[UILabel new];
[label setText:@"博客园-FlyElephant"];
[label setTextColor:[UIColor redColor]];
[label setTextAlignment:NSTextAlignmentCenter];
[self.view addSubview:label];
[label mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(weakSelf.view).with.offset(10);
make.height.mas_equalTo(20);
make.right.mas_equalTo(weakSelf.view).with.offset(-10);
make.bottom.mas_equalTo(weakSelf.view).with.offset(-50);
}];
网上关于Masonry的教程很多，给的例子的也很多，这几种情况基本上满足了开发中的需求，不会有太多的出入，算是一个简易版的教程，Masonry的中属性和iOS中的属性是有对应的关系，不过因为很简单，基本上没怎么看，下图是一个对照关系:
总结：
- 可以给控件添加left/right/top/bottom/size/height/width/insert约束；
- 库提供了三个方法，mas_makeConstraints添加约束，mas_updateConstraints修改约束，mas_remakeConstraints清除以前约束并添加新约束；
- 可以通过view.mas_bottom获得view的某个约束；
- 在约束的block中，使用make来给当前控件添加约束。
相关文章
这篇文章主要给大家介绍了关于iOS中WKWebView的一些特殊使用，文中通过示例代码介绍的非常详细，对大家学习或者使用iOS具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
Block它是C语言级别和运行时方面的一个特征,下面这篇文章主要给大家介绍了关于iOS block的值捕获与指针捕获的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-02-02
这篇文章主要介绍了IOS10.11 无法访问http的问题解决办法的相关资料,需要的朋友可以参考下2016-12-12
这篇文章主要为大家详细介绍了iOS仿邮箱大师的手势密码解锁的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要介绍了iOS实现背景高斯模糊效果，代码简单易懂，非常不错，需要的朋友参考下吧2016-12-12
iOS UICollectionView刷新时闪屏的解决方法
本篇文章主要介绍了iOS UICollectionView刷新时闪屏的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
由于预处理指令是在编译之前就进行了，因此很多时候它要比在程序运行时进行操作效率高。在C语言中包括三类预处理指令，今天将一一介绍：宏定义、条件编译、文件包含2014-08-08
iOS使用音频处理框架The Amazing Audio Engine实现音频录制播放
这篇文章主要为大家详细介绍了iOS使用音频处理框架The Amazing Audio Engine实现音频录制播放，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-04-04
最近在网上看到一些抽屉效果,看起来很酷!很眩!但是,下不下来看代码, 所以决定还是自己写吧!!这篇文章通过近100行的代码就实现了简单的抽屉效果，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-10-10
这篇文章主要为大家详细介绍了iOS实现头部拉伸效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-05-05
最新评论