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 ...
随机推荐
- zoj 2807 Electrical Outlets
Electrical Outlets Time Limit: 2 Seconds Memory Limit: 65536 KB Roy has just moved into a new a ...
- E-R图
百度百科:E-R图 100多个数据库,一万多张表,能否使用一张E-R图来表示呢?它是可以的.数据设计依赖于企业的数据,而不是数据库的设计,对企业数据适当做归类,会直接导致数据设计,最终画出E-R图,数 ...
- Oracle 释放过度使用的Undo表空间
故障现象:UNDO表空间越来越大,长此下去最终数据因为磁盘空间不足而崩溃: 问题分析:产生问题的原因主要以下两点: 1. 有较大的事务量让Oracle Undo自动扩展,产生过度占用磁盘空间的情况: ...
- hdu 1500 dp
/* 状态转移方程式: dp[i][j]=Min(dp[i][j-1],dp[i-1][j-2]+(a[j-1]-a[j])*(a[j-1]-a[j])); 依次求出第i个人在第j个数时的所求的最小值 ...
- bzoj4950(二分图最大匹配)
[Wf2017]Mission Improbable Time Limit: 1 Sec Memory Limit: 1024 MBSubmit: 105 Solved: 49[Submit][S ...
- 可以学习相关框架【转:https://testerhome.com/topics/6283】
https://testerhome.com/topics/6283 单元测试方面(Java): Junit:本来想用我熟悉的testng,但是开发的同学说测试springmvc只能用Junit.所以 ...
- Android视图组成View
视图组成View 创建时间: 2013-9-13 10:51 更新时间: 2013-9-13 11:04
- python学习之-- 装饰器
高阶函数+嵌套函数 == 装饰器 什么是装饰器: 其实也是一个函数. 功能:为其他的函数添加附加功能 原则:不能修改被装饰的函数的源代码和调用方式 学习装饰器前首先要明白以下3条事项: 1:函数 即 ...
- POJ 1094 Sorting It All Out【拓扑排序】
题目链接: http://poj.org/problem?id=1094 题意: 给定前n个字母的大小关系,问你是否 根据前xxx个关系得到上升序列 所有关系都无法确定唯一的一个序列 第xxx个关系导 ...
- Junit中Assert.assertEquals()和Assert.assertSame方法有什么异同
1)提供的接口数量不完全相同.assertEquals支持boolean,long,int等等java primitiveType变量.assertSame只支持Object. 2)比较的逻辑不同,结 ...