Masonry自动布局:复合约束
前言
说到iOS
自动布局,有很多的解决办法。有的人使用xib/storyboard
自动布局,也有人使用frame
来适配。对于前者,笔者并不喜欢,也不支持。对于后者,更是麻烦,到处计算高度、宽度等,千万大量代码的冗余,对维护和开发的效率都很低。
笔者在这里介绍纯代码自动布局的第三方库:Masonry
。这个库使用率相当高,在全世界都有大量的开发者在使用,其star
数量也是相当高的。
效果图
本节详解Masonry
的以动画的形式更新约束的基本用法,先看看效果图:
我们这里初始按钮是一个很小的按钮,点击就不断放大,最大就放大到全屏幕。
核心代码
看下代码:
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
@interface CompositeController ()
@property (nonatomic, strong) NSMutableArray *viewArray;
@property (nonatomic, assign) BOOL isNormal;
@end
@implementation CompositeController
- (void)viewDidLoad {
[super viewDidLoad];
UIView *lastView = self.view;
for (int i = 0; i < 6; i++) {
UIView *view = UIView.new;
view.backgroundColor = [self randomColor];
view.layer.borderColor = UIColor.blackColor.CGColor;
view.layer.borderWidth = 2;
[self.view addSubview:view];
[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(lastView).insets(UIEdgeInsetsMake(20, 20, 20, 20));
}];
lastView = view;
[self.viewArray addObject:view];
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self
action:@selector(onTap)];
[view addGestureRecognizer:tap];
}
self.isNormal = YES;
}
- (void)onTap {
UIView *lastView = self.view;
if (self.isNormal) {
for (NSInteger i = self.viewArray.count - 1; i >= 0; --i) {
UIView *itemView = [self.viewArray objectAtIndex:i];
[itemView mas_remakeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(lastView).insets(UIEdgeInsetsMake(20, 20, 20, 20));
}];
[self.view bringSubviewToFront:itemView];
lastView = itemView;
}
} else {
for (NSInteger i = 0; i < self.viewArray.count; ++i) {
UIView *itemView = [self.viewArray objectAtIndex:i];
[itemView mas_remakeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(lastView).insets(UIEdgeInsetsMake(20, 20, 20, 20));
}];
[self.view bringSubviewToFront:itemView];
lastView = itemView;
}
}
[self.view setNeedsUpdateConstraints];
[self.view updateConstraintsIfNeeded];
[UIView animateWithDuration:0.5 animations:^{
[self.view layoutIfNeeded];
} completion:^(BOOL finished) {
self.isNormal = !self.isNormal;
}];
}
- (NSMutableArray *)viewArray {
if (_viewArray == nil) {
_viewArray = [[NSMutableArray alloc] init];
}
return _viewArray;
}
- (UIColor *)randomColor {
CGFloat hue = ( arc4random() % 256 / 256.0 ); // 0.0 to 1.0
CGFloat saturation = ( arc4random() % 128 / 256.0 ) + 0.5; // 0.5 to 1.0, away from white
CGFloat brightness = ( arc4random() % 128 / 256.0 ) + 0.5; // 0.5 to 1.0, away from black
return [UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:1];
}
@end
|
讲解
移除之前的所有约束,然后添加新约束的方法是:mas_remakeConstraints
。
我们的目标是点击时,将里面的往外面,外面的往里面,并且显示动画效果。其中,最关键的代码是:
1
2
3
4
|
[self.view bringSubviewToFront:itemView];
lastView = itemView;
|
通过循环获取各个视图,外变成里,里变成外,我们一定要记录相对于下一个view
以更新下一个视图的相对边缘。
想要更新约束时添加动画,就需要调用关键的一行代码:setNeedsUpdateConstraints
,这是选择对应的视图中的约束需要更新。
对于updateConstraintsIfNeeded
这个方法并不是必须的,但是有时候不调用就无法起到我们的效果。但是,官方都是这么写的,从约束的更新原理上讲,这应该写上。我们要使约束立即生效,就必须调用layoutIfNeeded
此方法。看下面的方法,就是动画更新约束的核心代码:
1
2
3
4
5
6
7
8
9
10
|
// 告诉self.view约束需要更新
[self.view setNeedsUpdateConstraints];
// 调用此方法告诉self.view检测是否需要更新约束,若需要则更新,下面添加动画效果才起作用
[self.view updateConstraintsIfNeeded];
[UIView animateWithDuration:0.3 animations:^{
[self.view layoutIfNeeded];
}];
|
Masonry自动布局:复合约束的更多相关文章
- Masonry自动布局
介绍,入门: http://www.cocoachina.com/ios/20141219/10702.html 下载: http://code.cocoachina.com/detail/30114 ...
- Masonry控制台打印约束冲突问题解决
不知道你是不是视图的布局也是用的第三方Masonry,在使用中是不是也遇到了控制台约束冲突的警告打印,看下图: 从输出的信息可以知道,有的控件的约束明显重复了设置,所以指出了是哪个控件,重复设置了哪些 ...
- Masonry自动布局使用
Masonry是一个轻量级的布局框架,采用更好的语法封装自动布局,它有自己的布局DSL.简洁明了并具有高可读性 而且同时支持 iOS 和 Max OS X. 下载 NSLayoutConstraint ...
- Masonry remake更新约束
前言 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万 ...
- Masonry 动画更新约束
前言 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万 ...
- Masonry第三方代码约束
#import "RootViewController.h" #import "Masonry.h" @interface RootViewController ...
- IOS7配置自动布局的约束
上一篇博客记录了怎么使用代码对视图进行约束,原文:点击打开链接 这次记录一下关于自动布局的例子, 1.创建一个Single View Application : 2.选择自动布局: 3.拖拽两个Tex ...
- Masonry自动布局与UIScrolView适配
Masonry介绍 Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性 而且同时支持 iOS 和 Max OS X.可以通过cocoa ...
- IOS Masonry自动布局
之前项目用Frame布局,这个项目登录用了VFL,后来觉得用Masonry,前天布局TableViewCell时用了下 ,觉得还不错. #import "Masonry.h" #i ...
随机推荐
- POJ 1379 (随机算法)模拟退火
题目大意: 给定一堆点,找到一个点的位置使这个点到所有点中的最小距离最大 这里数据范围很小,精度要求也不高,我们这里可以利用模拟退火的方法,随机找到下一个点,如果下一个点比当前点优秀就更新当前点 参考 ...
- [codevs3622] 假期(单调队列)
传送门 首先考虑暴力做法,可以先求一遍前缀和 sum,然后ans = max(ans, sum[i] - sum[k]) (i - q <= k <= i - p) 但这个肯定会超时. 仔 ...
- JAVA自定义监听器的示例代码
JAVA用户自定义事件监听完整例子 JAVA用户自定义事件监听完整例子- —sunfruit 很多介绍用户自定义事件都没有例子,或是例子不全,下面写了一个完整的例子,并写入了注释以便参考,完整 ...
- SpringBoot自定义Filter
SpringBoot自定义Filter SpringBoot自动添加了OrderedCharacterEncodingFilter和HiddenHttpMethodFilter,当然我们可以自定 义F ...
- 【收藏】SSH原理与运用
http://www.ruanyifeng.com/blog/2011/12/ssh_remote_login.html http://www.ruanyifeng.com/blog/2011/12/ ...
- [CodePlus2017]汀博尔
Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 158 Solved: 61[Submit][Status][Discuss] Description ...
- JS变量写到HTML页面中并修改变量值(前台处理数据序号问题)
有时候我们在前台需要对序号进行处理,我们需要将JS变量写到页面中进行显示. 第一种方式:后台处理 第二种方式:JS中定义全局变量,然后进行显示,可以书写一个JS函数对不同的需要进行不同的替换,也就可以 ...
- Search in Rotated Sorted Array(二分查找)
Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...
- 如何使用google解决问题
如何使用google解决问题 redguardtoo著 文章选自2004年<程序员>杂志第8期P56 前面收集了篇如何问问题的文章就是<学会提问>http://blog.pro ...
- Java异常错误重试方案研究(转)(spring-retry/guava-retryer)
业务场景 应用中需要实现一个功能: 需要将数据上传到远程存储服务,同时在返回处理成功情况下做其他操作.这个功能不复杂,分为两个步骤:第一步调用远程的Rest服务逻辑包装给处理方法返回处理结果:第二步拿 ...