![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Masonry
「已注销」
代码改变世界
展开
-
Masonry学习之前奏-纯代码实现 AutoLayout
在iOS6之前,大家都是通过UI控件的Frame属性和Autoresizing Mask来进行UI布局的。AutoLayout则是苹果公司在iOS6推出的一种基于约束的,描述性的布局系统。 Autolayout的使用又有多种方式: - 使用storyboard或xib在可视化界面中添加约束 - 使用代码添加约束 - 使用VFL(Visual Format Language)语言来添加约原创 2017-12-04 05:16:01 · 162 阅读 · 0 评论 -
Masonry学习之布局边距
iOS8以后,UIView多了一个新的属性:@property (nonatomic) UIEdgeInsets layoutMargins NS_AVAILABLE_IOS(8_0);本例就是对该属性的使用。 效果图: 代码:- (instancetype)init { self = [super init]; if (!self) return nil; UIVie原创 2017-12-07 12:24:28 · 1959 阅读 · 0 评论 -
Masonry学习之链式属性
在前面的Masonry基本布局中,我们完成了绿、红和蓝三个视图的布局,Masonry的基本布局操作方式大大简化了苹果原生的自动布局代码。然而,我们还可以更进一步,这就是Masonry的链式属性的写法。对于绿色视图,我们之前是这样写的:[greenView makeConstraints:^(MASConstraintMaker *make) { make.top.greaterTha原创 2017-12-07 11:50:00 · 252 阅读 · 0 评论 -
Masonry学习之Array
该例演示一组视图的约束的整体更新。核心代码如下:- (void)updateConstraints { [self.buttonViews updateConstraints:^(MASConstraintMaker *make) { make.baseline.equalTo(self.mas_centerY).with.offset(self.offset); }原创 2017-12-07 11:29:11 · 364 阅读 · 0 评论 -
Masonry学习之UIScrollView
这个例子比较简单,直接看布局的关键代码- (id)init { self = [super init]; if (!self) return nil; UIScrollView *scrollView = UIScrollView.new; self.scrollView = scrollView; scrollView.backgroundColor = [U原创 2017-12-07 11:18:44 · 167 阅读 · 0 评论 -
Masonry学习之UILabel
先看效果: 代码:- (id)init { self = [super init]; if (!self) return nil; // text courtesy of http://baconipsum.com/ self.shortLabel = UILabel.new; self.shortLabel.numberOfLines = 1; sel原创 2017-12-07 10:46:38 · 475 阅读 · 0 评论 -
Masonry学习之基本动画
先看效果:动画说明:这个简单动画的实质就是三个视图之间及三个视图与父视图之间的距离由10到100的重复不断的变化。代码说明:将需要做动画的约束保存起来:[self.animatableConstraints addObjectsFromArray:@[ make.edges.equal原创 2017-12-05 13:00:09 · 417 阅读 · 0 评论 -
Masonry学习之aspect fit
先看效果: 关键约束代码:topView(天蓝色视图)的left、right、和top与父视图相等。[self.topView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.right.and.top.equalTo(self); }];bottomView(即粉色视图)的left、r原创 2017-12-05 12:17:59 · 468 阅读 · 1 评论 -
Masonry学习之复合edges
先看结果: 再看代码:- (id)init { self = [super init]; if (!self) return nil; UIView *lastView = self; for (int i = 0; i < 10; i++) { UIView *view = UIView.new; view.backgroundCol原创 2017-12-05 01:15:06 · 4679 阅读 · 0 评论 -
Masonry学习之使用常量
使用常量的代码比较简单:- (id)init { self = [super init]; if (!self) return nil; UIView *purpleView = UIView.new; purpleView.backgroundColor = UIColor.purpleColor; purpleView.layer.borderColor =原创 2017-12-05 00:37:58 · 202 阅读 · 0 评论 -
Masonry学习之设置新的约束
例:主视图中有一个Button,位于主视图左上角,距离主视图的top、left的偏移为10,它的大小是100x100;当点击它的时候,它的大小没变,位置移动到右下角,其right、bottom距离主视图的right、bottom的偏移也均为10。这个例子与上一节的更新约束有什么不同呢?同样是约束发生了变化,上一节,只是约束的值发生的变化,约束的属性没发生变化,都是宽和高的改变。而这一节,当butto原创 2017-12-04 23:49:02 · 225 阅读 · 0 评论 -
Masonry学习之更新约束
何谓更新约束?个人以为即在添加了基本约束之后,UI交互过程中,需要改变原来的基本约束,谓之更新约束。一个简单的例子,主界面上有一个红色的视图,它的尺寸是100x100,中心点与主视图重合。当单击该视图时,其尺寸以一定的比例不断放大,但是其宽不能超过主视图的宽,同样,其高不能超过主视图的高。注意:官方的例子中,是用一个button做演示的,但是无论是直接运行官方的代码或者我自己重新写的代码,都无法达到原创 2017-12-04 23:27:57 · 1756 阅读 · 0 评论 -
Masonry学习之基本布局
何谓基本布局?个人以为即确定的一个或几个视图,设置固定的约束,约束不会发生更新和变化。 此处一例,来自Masonry官方例子,如下图所示:如果使用苹果原生的纯代码相对布局来添加约束,需要添加15条约束,约束的逻辑并不复杂,无非上下左右、等宽和等高,但是代码却十分繁琐,多达100多行。有兴趣可以自己写些看,尤其初学的话,最好动动手。那我们使用Masonry实现同样的约束布局又是怎样的呢?看代码:[g原创 2017-12-04 22:46:28 · 716 阅读 · 0 评论 -
Masonry学习之Distribute View
四个效果图: 综合上面几幅图,该例子要展示的就是多个视图的同轴等间距分布布局。代码说明: 四个视图对象存储到数组中,以四种不同的方式进行布局。方式一:[arr mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:20 leadSpacing:5 tailSpacing:5]; [arr m原创 2017-12-07 13:16:28 · 2629 阅读 · 0 评论