不管是是界面创建约束还是代码创建约束,苹果官方提供的方式都比较繁琐。所以出现了第三方框架。

Masonry 在github地址如下:

  https://github.com/SnapKit/Masonry

如果需要通过代码手动添加约束,Masonry真的是一个不错的选择,大大增加开发效率,何乐而不为呢。

Autolayout - Masonry

  • 使用步骤

    • 添加Masonry文件夹的所有源代码到项目中
    • 添加2个宏、导入主头文件
       // 只要添加了这个宏,就不用带mas_前缀
      #define MAS_SHORTHAND
      // 只要添加了这个宏,equalTo就等价于mas_equalTo
      #define MAS_SHORTHAND_GLOBALS
      // 这个头文件一定要放在上面两个宏的后面
      #import "Masonry.h"
  • 添加约束的方法

 // 这个方法只会添加新的约束
[view makeConstraints:^(MASConstraintMaker *make) { }]; // 这个方法会将以前的所有约束删掉,添加新的约束
[view remakeConstraints:^(MASConstraintMaker *make) { }]; // 这个方法将会覆盖以前的某些特定的约束
[view updateConstraints:^(MASConstraintMaker *make) { }];
  • 约束的类型

    1.尺寸:width\height\size
    2.边界:left\leading\right\trailing\top\bottom
    3.中心点:center\centerX\centerY
    4.边界:edges
  • 示例代码1:居中显示

       // 居中显示
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView]; // 可以使用三个方法来添加约束。
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerX.equalTo(self.view);
    make.centerY.equalTo(self.view);
    make.height.equalTo();
    make.width.equalTo();
    }];
  • 示例代码2:并排位于底部,间距20

      //并排位于底部,间距20
    
       UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView]; UIView *blueView= [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView]; // 添加约束
    [redView makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(self.view.left).offset(); // 左边间距20
    make.right.equalTo(blueView.left).offset(-); // 右边和blueView间距20
    make.bottom.equalTo(self.view.bottom).offset(-); // 底部间距20 make.height.equalTo(); // 高度200 }]; [blueView makeConstraints:^(MASConstraintMaker *make) {
    make.right.equalTo(self.view.right).offset(-); // 右边间距20
    make.bottom.equalTo(redView.bottom); // 和redView底部间距相同 make.height.equalTo(redView); // 等宽
    make.width.equalTo(redView); // 等高
    }];
  • 示例代码3:四个View,平分整个屏幕

 //四个View,平分整个屏幕
//红色
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
// 蓝色
UIView *blueView= [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
// 黑色
UIView *blackView = [[UIView alloc] init];
blackView.backgroundColor = [UIColor blackColor];
[self.view addSubview:blackView];
// 绿色
UIView *greenView= [[UIView alloc] init];
greenView.backgroundColor = [UIColor greenColor];
[self.view addSubview:greenView]; // autolayout
[redView makeConstraints:^(MASConstraintMaker *make) {
make.left.and.top.equalTo(self.view);
make.right.equalTo(self.view.centerX);
make.bottom.equalTo(self.view.centerY);
}]; [blueView makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(redView.right);
make.right.equalTo(self.view);
make.height.equalTo(redView); }]; [blackView makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(redView.bottom);
make.height.equalTo(redView);
make.width.equalTo(redView);
}]; [greenView makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(blueView.bottom);
make.left.equalTo(blackView.right);
make.height.equalTo(blueView);
make.width.equalTo(blueView);
}]; // 红色View内部
UIImageView *image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"010.png"]];
UILabel *name = [[UILabel alloc] init];
name.text = @"红色";
name.textAlignment = NSTextAlignmentCenter;
name.backgroundColor = [UIColor purpleColor];
[redView addSubview:image];
[redView addSubview:name];
[image makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(redView.center).offset(-);
}];
[name makeConstraints:^(MASConstraintMaker *make) {
make.left.right.equalTo(redView.left);
make.bottom.equalTo(redView.bottom);
make.height.equalTo();
}];
代码示例4:其他方法使用
  // masonry 自动布局
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView]; UIView *blueView= [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView]; [redView makeConstraints:^(MASConstraintMaker *make) {
// 大小100*100,居中显示
//make.size.equalTo(100);
//make.center.equalTo(self.view); //居中显示,直接设置距离四面的距离
UIEdgeInsets eda = {,,,};
make.edges.insets(eda);
//
}]; // blueView位于redView中间
[blueView makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(redView);
make.height.equalTo(redView.height).multipliedBy(0.5); // 乘法
make.width.equalTo(redView.width).dividedBy().offset(); // 除法+偏移量
}];

总结:

  和苹果自带的约束添加方法相比,苹果的约束方法简直无法直视啊。这样给控件添加约束简单快捷,主要是条理清晰,言简意赅。



今日如此,明日依旧。
2015-06-04

