iOS 布局篇(二) Masonry 使用与说明
来源:互联网 发布:淘宝钻石展位价格 编辑:程序博客网 时间:2024/06/02 01:09
对于iOS 开发来说,很多时候,我们用不到原生的开发语言去开发,使用第三方框架,能帮我们节省很多的时间,而且看起来更加的清晰易懂,VFL 语言看起来和维护起来都比较麻烦,而且出错率比较高,感谢大神提供的 Masonry 提供的布局框架。github 地址为:Masonry github 地址
如果想要使一个 view 离它的 superView 上下左右边距各为10的话,如果用 VFL 标记语言,起码要添加两个约束,还需要设置 view 的translatesAutoresizingMaskIntoConstraints 等等,最后还要把约束 add 到 superview 上,是不是很麻烦,那看看 Masonry 是怎么处理的吧
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10); [view mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.mas_top).with.offset(padding.top); //with is an optional semantic filler make.left.equalTo(self.mas_left).with.offset(padding.left); make.bottom.equalTo(self.mas_bottom).with.offset(-padding.bottom); make.right.equalTo(self.mas_right).with.offset(-padding.right); }];
是不是看起来简洁大方啊
那么现在来看看这些基本支持的属性吧
/** * The following properties return a new MASViewConstraint * with the first item set to the makers associated view and the appropriate MASViewAttribute */@property (nonatomic, strong, readonly) MASConstraint *left; //左侧@property (nonatomic, strong, readonly) MASConstraint *top; //上侧@property (nonatomic, strong, readonly) MASConstraint *right; //右侧@property (nonatomic, strong, readonly) MASConstraint *bottom; //下侧@property (nonatomic, strong, readonly) MASConstraint *leading; //首部@property (nonatomic, strong, readonly) MASConstraint *trailing; //尾部@property (nonatomic, strong, readonly) MASConstraint *width; //宽@property (nonatomic, strong, readonly) MASConstraint *height; //高@property (nonatomic, strong, readonly) MASConstraint *centerX; 横向中心点@property (nonatomic, strong, readonly) MASConstraint *centerY; //纵向中心点@property (nonatomic, strong, readonly) MASConstraint *baseline; //文本基线
好了,我们把刚刚的官方示例运用到咱们代码里面看看是不是和我们想象的效果是一样的呢
创建了一个 redview
然后关键代码如下:
///先将控件添加到视图上 我这里采用的是懒加载 [self.view addSubview:self.redView]; UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10); [self.redView mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.view.mas_top).with.offset(padding.top); //with is an optional semantic filler make.left.equalTo(self.view.mas_left).with.offset(padding.left); make.bottom.equalTo(self.view.mas_bottom).with.offset(-padding.bottom); make.right.equalTo(self.view.mas_right).with.offset(-padding.right); }];
运行结果如下
我们可以看到 和我们想象的结果是一样的,离superView 也就是 self.view 边距上下左右各为10
现在我们换一种方式,中心点等于superView的中心,宽是self.view 的 width - 20 高是 self.view 的 height - 20 看看是否也是一样的效果
主要的代码如下:
[self.redView mas_makeConstraints:^(MASConstraintMaker *make) { make.centerX.mas_equalTo(self.view.mas_centerX); //with is an optional semantic filler make.centerY.mas_equalTo(self.view.mas_centerY); make.width.mas_equalTo(self.view.frame.size.width - 20); make.height.mas_equalTo(self.view.frame.size.height - 20); }];
我们运行会发现,结果是一样的
这里我遇见一个问题,当我把
make.centerX.mas_equalTo(self.view.mas_centerX); make.centerY.mas_equalTo(self.view.mas_centerY);
这两行替换成
make.centerX.mas_equalTo(self.view.center.x); make.centerY.mas_equalTo(self.view.center.y);
结果运行效果如下
发现 redview 的起始点居然是以 self.view.center.x+10开始的,所以经过多次尝试后 发现
make.centerX.mas_equalTo(偏移量)make.centerX.mas_equalTo(0)表示居中
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;/*mas_makeConstraints 只负责新增约束 Autolayout不能同时存在两条针对于同一对象的约束 否则会报错 mas_updateConstraints 针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况mas_remakeConstraints 则会清除之前的所有约束 仅保留最新的约束三种函数善加利用 就可以应对各种情况了*/
使用到这里,细心的同学们应该会发现,在使用的时候有一个mas_equalTo和一个 equalTo,那么两者之间有什么区别呢,我们点进去看mas_equalTo 会发现其实是一个宏定义
#define mas_equalTo(...) equalTo(MASBoxValue((__VA_ARGS__)))
是对 MASBoxValue 的一层包装点进去看会发现MASBoxValue对一系列的参数做了包装 包装成了NSValue对象和NSNumber对象
在这里介绍一下 优先级的使用
.priorityHigh <======> UILayoutPriorityDefaultHigh 高优先级.priorityMedium <========> between high and low 介于高/低之间.priorityLow <=========> UILayoutPriorityDefaultLow 低优先级make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();make.top.equalTo(label.mas_top).with.priority(600);
具体示例代码如下:
[self.redView mas_makeConstraints:^(MASConstraintMaker *make) { make.width.mas_equalTo(self.view.frame.size.width - 20); make.height.mas_equalTo(self.view.frame.size.height - 20); ///这里设置了优先级 make.top.mas_equalTo(100).with.priority(600); make.centerX.mas_equalTo(self.view); ///这里的优先级比上面 top 的优先级低,所以这个约束会被忽略 make.centerY.mas_equalTo(self.view).with.priority(500); }];
运行效果如下
等比例自适应
.multipliedBy 允许你指定一个两个视图的某个属性等比例变化
item1.attribute1 = multiplier × item2.attribute2 + constant,此为约束的计算公式, .multipliedBy本质上是用来限定multiplier的
注意,因为编程中的坐标系从父视图左上顶点开始,所以指定基于父视图的left或者top的multiplier是没有意义的,因为父视图的left和top总为0.
如果你需要一个视图随着父视图的宽度和高度,位置自动变化,你应该同时指定 right,bottom,width,height与父视图对应属性的比例(基于某个尺寸下的相对位置计算出的比例),并且constant必须为0.
// 指定宽度为父视图的 1/4.
make.width.equalTo(superview).multipliedBy(0.25);
示例代码如下
[self.redView mas_makeConstraints:^(MASConstraintMaker *make) { make.width.equalTo(self.view).multipliedBy(0.25); make.height.mas_equalTo(self.view.frame.size.height - 20); make.centerX.mas_equalTo(self.view); make.centerY.mas_equalTo(self.view); }];
运行结果如下
还有 Masonry 使用了很多简洁的语法使代码量减少
1.edges 边界
[self.redView mas_makeConstraints:^(MASConstraintMaker *make) { make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(40, 40, 40, 40)); }];
运行结果如下
2.size 尺寸
示例代码如下:
[self.redView mas_makeConstraints:^(MASConstraintMaker *make) { make.top.mas_equalTo(0); make.left.mas_equalTo(0); make.size.equalTo(self.view).sizeOffset(CGSizeMake(-200, -200)); }];
运行结果如下
我们会发现 这个 redview 的 size 等于 self.view的宽 高 各减去200
好了 masonry 的使用学习方法就暂且告一段落,日后有复杂的布局使用到 masonry 来布局的话,我们可以继续贴出代码来分析与布局哦
- iOS 布局篇(二) Masonry 使用与说明
- Masonry与iOS自动布局
- Masonry与iOS自动布局
- iOS- Masonry自动布局框架介绍与使用实践
- iOS 自适应布局库-Masonry的使用
- iOS-使用代码约束布局(Masonry)
- iOS Masonry介绍与使用
- IOS Masonry自动布局
- iOS 自动布局 Masonry
- ios Masonry布局
- iOS开发——布局框架Masonry的介绍与使用
- Masonry介绍与使用实践(快速上手Autolayout)-让IOS自动化相对布局更简单
- iOS Masonry使用注意篇
- Masonry自动布局使用
- UIScrollView使用masonry布局
- iOS---第三方自动布局 - Masonry的使用
- iOS自动布局第三方库Masonry的使用
- iOS - 使用"Masonry"库做约束(自动布局)
- sge安装
- CentOS安装JDK常用的三种方法
- 一天天
- 第3章 装配Bean---高级装配--笔记1
- angularJs功能实现简集
- iOS 布局篇(二) Masonry 使用与说明
- java提高篇(九)-----详解匿名内部类
- C#学习—连接数据库通用增删改,查询
- laravel--5 Eloquent ORM("优雅的"对象关系映射)
- JAVA设计模式初探之装饰者模式
- java中byte数组和int,long,short之间的转换
- java提高篇(十)-----强制类型转换
- gcc -I -L -l区别
- 关于Gson解析复杂类型的json数据