Masonry简单使用教程

时间：2016-03-10 18:43:22 阅读：198 评论：0 收藏：0 [点我收藏+]

标签：

如果说自动布局解救了多屏幕适配，那众多三方库的出现就解救了系统自动布局的写法。Masonry就是其中一个。
在Github上，Masonry已经得到6000+个star，用法上也比较简单灵活，很大程度上替代了传统的NSLayoutConstraint布局方式。本文将利用几个案例来讲解Masonry的使用。
Masonry下载地址：
https://github.com/SnapKit/Masonry

本文Demo下载地址：
https://github.com/saitjr/MasonryDemo.git

环境信息：

Mac OS X 10.10.3
Xcode 6.3
iOS 8.3

正文：

前期准备：

1. 下载Masonry并导入到工程中；
2. 将Masonry.h导入当前控制器。

案例一：

要求：
无论在什么尺寸的设备上（包括横竖屏切换），红色view都居中显示。

案例一

实现：

#import "ViewController.h"
#import "Masonry.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad 
{ 
[super viewDidLoad]; 
// 防止block中的循环引用 
__weak typeof(self) weakSelf = self; 
// 初始化view并设置背景 
UIView *view = [UIView new];
 view.backgroundColor = [UIColor redColor]; 
[self.view addSubview:view]; 
// 使用mas_makeConstraints添加约束
 [view mas_makeConstraints:^(MASConstraintMaker *make) { 
// 添加大小约束（make就是要添加约束的控件view）
 make.size.mas_equalTo(CGSizeMake(100, 100));
 // 添加居中约束（居中方式与self相同）
 make.center.equalTo(weakSelf.view); }];
}
@end

案例二：

要求：

无论在什么尺寸的设备上（包括横竖屏切换），黑色view的左、上边距、大小都不变；
灰色view的右边距不变
宽、高、上边距黑色view相等

案例二

实现：

#import "ViewController2.h"
#import "Masonry.h"
@interface ViewController2 ()
@end
@implementation ViewController2
- (void)viewDidLoad
 { 
[super viewDidLoad]; 
 UIView *blackView = [UIView new]; 
blackView.backgroundColor = [UIColor blackColor]; 
[self.view addSubview:blackView]; 

// 给黑色view添加约束 
[blackView mas_makeConstraints:^(MASConstraintMaker *make) { 
// 添加大小约束 make.size.mas_equalTo(CGSizeMake(100, 100));

 // 添加左、上边距约束（左、上约束都是20）
 make.left.and.top.mas_equalTo(20); 
}]; 
// 初始化灰色view UIView *grayView = [UIView new]; 
grayView.backgroundColor = [UIColor lightGrayColor]; 
[self.view addSubview:grayView]; 

// 给灰色view添加约束
 [grayView mas_makeConstraints:^(MASConstraintMaker *make) {
 // 大小、上边距约束与黑色view相同 
make.size.and.top.equalTo(blackView); 
// 添加右边距约束
（这里的间距是有方向性的，左、上边距约束为正数，右、下边距约束为负数）
 make.right.mas_equalTo(-20);
 }];
}
@end

在上面的案例中，涉及以下内容：

在Masonry中，and,with都没有具体操作，仅仅是为了提高程序的可读性
make.left.and.top.mas_equalTo(20);
等价于
make.left.top.mas_equalTo(20);
equalTo与mas_equalTo
如果约束条件是数值或者结构体等类型，可以使用mas_equalTo进行包装。关于这个问题，我也不是很清楚，可以看看官方的解释：
```
Instead of using NSNumber, you can use primitives and structs to build your constraints.By default,
macros which support autoboxing are prefixed with mas_.
Unprefixed versions are available by defining MAS_SHORTHAND_GLOBALS
before importing Masonry.
```
我一般将数值类型的约束用mas_equalTo，而相对于某个控件，或者某个控件的某个约束，我会使用equalTo，如：
make.size.mas_equalTo(CGSizeMake(100, 100));make.center.equalTo(weakSelf.view);

案例三：

要求：

有两个view，黑色与灰色；
黑色view的左、上、右边距均为20，下边距灰色view 20，宽度自适应，高度与灰色view平分整个界面；
灰色view宽度为黑色view的一半（即左边以中线起始），右、下边距与黑色view相同，高度与黑色view相同。

案例三

实现：

#import "ViewController3.h"
#import "Masonry.h"
@interface ViewController3 ()
@end
@implementation ViewController3
- (void)viewDidLoad
 { 
[super viewDidLoad]; 
  UIView *blackView = [UIView new]; 
blackView.backgroundColor = [UIColor blackColor]; 
[self.view addSubview:blackView];

 // 给黑色view添加约束 
[blackView mas_makeConstraints:^(MASConstraintMaker *make) {
 // 添加左、上边距约束 make.left.and.top.mas_equalTo(20);
 // 添加右边距约束 
make.right.mas_equalTo(-20); }]; 

view UIView *grayView = [UIView new]; 
grayView.backgroundColor = [UIColor lightGrayColor]; 
[self.view addSubview:grayView]; 

// 给灰色view添加约束
 [grayView mas_makeConstraints:^(MASConstraintMaker *make) { 
// 添加右、下边距约束 make.bottom.and.right.mas_equalTo(-20); 
// 添加高度约束，让高度等于blackview 
make.height.equalTo(blackView); 
// 添加上边距约束（上边距 = 黑色view的下边框 + 偏移量20） 
make.top.equalTo(blackView.mas_bottom).offset(20); 
// 添加左边距（左边距 = 父容器纵轴中心 + 偏移量0） 
make.left.equalTo(weakSelf.view.mas_centerX).offset(0); }];
}
@end

案例四：

要求：
当键盘挡住输入框时，输入框自动向上弹到键盘上方。
实现：
这里需要使用到Masonry的另外一个方法mas_updateConstraints。这个方法用于更新控件约束。
具体的实现方式可以下载Demo来看，这里只贴出键盘弹出时的处理代码：

- (void)keyboardWillChangeFrameNotification:(NSNotification *)notification { 
// 获取键盘基本信息（动画时长与键盘高度）
 NSDictionary *userInfo = [notification userInfo]; 
CGRect rect = 
[userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue];

 CGFloat keyboardHeight = CGRectGetHeight(rect); 
CGFloat keyboardDuration = 
[userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];

 // 修改下边距约束
 [_textField mas_updateConstraints:^(MASConstraintMaker *make) { 
make.bottom.mas_equalTo(-keyboardHeight); }]; 

// 更新约束

 [UIView animateWithDuration:keyboardDuration animations:^{
 [self.view layoutIfNeeded]; }];
}

总结：

可以给控件添加left/right/top/bottom/size/height/width/insert约束；
库提供了三个方法，mas_makeConstraints添加约束，mas_updateConstraints修改约束，mas_remakeConstraints清除以前约束并添加新约束；
可以通过view.mas_bottom获得view的某个约束；
在约束的block中，使用make来给当前控件添加约束。

Masonry教程--IOS自适配,丢掉Autolayout吧

字数1286 阅读9699 评论9 喜欢45

文章来自http://www.brighttj.com/ios/ios-masonry-demo.html#comment-353