Masonry 比例(multipliedBy)

前言

说到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

@implementation AspectFitController

- (void)viewDidLoad {

[super viewDidLoad];

// Create views

UIView *topView = [[UIView alloc] init];

topView.backgroundColor = [UIColor redColor];

[self.view addSubview:topView];

UIView *topInnerView = [[UIView alloc] init];

topInnerView.backgroundColor = [UIColor greenColor];

[topView addSubview:topInnerView];

UIView *bottomView = [[UIView alloc] init];

bottomView.backgroundColor = [UIColor blackColor];

[self.view addSubview:bottomView];

UIView *bottomInnerView = [[UIView alloc] init];

bottomInnerView.backgroundColor = [UIColor blueColor];

[bottomView addSubview:bottomInnerView];

[topView mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.right.top.mas_equalTo(0);

make.height.mas_equalTo(bottomView);

}];

// width = height / 3

[topInnerView mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.right.mas_equalTo(topView);

make.width.mas_equalTo(topInnerView.mas_height).multipliedBy(3);

make.center.mas_equalTo(topView);

// 设置优先级

make.width.height.mas_equalTo(topView).priorityLow();

make.width.height.lessThanOrEqualTo(topView);

}];

[bottomView mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.right.bottom.mas_equalTo(0);

make.height.mas_equalTo(topView);

make.top.mas_equalTo(topView.mas_bottom);

}];

// width/height比为1/3.0,要求是同一个控件的属性比例

[bottomInnerView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.bottom.mas_equalTo(bottomView);

make.center.mas_equalTo(bottomView);

// 注意,这个multipliedBy的使用只能是设置同一个控件的,比如这里的bottomInnerView,

// 设置高/宽为3:1

make.height.mas_equalTo(bottomInnerView.mas_width).multipliedBy(3);

make.width.height.mas_equalTo(bottomView).priorityLow();

make.width.height.lessThanOrEqualTo(bottomView);

}];

}

@end

讲解

移除之前的所有约束,然后添加新约束的方法是:mas_remakeConstraints

我们的目标是点击时,将里面的往外面,外面的往里面,并且显示动画效果。其中,最关键的代码是:

1

2

3

make.height.mas_equalTo(bottomInnerView.mas_width).multipliedBy(3);

提示:使用multipliedBy必须是对同一个控件本身,比如,上面的代码中,我们都是对bottomInnerView.mas_width本身的,如果修改成相对于其它控件,会出问题。

我们就说说bottomInnerView的约束如何添加。 我们希望width/height比为1/3.0,首先,我们设置了其topbottom与父视图一致且始终在父视图中居中显示:

1

2

3

4

make.top.bottom.mas_equalTo(bottomView);

make.center.mas_equalTo(bottomView);

然后我们通过make.width.height.lessThanOrEqualTo设置了宽、高的最大值与父视图相同,然后设置了宽和高与父视图相等,但是优先级为最低,以保证子视图的宽高不超过父视图。

1

2

3

4

make.width.height.mas_equalTo(bottomView).priorityLow();

make.width.height.lessThanOrEqualTo(bottomView);

最后,我们设置了bottomInnerView的高为宽的3倍。

1

2

3

make.height.mas_equalTo(bottomInnerView.mas_width).multipliedBy(3);

时间: 2024-10-10 02:20:49

Masonry 比例(multipliedBy)的相关文章

Coding源码学习第四部分(Masonry介绍与使用(二))

