之前写Autolayout都是用xib或者非常非常诡异的纯代码，就算用了VFL也只是增加了可读性，代码并没有减少，现在发现了一个第三方框架Masonry觉得有必要学习一下，这里记录下学习笔记，还有一些之前用Autolayout忽略的知识
简单说一下Masonry的使用，可以使用三个方法
|
1 2 3 |
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block; - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block; - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block; |
语法基于block，可以单独设置间距，或者一次性设置所有间距，或者链式间距
下面是让一个视图放入父视图里的代码
|
1 2 3 4 5 6 7 8 9 10 |
make.edges.equalTo(sv).with.insets(UIEdgeInsetsMake(10, 10, 10, 10)); /* 单独设置 make.top.equalTo(sv).with.offset(10); make.left.equalTo(sv).with.offset(10); make.bottom.equalTo(sv).with.offset(-10);//这里要注意负值，理解为make-sv=offset make.right.equalTo(sv).with.offset(-10); */ /* 链式 make.top.left.bottom.and.right.equalTo(sv).with.insets(UIEdgeInsetsMake(10, 10, 10, 10)); */ |
下面是两个视图关系的代码
[greenView makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(superview.top).offset(padding);
make.left.equalTo(superview.left).offset(padding);
make.right.equalTo(redView.left).offset(-padding);
make.width.equalTo(redView.width);
make.bottom.equalTo(superview.bottom).offset(-padding);
}];
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(superview.top).with.offset(padding); //with with
make.left.equalTo(greenView.right).offset(padding); //without with
make.right.equalTo(superview.right).offset(-padding);
make.width.equalTo(greenView.width);
make.bottom.equalTo(superview.bottom).offset(-padding);
}];
写Scroll的例子
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
- (void)generateContent { UIView* contentView = UIView.new; [self.scrollView addSubview:contentView]; [contentView makeConstraints:^(MASConstraintMaker *make) { make.edges.equalTo(self.scrollView); make.width.equalTo(self.scrollView); }]; UIView *lastView; CGFloat height = 25; for (int i = 0; i < 10; i++) { UIView *view = UIView.new; view.backgroundColor = [self randomColor]; [contentView addSubview:view]; [view mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(lastView ? lastView.bottom : @0); make.left.equalTo(@0); make.width.equalTo(contentView.width); make.height.equalTo(@(height)); }]; height += 25; lastView = view; } [contentView makeConstraints:^(MASConstraintMaker *make) { make.bottom.equalTo(lastView.bottom);//这里比较关键 }]; } |
高宽比ratio的例子
下面列举了两种写法
一种是ratio宽高定比以后，设定一个宽度，其他自己算
另一种是ratio宽高比以后，设定宽高都小于一个范围，其他自己算，第二种不太容易理解，暂时使用第一种
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
// 设置两个父视图，上下排放，高度一样 [self addSubview:self.topView]; [self.topView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.right.and.top.equalTo(self); }]; [self addSubview:self.bottomView]; [self.bottomView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.right.and.bottom.equalTo(self); make.top.equalTo(self.topView.mas_bottom); make.height.equalTo(self.topView); }]; // 上面父视图里添加一个宽高比7:1的子视图 [self.topView addSubview:self.topInnerView]; [self.topInnerView mas_makeConstraints:^(MASConstraintMaker *make) { make.width.equalTo(self.topInnerView.mas_height).multipliedBy(7);//ratio make.width.equalTo(self.topView.width);//定宽度 make.center.equalTo(self.topView);//设定位置后自己算 }]; [self.bottomView addSubview:self.bottomInnerView]; [self.bottomInnerView mas_makeConstraints:^(MASConstraintMaker *make) { make.height.equalTo(self.bottomInnerView.mas_width).multipliedBy(2);//ratio //第二种设置方式不太熟悉 make.width.and.height.lessThanOrEqualTo(self.bottomView); make.width.and.height.equalTo(self.bottomView).with.priorityLow(); make.center.equalTo(self.bottomView); }]; |
简单动画
下面实现一个简单的button，点击以后会放大，关键的是下面两个方法，对于一个自定义的View来说，updateConstrains要重写，调用动画的时候会调用这个方法。进行动画也要有固定的模式，如下面代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
// this is Apple's recommended place for adding/updating constraints - (void)updateConstraints { [self.growingButton updateConstraints:^(MASConstraintMaker *make) { make.center.equalTo(self); make.width.equalTo(@(self.buttonSize.width)).priorityLow(); make.height.equalTo(@(self.buttonSize.height)).priorityLow(); make.width.lessThanOrEqualTo(self); make.height.lessThanOrEqualTo(self); }]; //according to apple super should be called at end of method [super updateConstraints]; } - (void)didTapGrowButton:(UIButton *)button { self.buttonSize = CGSizeMake(self.buttonSize.width * 1.3, self.buttonSize.height * 1.3); // tell constraints they need updating [self setNeedsUpdateConstraints]; // update constraints now so we can animate the change [self updateConstraintsIfNeeded]; [UIView animateWithDuration:0.4 animations:^{ [self layoutIfNeeded]; }]; } |
AutoLayout几个更新方法的区别
- setNeedsLayout：告知页面需要更新，但是不会立刻开始更新。执行后会立刻调用layoutSubviews。
- layoutIfNeeded：告知页面布局立刻更新。所以一般都会和setNeedsLayout一起使用。如果希望立刻生成新的frame需要调用此方法，利用这点一般布局动画可以在更新布局后直接使用这个方法让动画生效。
- layoutSubviews：系统重写布局
- setNeedsUpdateConstraints：告知需要更新约束，但是不会立刻开始
- updateConstraintsIfNeeded：告知立刻更新约束
- updateConstraints：系统更新约束