ios开发学习笔记040-autolayout 第三方框架Masonry的更多相关文章

  1. iOS开发学习笔记

    1 常用的第三方工具 1.1 iPhone Simulator 测试程序需要模拟器iPhone Simulator 1.2 设计界面需要Interface Builder,Interface Buil ...

  2. iOS开发学习笔记:基础篇

    iOS开发需要一台Mac电脑.Xcode以及iOS SDK.因为苹果设备都具有自己封闭的环境,所以iOS程序的开发必须在Mac设备上完成(当然,黑苹果应该也是可以的,但就需要花很多的精力去折腾基础环境 ...

  3. ios开发学习笔记(1)

    objective-c基础总结 第一二章 1.application:didiFinishLauchingWithOptions:程序启动后立即执行 2.启动界面代码格式:self.window = ...

  4. IOS开发学习笔记016-Foundation框架

     Foundation 框架的学习 一.Foundation 常用结构体 1.NSRange(location,length)  typedef struct _NSRange { NSUIntege ...

  5. (ios开发学习笔记一)ios项目文件结构

    转自:http://www.cnblogs.com/macroxu-1982/archive/2012/07/31/2616389.html 下面是单个窗体项目例子,我们从这个项目开始,说明ios项目 ...

  6. ios开发学习笔记(这里一定有你想要的东西,全部免费)

    1,Search Bar 怎样去掉背景的颜色(storyboard里只能设置background颜色,可是发现clear Color无法使用). 其实在代码里还是可以设置的,那就是删除背景view [ ...

  7. IOS开发学习笔记017-第一个IOS应用

    第一个IOS应用程序,就从最简单的开始吧. 1.先了解一下开发环境,Xcode的相关组成 2.还有模拟器 3.运行与停止按钮 4.新建一个工程 5.看看main函数里都有啥 6.现在来添加一个控件 1 ...

  8. IOS开发学习笔记009-OC基本知识

    开始学习OC,时间不等人啊,要抓紧了. OC基本知识 新建一个以.m结尾的文件,这既是oc的程序文件.在oc程序中完全兼容C语言.编译好链接类似. oc包含头文件是使用#import <> ...

  9. 吴裕雄--天生自然JAVA SPRING框架开发学习笔记:测试SSH框架分层整合及验证事务是否有效

    测试框架分层的整合 HibernateTemplate 和 HibernateDaoSupport,这两个类是 Spring 为整合 Hibernate3 提供的两个工具类. HibernateTem ...

随机推荐

  1. pandas error记录随笔

    1.sys:1: DtypeWarning: Columns (0,1) have mixed types. Specify dtype option on import or 解决办法:PANDAS ...

  2. 线程池模块thernd

    from concurrent.futures import ThreadPoolExecutor,ProcessPoolExecutor import time def task(i): print ...

  3. Android商城开发系列(十一)—— 首页秒杀布局实现

    首页秒杀布局如下图: 布局使用的是LinearLayout和RecyclerView去实现,新建seckkill_item.xml,代码如下所示: <?xml version="1.0 ...

  4. jq动态增加的button标签click回调失效的问题,即动态增加的button标签绑定事件$("button.class").click(function)无效

    对于新增加的页面元素,改变了页面结构,如果是使用老办法$("button.class").click(function)去监听新的button标签事件,会失效. 笔者的应用是文字的 ...

  5. UVA 340 Master-Mind Hints 猜密码游戏(水)

    题意: 给一串密码(第一行),接着再给你很多行猜测,针对每行猜测,输出两个数字,分表代表:同一列上匹配的个数,不同列上匹配的个数.注:匹配指的是一次,一旦配对,不能再与其他配对. 思路: 每接受一行猜 ...

  6. Redis基础对象

    Redis 中每个对象都由一个 redisObject 结构表示 typedef struct redisObject { //类型 unsigned type:; //编码 unsigned enc ...

  7. js 中//<![CDATA[ 意义

    CDATA内部所有东西都会被解析器忽略,加入文本中包含了大量< 和 $符号,就像编程中经常出现的情况一样,那么这个元素就可以被定义为一个CDATA部分 ,CDATA 区段开始于 "&l ...

  8. Android(java)学习笔记100:使用Dexdump等工具进行反编译

    使用Dex等工具进行反编译步骤: (1)首先找到Android软件安装包中的class.dex,把APK文件改名为".zip",然后解压缩其中的class.dex文件,这是Java ...

  9. SQLAlchemy简介

    一.SQLAlchemy简介 SQLAlchemy是Python SQL工具包和对象关系映射器,是python中最著名的ORM(Object Relationship Mapping)框架,它简化了应 ...

  10. windows2012服务器搭建mongodb并设置远程访问

    因为python脚本需要用到mongodb,而且需要本地查看数据库,所以就在腾讯云的windows服务器上部署了mongodb服务器,因为网上大部分教程是针对linux的自己搜索走了很多坑,这里记录下 ...