接上篇,本篇继续对Masonry 进行学习,接上篇示例: (6)Masonry 布局实现iOS 计算器 1 - (void)exp4 { 2 WS(weakSelf); 3 // 申明区域,displayView 是显示布局,keyboardView 是键盘区域 4 UIView *displayView = [UIView new]; // 创建并添加 显示区域 5 [displayView setBackgroundColor:[UIColor blackColor]]; 6 [self.v

Coding源码学习第四部分(Masonry介绍与使用(三))

接上篇继续进行Masonry 的学习. (12)tableViewCell 布局 1 #import "TableViewController.h" 2 #import "TestTableViewCell.h" 3 4 @interface TableViewController ()<UITableViewDelegate, UITableViewDataSource> 5 6 @property(nonatomic, strong) UITable

使用Masonry搭建特殊布局时与xib的对比

之前只有比较浅的接触过Masonry.项目中大多数的布局还是用xib中的AutoLayout与手码的frame计算相结合,相信也会有很多项目和我一样是这两种布局的组合.其实xib各方面用的感觉都挺好,以前是性能问题,冲突问题饱受人诟病,但随着苹果的更新换代这些问题也逐渐趋向最小化. 我们团队整改的主要原因是为了更细粒度的组件化.因为将一块代码复用到另一个页面远比从xib中拖几个控件到别的页面来的要快,并且使用Masonry写出来的代码在控件间关系上非常清晰便于理解. 普通的布局就略过不说了,这里

masonry 学习笔记 一(基础尝试)

一.为什么要学masonry(why)? 目前iOS开发中大多数页面都已经开始使用Interface Builder的方式进行UI开发了,但是在一些变化比较复杂的页面,还是需要通过代码来进行UI开发的. 而且有很多比较老的项目,本身就还在采用纯代码的方式进行开发. 而现在iPhone和iPad屏幕尺寸越来越多,虽然开发者只需要根据屏幕点进行开发,而不需要基于像素点进行UI开发.但如果在项目中根据不同屏幕尺寸进行各种判断, 写死坐标的话,这样开发起来是很吃力的. 所以一般用纯代码开发UI的话,一般

Masonry 控件详解

1.   Masonry的属性 @property (nonatomic,strong,readonly)MASConstraint *left; //左侧 @property(nonatomic,strong,readonly) MASConstraint *top;//上侧 @property(nonatomic,strong,readonly)MASConstraint*right;//右侧 @property(nonatomic,strong,readonly)MASConstraint

Masonry -- 使用纯代码进行iOS应用的autolayout自适应布局

快速入门 安装 使用 CocoaPods 安装 pod 'Masonry' 推荐在你的在 prefix.pch 中引入头文件: // 定义这个常量,就可以在使用Masonry不必总带着前缀 `mas_`: #define MAS_SHORTHAND // 定义这个常量,以支持在 Masonry 语法中自动将基本类型转换为 object 类型: #define MAS_SHORTHAND_GLOBALS #import "Masonry.h" 使用 初始Masonry 这是使用MASCo

第三方框架-纯代码布局:Masonry的简单使用

Masonry是一个对系统NSLayoutConstraint进行封装的第三方自动布局框架,采用链式编程的方式提供给开发者API.系统AutoLayout支持的操作,Masonry都支持,相比系统API功能来说,Masonry是有过之而无不及. Masonry采取了链式编程的方式,代码理解起来非常清晰易懂,而且写完之后代码量看起来非常少.之前用NSLayoutConstraint写很多代码才能实现的布局,用Masonry最少一行代码就可以搞定.下面看到Masonry的代码就会发现,太简单易懂了.

Masonry介绍与使用实践:快速上手Autolayout

以上是纯手写代码所经历的关于页面布局的三个时期 在iphone1-iphone3gs时代 window的size固定为(320,480) 我们只需要简单计算一下相对位置就好了 在iphone4-iphone4s时代 苹果推出了retina屏 但是给了码农们非常大的福利:window的size不变 在iphone5-iphone5s时代 window的size变了(320,568) 这时autoresizingMask派上了用场(为啥这时候不用Autolayout? 因为还要支持ios5呗) 简单

iOS — Autolayout之Masonry解读

前言 1 MagicNumber -> autoresizingMask -> autolayout 以上是纯手写代码所经历的关于页面布局的三个时期 在iphone1-iphone3gs时代 window的size固定为(320,480) 我们只需要简单计算一下相对位置就好了 在iphone4-iphone4s时代 苹果推出了retina屏 但是给了码农们非常大的福利:window的size不变 在iphone5-iphone5s时代 window的size变了(320,568) 这时auto