Masonry的使用思考
2016-06-06 本文已影响477人
iYeso
今天我想写一下关于对Masonry的使用总结 不得不说Masonry确实非常好用 好用好用好用到爆!!! 在使用之前请 查看Masonry的基本用法 作者在Github上的链接Masonry的使用
0. Masonry的使用总图
Snip20160606_11.png
1. 我们首先搭建环境和使用cocoaPods加载Masonry到你的工程中
Snip20160606_8.png
2. 练习开始: 左上角放一个100* 100的正方形的view
我们开始导入框架和实现
2.1我们的要实现的目标, 看图说话
Snip20160606_9.png
2.2 代码:
#import "ViewController.h"
#import <Masonry.h>
@interface ViewController ()
@property (strong, nonatomic)UIView *v1;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self demo01];
}
- (void)demo01{
UIView *view1 = [[UIView alloc] init];
view1.backgroundColor = [UIColor redColor];
[self.view addSubview:view1];
self.v1 = view1;
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.top.mas_equalTo(10);
make.size.mas_equalTo(CGSizeMake(100, 100));
}];
}
大家感觉怎么样 是不是很简单!
3. 实现在view两侧各有一个100* 100的view
3.1 看图说话 实现的具体
Snip20160606_10.png
3.2 代码实现
#import "ViewController.h"
#import <Masonry.h>
@interface ViewController ()
@property (strong, nonatomic)UIView *v1;
@property (strong, nonatomic)UIView *v2;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self demo01];
}
- (void)demo01{
UIView *view1 = [[UIView alloc] init];
view1.backgroundColor = [UIColor redColor];
[self.view addSubview:view1];
self.v1 = view1;
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.top.mas_equalTo(10);
make.size.mas_equalTo(CGSizeMake(100, 100));
}];
UIView *view2 = [[UIView alloc] init];
view2.backgroundColor = [UIColor blueColor];
[self.view addSubview:view2];
self.v2 = view2;
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(10);
make.right.mas_equalTo(-10);
make.size.mas_equalTo(CGSizeMake(100, 100));
}];
}
怎么样 感觉还可以吧! 继续加油 我们要发大招了
4. 重点!!!!
4.1 实现的现象 当我点击屏幕的时候 黄色的view向右边运动
masonry.gif
4.2 大家可以想想怎么实现那??
根据我的能力水平我可以想到的是
**1. 使用mas_remakeConstraints:^(MASConstraintMaker *make)先去去掉我们以前所有的约束设置, 重新设置约束!!
**
2. 我们使用mas_updateConstraints这个方法. 从字面意义上看更新就是对改变的做处理呗, 不需要改变不需要修改
像我们今天的这种情况,我们黄色正方形的左侧保持变化, 开始我们的left是依据红色的view的左侧作为参照, 运动到我们的最右边黄色的left是依据蓝色的left作为参照.
在Masonry中有一个更新约束的机制是:
- ViewA的某个约束从相对与ViewB 更改到相对于ViewC的
- ViewA的某个约束从相对于某个View给成具体的数值(反之一样)
这两种情况我们需要卸载以前约束, 设置一个新的约束.
4.3 我们使用 mas_remakeConstraints来实现
#import "ViewController.h"
#import <Masonry.h>
@interface ViewController ()
@property (strong, nonatomic)UIView *v1;
@property (strong, nonatomic)UIView *v2;
@property (strong, nonatomic)UIView *v3;
@property (strong, nonatomic)MASConstraint *cons ;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self demo01];
}
- (void)demo01{
UIView *view1 = [[UIView alloc] init];
view1.backgroundColor = [UIColor redColor];
[self.view addSubview:view1];
self.v1 = view1;
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.top.mas_equalTo(10);
make.size.mas_equalTo(CGSizeMake(100, 100));
}];
UIView *view2 = [[UIView alloc] init];
view2.backgroundColor = [UIColor blueColor];
[self.view addSubview:view2];
self.v2 = view2;
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(10);
make.right.mas_equalTo(-10);
make.size.mas_equalTo(CGSizeMake(100, 100));
}];
UIView *view3 = [[UIView alloc] init];
view3.backgroundColor = [UIColor yellowColor];
[self.view addSubview:view3];
self.v3 = view3;
[view3 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(view1.mas_bottom).offset(10);
self.cons = make.left.mas_equalTo(view1);
make.size.mas_equalTo(CGSizeMake(100, 100));
}];
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
[self.v3 mas_remakeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(self.v1.mas_bottom).offset(10);
self.cons = make.left.mas_equalTo(self.v2);
make.size.mas_equalTo(CGSizeMake(100, 100));
}];
[UIView animateWithDuration:2 animations:^{
[self.view layoutIfNeeded];
} completion:^(BOOL finished) {
[UIView animateWithDuration:2 animations:^{
[self.v3 mas_remakeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(self.v1.mas_bottom).offset(10);
self.cons = make.left.mas_equalTo(self.v1);
make.size.mas_equalTo(CGSizeMake(100, 100));
}];
[self.view layoutIfNeeded];
}];
}];
}
4.4 使用mas_updateConstraints完成数据的循环
#import "ViewController.h"
#import <Masonry.h>
@interface ViewController ()
@property (strong, nonatomic)UIView *v1;
@property (strong, nonatomic)UIView *v2;
@property (strong, nonatomic)UIView *v3;
@property (strong, nonatomic)MASConstraint *cons ;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self demo01];
}
- (void)demo01{
UIView *view1 = [[UIView alloc] init];
view1.backgroundColor = [UIColor redColor];
[self.view addSubview:view1];
self.v1 = view1;
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.top.mas_equalTo(10);
make.size.mas_equalTo(CGSizeMake(100, 100));
}];
UIView *view2 = [[UIView alloc] init];
view2.backgroundColor = [UIColor blueColor];
[self.view addSubview:view2];
self.v2 = view2;
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(10);
make.right.mas_equalTo(-10);
make.size.mas_equalTo(CGSizeMake(100, 100));
}];
UIView *view3 = [[UIView alloc] init];
view3.backgroundColor = [UIColor yellowColor];
[self.view addSubview:view3];
self.v3 = view3;
[view3 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(view1.mas_bottom).offset(10);
self.cons = make.left.mas_equalTo(view1);
make.size.mas_equalTo(CGSizeMake(100, 100));
}];
}
// MARK: 我们使用 mas_updateConstraints
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
[UIView animateWithDuration:2 animations:^{
[self.v3 mas_updateConstraints:^(MASConstraintMaker *make) {
[self.cons uninstall];
self.cons = make.left.equalTo(self.v2.mas_left);
}];
[self.view layoutIfNeeded];
} completion:^(BOOL finished) {
[UIView animateWithDuration:2 animations:^{
[self.v3 mas_updateConstraints:^(MASConstraintMaker *make) {
[self.cons uninstall];
self.cons = make.left.equalTo(self.v1.mas_left);
}];
[self.view layoutIfNeeded];
}];
}];
}
代码下载地址: 我的github
如果有问题 请留言.如果感觉喜欢,或者有任何疑问 请留言 或者加我qq(2385560868)
