iOS开发 Masonry的简单使用
首先,在正式使用Masonry之前,我们先来看看在xib中我们是如何使用AutoLayout


从图中我们可以看出,只要设置相应得局限,控制好父视图与子视图之间的关系就应该很ok的拖出你需要的需求。这里就不详细讲解具体拖拽的方法.....
然后,我们按着上图的属性来看看如何简单得使用Masonry
这里是Masonry给我们的属性
@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; //文本基线
属性有了,接着我们应该怎么在视图中添加约束呢,Masonry给我们提供了3个方法
//新增约束
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;//更新约束
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;//清楚之前的所有约束,只会保留最新的约束
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
合理的利用这个3个函数,基本上可以应对任何情况了
准备工作已经完成,我们来看几个小demo
1.居中一个view
// 防止block中的循环引用
__weak typeof (self) weakSelf = self;
// 初始化一个View
UIView *bgView = [[UIView alloc]init];
bgView.backgroundColor = [UIColor redColor];
[self.view addSubview:bgView];
// 使用mas_makeConstraints添加约束
[bgView mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(weakSelf.view);
make.size.mas_equalTo(CGSizeMake(200, 200));
}];

是不是很简单,这里有一点要必须注意下,添加约束前必须要把view添加到视图上。
那我要是不想固定他得宽高呢,让view的大小根据间距来控制怎么做
我们来设置一个基于父视图间距为10的view
[bgView mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(weakSelf.view);
make.edges.mas_offset(UIEdgeInsetsMake(10, 10, 10, 10));
}];
这样就ok了!!!
make.edges.mas_offset(UIEdgeInsetsMake(10, 10, 10, 10));
等同于
make.top.equalTo(weakSelf.view).with.offset(10);
make.left.equalTo(weakSelf.view).with.offset(10);
make.bottom.equalTo(weakSelf.view).with.offset(-10);
make.right.equalTo(weakSelf.view).with.offset(-10);
2.多个view
2个view横向居中,第二个view距离第一个view间距为10
UIView *view1 = [[UIButton alloc]init];
view1.backgroundColor = [UIColor redColor];
[self.view addSubview:view1];
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(90, 90));
make.centerX.equalTo(weakSelf.view);
make.top.width.offset(90);
}];
UIView *view2 = [[UILabel alloc]init];
view2.backgroundColor = [UIColor yellowColor];
[self.view addSubview:view2];
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(100, 100));
make.centerX.equalTo(view1);
make.top.equalTo(view1.mas_bottom).with.offset(20);
}];

大家有没有看到第二个view代码中
make.top.equalTo(view1.mas_bottom).with.offset(20);
view1.mas_bottom 是什么意思呢?如果只写view1,Masonry会默认是view1中最上面开始算起,也就是view2 间距view1 Y轴开始20的间距
通过这个也就可以很方便的设置view同另一个view之间上下左右的间距了
大家不妨试试view.mas_top view.mas_left view.mas_right 的效果是什么样得了
下面我附上一个完整的界面demo,大家可以看看

