本文转载至 http://www.cnblogs.com/madpanda/p/4311980.html

AutoLayout是从IOS 6开始苹果引入来取代autoresizing的新的布局技术,该技术有三种设置方式,等下我来为大家一一叙述一下。

在说三种设置方式前,我们先简单的说一下autolayout能够设置哪些行为。

1.视图的大小(即视图的绝对大小)。

2.视图的位置(视图相对于父视图或者兄弟视图的位置)。

3.视图的对齐方式(相对于父视图或者相对于兄弟视图)。

  可以看到autolayout相比autoresizing技术来说要灵活的多,该技术有很多布局的约束设置。这次主要讲的用代码来设置AutoLayout,代码向我们需要添加autoLayout视图使用该方法

+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

该方法实际上就是满足一个数学关系

item1 =(>=,<=) multiplier * item2 + constant。

参数说明:

view1:第一个视图即item1。

attr1:是第一个视图选择的属性

relation:即中间的关系(= , >= , <=)

view2:第二个视图即item2。

attr2:是第二个视图选择的属性

c:就是常熟constant。

  举个简单的例子来说我们想设置第一个视图的宽度是第二个视图宽度的2倍,我们可以这样写:

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:view1 attribute:NSLayoutAttributeWidth multiplier:2 constant:0]];

可以看到这里我们item1是view1,item2是view2,attr1是attribute:NSLayoutAttributeWidth,attr2是attribute:NSLayoutAttributeWidth,relation是NSLayoutRelationEqual,mutiplier 是2,constant是0.

带入上面的公式得:

第一个视图(宽度) = 2 * 第二个视图(宽度) + 0

如下是我们所有可以控制的属性:

NSLayoutAttributeLeft 视图的左边
NSLayoutAttributeRight 视图的右边
NSLayoutAttributeTop 视图的上边
NSLayoutAttributeBottom 视图的下边
NSLayoutAttributeLeading 视图的前边
NSLayoutAttributeTrailing 视图的后边
NSLayoutAttributeWidth 视图的宽度
NSLayoutAttributeHeight 视图的高度
NSLayoutAttributeCenterX 视图的中点的X值
NSLayoutAttributeCenterY 视图中点的Y值
NSLayoutAttributeBaseline 视图的基准线
NSLayoutAttributeNotAnAttribute 无属性

  

这里解释一下前边NSLayoutAttributeLeading和后边NSLayoutAttributeTrailing,这里前边和后边并不是总是为左边和右边的,有些国家的前边是右边后边是左边所以这样设定是为了国际化考虑。还有视图基准线NSLayoutAttributeBaseline通常是指视图的底部放文字的地方。

  接下我们一起来看一个demo

  我们想让两个视图Y方向居中,第一个视图距离左边缘20,第一个视图以第二个视图等大并且X方向距离为100。

 1 UIView *view1 = [[UIView alloc] init];2     UIView *view2 = [[UIView alloc] init];3     [self.view addSubview:view1];4     [self.view addSubview:view2];5     view1.translatesAutoresizingMaskIntoConstraints = NO;6     view2.translatesAutoresizingMaskIntoConstraints = NO;7     view1.backgroundColor = [UIColor blueColor];8     view2.backgroundColor = [UIColor grayColor];9     //set view1 height and width
10     [view1 addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:100]];
11     [view1 addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:100]];
12     //set view2 height and width
13     [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:view1 attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];
14     [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:view1 attribute:NSLayoutAttributeHeight multiplier:1 constant:0]];
15     //set relationship between view1 and view2
16     [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:view1 attribute:NSLayoutAttributeRight multiplier:1 constant:100]];
17     [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:view2 attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];
18     //set relationship between topView and view1
19     [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1 constant:20]];
20     [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];

下面我们一起来看一下这段代码

注意 5、6行设置view的 translatesAutoresizingMaskIntoConstraints 属性为NO,意思就是遵循autoLayout抛弃原有设置的高度宽度等,使用autolayout的视图必须要设置该属性。

10、11行设置view1的宽和高,大家可能已经发现item2为nil并且attrbute为attribute:NSLayoutAttributeNotAnAttribute,这样做我们带入公式就会明白

item1 = m * 0 + constant。也就是直接设置本视图的宽和高。

13、14行是设置view2的宽高和view1相同,这里细心的同学可能会发现添加约束的对象并不是像上面设置宽高时的view1,而是它们共同的父视图self.view。因为在autolayout中有这样的规定,如果是一元约束,即只针对自己的约束,那么就直接添加在该视图上。如果是二元约束,那么就必须要添加在它们的共同最近的父视图上面。

15、16行是设置view1和view2的关系,设置view1和view2具有相同的Y,并且view2在view1右边距离100的位置。

18、19行最后我们设置了view1左边距离父视图左边20的距离,并且view1的Y等于父视图Y的中点值。

通过以上的设置,我们运行的结果就是:

如图,视图1在距左边20的位置,视图1视图2都Y方向居中并且相距100的距离。

删除约束:

  removeConstraint:(NSLayoutConstraint *) constraint;

在删除约束时要找准约束的绑定对象。

AutoLayout的三种设置方式之——NSLayoutConstraint代码篇相关推荐

  1. TP5 路由三种设置方式

    ThinkPHP5.0的路由比较灵活,并且不需要强制定义,可以总结归纳为如下三种方式: 一.普通模式 关闭路由,完全使用默认的PATH_INFO方式URL: 1.'url_route_on' => ...

  2. php:php时区的三种设置方式

    格林威治标准时间和我们的时间(北京时间)差了正好8个小时.如果不设置时区,php时间默认使用格林威治标准时间. 方法一(推荐) 在php.ini里加上找到date.timezone项,设置date.t ...

  3. Python可视化中Matplotlib(4.三种设置样式方法、设置坐标刻度以及标签、设置显示出特殊字符)

    1.三种设置方式 (1)向方法传入关键字参数 上一节已经总结过,一直在使用 (2)对实例使用一系列的setter方法 具体的方法直接看代码 import matplotlib.pyplot as pl ...

  4. Django 数据库查询优化,choices参数(数据库字段设计常见),MVC和MTV模型,多对多三种创建方式...

    数据库查询优化 orm语句的特点:惰性查询 如果仅仅只是书写了orm语句,在后面没有用到该语句所查询出来的参数,那么orm会自动识别,并不执行 举例: res = models.Book.object ...

  5. java中map的遍历方法_Java中Map的三种遍历方式

    集合中的三种遍历方式,如下代码: import java.util.Collection; import java.util.HashMap; import java.util.Iterator; i ...

  6. .NetCore中三种注入方式的思考

    .NetCore中三种注入方式的思考 原文:.NetCore中三种注入方式的思考 该篇内容由个人博客点击跳转同步更新!转载请注明出处! .NetCore彻底诠释了"万物皆可注入"这 ...

  7. CI框架的三种设置cookie的方式

    [php] view plaincopyprint? //第一种设置cookie的方式:采用php原生态的方法设置的cookie的值 setcookie("user_id",$us ...

  8. Spring Boot项目(Maven\Gradle)三种启动方式及后台运行详解

    Spring Boot项目三种启动方式及后台运行详解 1 Spring Boot项目三种启动方法 运行Application.java类中的Main方法 项目管理工具启动 Maven项目:mvn sp ...

  9. Web框架之Django_07 进阶操作(MTV与MVC、多对多表三种创建方式、前后端传输数据编码格式contentType、ajax、自定义分页器)

    阅读目录 一.MVC与MTV 二.多对多表的创建 三.ajax,前后端传输编码格式contentType 四.批量插入数据与自定义分页器 摘要 MTV与MVC 多对多表三种创建方式 ajax ,前后端 ...

最新文章

  1. 【2019/4/30】周进度报告
  2. (转)彻底学通string.Format以及IFormattable,IFormatProvider,ICustomFormatter
  3. web.xml文件位于web项目的目录结构中的_看完这篇,别人的开源项目结构应该能看懂了...
  4. 使用expdp导出时评估所需存储容量大小
  5. 东莞市初中生中考计算机内容,2019年广东东莞市中考考试科目及内容
  6. 2018-2019-2 20165209 《网络对抗技术》Exp4:恶意代码分析
  7. 华为和荣耀蓝牙耳机为什么那么贵?
  8. 音视频学习之 - H264解码
  9. AngularJS中的DOM value与view value
  10. 线性调频信号的脉冲压缩(匹配滤波)
  11. SyntaxError报错成功解决
  12. 手机网络邻居访问电脑_手机怎么访问局域网电脑共享文件
  13. 网管系统测试学习——传输网下一代综合网管系统测试
  14. Linux用RPM安装vsftpd,Linux通过RPM方式安装vsftpd
  15. 无法找到合适的显示设备.正在关闭程序
  16. CE自动汇编之AOB注入
  17. 林志炫-快乐老家-LRC歌词下载
  18. 深度学习 图像识别 三
  19. 深入学习java源码之Math.addExact()与 Math.multiplyExact()
  20. moviepy音视频开发:使用volumex调节音量大小及其花式用法

热门文章

  1. bzip2recover cat chattr chgrp chmod
  2. RabbitMQ学习系列(六): RabbitMQ 高可用集群
  3. 在网页中显示CHM (c# csharp .net asp.net winform)
  4. 使用浏览器地址栏调用CXF Webservice的写法
  5. javascript一些基础知识
  6. 公共云计算彼端的数据能否得到有效保护?
  7. 让你的linux操作系统更加安全
  8. 灵机一动之优雅实现用例顺序插入
  9. Office 365 On MacOS 系列——配置浏览器账号同时管理多个订阅
  10. BurpSuite之HTTP brute暴力破解