代码如下:
- (void)setupFrame {
__weak typeof(self) weakSelf = self;
//上传头像
UIButton *iconBtn = [[UIButton alloc]init];
[iconBtn setCornerRadius:45];
[iconBtn setBackgroundImage:[UIImage imageNamed:@"huantouxiang"] forState:UIControlStateNormal];
[iconBtn addTarget:self action:@selector(iconButton) forControlEvents:UIControlEventTouchDown];
[self.view addSubview:iconBtn];
self.iconBtn = iconBtn;
[self.iconBtn mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(90, 90));
make.centerX.equalTo(weakSelf.view);
make.top.width.offset(90);
}];
//上传社区头像文字提醒
UILabel *iconLabel = [[UILabel alloc]init];
iconLabel.textColor = c3;
iconLabel.text = @"上传社团头像";
iconLabel.font = [UIFont systemFontOfSize:15];
[self.view addSubview:iconLabel];
[iconLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(iconBtn);
make.top.equalTo(iconBtn.mas_bottom).with.offset(20);
}];
//社团编辑图标
UIImageView *editIcon = [[UIImageView alloc]init];
editIcon.image = [UIImage imageNamed:@"bianxie"];
[self.view addSubview:editIcon];
[editIcon mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(25, 20));
make.left.equalTo(weakSelf.view).with.offset(10);
make.top.equalTo(iconLabel.mas_bottom).with.offset(30);
}];
//社团名
UITextField *nameText = [[UITextField alloc]init];
nameText.placeholder = @"请填写社区名(社团名最多6个字)";
[self.view addSubview:nameText];
self.nameText = nameText;
[nameText mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(@20);
make.centerY.equalTo(editIcon);
make.right.equalTo(weakSelf.view).with.offset(-10);
make.left.equalTo(editIcon.mas_right).with.offset(5);
}];
//分割线
UIImageView *xian = [[UIImageView alloc]init];
xian.backgroundColor = DBColor(226, 226, 226);
[self.view addSubview:xian];
[xian mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(@1);
make.left.equalTo(weakSelf.view).with.offset(10);
make.right.equalTo(weakSelf.view).with.offset(-10);
make.top.equalTo(editIcon.mas_bottom).with.offset(5);
}];
//选择标签
UILabel *tagLabel = [[UILabel alloc]init];
tagLabel.text = @"选择标签";
tagLabel.textColor = c3;
tagLabel.font = [UIFont systemFontOfSize:15];
[self.view addSubview:tagLabel];
[tagLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(@20);
make.width.mas_equalTo(@60);
make.left.equalTo(weakSelf.view).with.offset(10);
make.top.equalTo(xian).with.offset(35);
}];
//跳转标签选择
UITextField *tagText = [[UITextField alloc]init];
tagText.placeholder = @"美容颜";
tagText.borderStyle=UITextBorderStyleRoundedRect;
tagText.delegate = self;
[tagText addTarget:self action:@selector(textTag) forControlEvents:UIControlEventTouchDown];
[self.view addSubview:tagText];
[tagText mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(tagLabel);
make.right.equalTo(weakSelf.view).with.offset(-10);
make.left.equalTo(tagLabel.mas_right).with.offset(5);
}];
//tagView
self.tagView = ({
SKTagView *view = [SKTagView new];
view.backgroundColor = [UIColor clearColor];
view.padding = UIEdgeInsetsMake(0, 0, 0, 0);
view.insets = 15;
view.lineSpace = 10;
__weak SKTagView *weakView = view;
view.didClickTagAtIndex = ^(NSUInteger index){
//Remove tag
[weakView removeTagAtIndex:index];
};
view;
});
[self.view addSubview:self.tagView];
[self.tagView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(weakSelf.view).with.offset(10);
make.right.equalTo(weakSelf.view).with.offset(-10);
make.top.equalTo(tagText.mas_bottom).with.offset(10);
}];
//label标识语
UILabel *label = [[UILabel alloc]init];
label.font = [UIFont systemFontOfSize:13];
label.textColor = [UIColor redColor];
label.text = @"PS:成员和视频越多得社团越容易被发现!";
[self.view addSubview:label];
[label mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(weakSelf.view).with.offset(10);
make.right.equalTo(weakSelf.view).with.offset(-10);
make.top.equalTo(self.tagView.mas_bottom).with.offset(20);
}];
UIButton *commitBtn = [[UIButton alloc]init];
[commitBtn setCornerRadius:5];
[commitBtn setBorderWidth:1 color:DBTextThemeColor];
[commitBtn setTitleColor:DBTextThemeColor forState:UIControlStateNormal];
commitBtn.titleLabel.font = [UIFont systemFontOfSize:15];
[commitBtn setTitle:@"确认发布" forState:UIControlStateNormal];
[commitBtn addTarget:self action:@selector(commitButton) forControlEvents:UIControlEventTouchDown];
[self.view addSubview:commitBtn];
[commitBtn mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(@30);
make.left.equalTo(weakSelf.view).with.offset(10);
make.right.equalTo(weakSelf.view).with.offset(-10);
make.top.equalTo(label.mas_bottom).with.offset(50);
}];
}
原文链接:http://www.jianshu.com/p/f0b17ecfd04e
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
iOS开发 Masonry的简单使用的更多相关文章
- iOS开发网络篇—简单介绍ASI框架的使用
iOS开发网络篇—简单介绍ASI框架的使用 说明:本文主要介绍网络编程中常用框架ASI的简单使用. 一.ASI简单介绍 ASI:全称是ASIHTTPRequest,外号“HTTP终结者”,功能十分强大 ...
- iOS开发UI篇—简单的浏览器查看程序
iOS开发UI篇—简单的浏览器查看程序 一.程序实现要求 1.要求 2. 界面分析 (1) 需要读取或修改属性的控件需要设置属性 序号标签 图片 图片描述 左边按钮 右边按钮 (2) 需要监听响应事件 ...
- iOS开发UI篇—简单介绍静态单元格的使用
iOS开发UI篇—简单介绍静态单元格的使用 一.实现效果与说明 说明:观察上面的展示效果,可以发现整个界面是由一个tableview来展示的,上面的数据都是固定的,且几乎不会改变. 要完成上面的效果, ...
- iOS开发Swift篇—简单介绍
iOS开发Swift篇—简单介绍 一.简介 Swift是苹果于2014年WWDC(苹果开发者大会)发布的全新编程语言 Swift在天朝译为“雨燕”,是它的LOGO 是一只燕子,跟Objective-C ...
- 李洪强iOS开发之- 实现简单的弹窗
李洪强iOS开发之- 实现简单的弹窗 实现的效果: 112222222222223333333333333333
- iOS开发-Masonry简易教程
关于iOS布局自动iPhone6之后就是AutoLayOut,AutoLayOut固然非常好用,不过有时候我们需要在页面手动进行页面布局,VFL算是一种选择,如果对VFL不是很熟悉可以参考iOS开发- ...
- iOS开发基础-KVC简单介绍
一.KVC介绍 键值编码(Key Value Coding,KVC):使开发者不必进行任何操作就可以进行属性的动态读写. KVC操作方法由 NSKeyValueCoding 协议提供,而 NSObje ...
- 【iOS开发】NSOperation简单介绍
iOS开发多线程篇—NSOperation简单介绍 一.NSOperation简介 1.简单说明 NSOperation的作⽤:配合使用NSOperation和NSOperationQueue也能实现 ...
- iOS开发笔记,简单实现视频音频的边下边播
总是在网上看别人的博文,受益匪浅,从没自己写过,今天分享一点小经验,第一次写技术博客,希望对同行的ios猿们有所帮助. 先介绍一下自己的情况:一年ios开发,http协议不太懂,大约知道断点下载h ...
随机推荐
- ASP.NET 访问路径 错误提示 HTTP 错误 404.8 原来路径中包含bin目录被拒绝
HTTP 错误 404.8 - Not Found HTTP 错误 404.8 - Not Found 请求筛选模块被配置为拒绝包含 hiddenSegment 节的 URL 中的路径. 最可能的原因 ...
- android中View的GONE和INVISIBLE的原理
废话只重复两句: GONE真的隐藏: INVISIBLE不可见但是预留了View的位置: 网上千篇一律的重复着这两句话并举着例子,并没有观察本质来作区分.查看源码后得知其区别希望广大朋友能够借鉴,源码 ...
- 在 Amazon AWS 搭建及部署网站:(一)申请、设置 AWS 服务
亚马逊 AWS 介绍 简单来说,AWS (Amazon Web Service) 提供了一整套基础设施和服务,使"建站"这件事变得轻松愉快. 你可以利用AWS构建博客主机,云存储( ...
- JSON风格指南-真经
简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语 ...
- spring1冲刺感想与总结
感想与体会: 通过团队合作的第一个sprint,我们知道如何在团队合作中做好自己,还有与队友不合时,如何和平处理问题.产品负责人是一个重要的的角色,他负责任务的安排,处理合作中意见不统一的问题.通过这 ...
- 配置Hibernate二级缓存
首先找到配置EHCahe二级缓存需要添加的jar包 hibernate-release-4.1.9.Final→lib→optional→ehcache→下的ehcache-core-2.4.3.ja ...
- UCenter整合登陆时出现’Authorization has expired’错误(2014-03-13记)
原因之可能是两台机子的时间不一致导致.
- Dynamics AX 2012 R2 安装 AIF IIS上的Web服务
1.为什么使用IIS上的WEB服务 组件? 如果你要在Dynamics AX Service中使用HTTP Adapter,那么你就要安装IIS上的WEB服务 组件.HTTP Adapter会在IIS ...
- linux下rpm包安装、配置和卸载mysql
WIN10下虚拟机:VMware workstation 12 PRO 安装 # 1.查看系统版本 [root@vm-xiluhua][/home/xiluhua]$ cat /etc/redhat- ...
- [算法]检测空间三角形相交算法(Devillers & Guigue算法)
#pragma once //GYDevillersTriangle.h /* 快速检测空间三角形相交算法的代码实现(Devillers & Guigue算法) 博客原地址:http://bl ...