1、概述

在以前的iOS程序中,是如何设置布局UI界面的?

(1)经常编写大量的坐标计算代码

(2)为了保证在3.5 inch和4.0 inch屏幕上都能有完美的UI界面效果,有时还需要分别为2种屏幕编写不同的坐标计算代码(即传说中的“屏幕适配”)

什么是Autolayout

(1)Autolayout是一种“自动布局”技术,专门用来布局UI界面的

(2)Autolayout自iOS 6开始引入,由于Xcode 4的不给力,当时并没有得到很大推广

(3)自iOS 7(Xcode 5)开始,Autolayout的开发效率得到很大的提升

(4)苹果官方也推荐开发者尽量使用Autolayout来布局UI界面

(5)Autolayout能很轻松地解决屏幕适配的问题

Autoresizing

(1)在Autolayout之前,有Autoresizing可以作屏幕适配,但局限性较大,有些任务根本无法完成

(2)相比之下,Autolayout的功能比Autoresizing强大很多

Autolayout2个核心概念:

(1)参照

(2)约束

2Autolayout的警告和错误

警告:

控件的frame不匹配所添加的约束, 比如:

约束控件的宽度为100, 而控件现在的宽度是110

错误:

缺乏必要的约束, 比如:

只约束了宽度和高度, 没有约束具体的位置

两个约束冲突, 比如:

1个约束控件的宽度为100, 1个约束控件的宽度为110

3、代码实现Autolayout

代码实现Autolayout的步骤:

第一步:利用NSLayoutConstraint类创建具体的约束对象

第二步:添加约束对象到相应的view上

- (void)addConstraint:(NSLayoutConstraint *)constraint;

- (void)addConstraints:(NSArray *)constraints;

代码实现Autolayout的注意点:

(1)要先禁止autoresizing功能,设置view的下面属性为NO

view.translatesAutoresizingMaskIntoConstraints = NO;

(2)添加约束之前,一定要保证相关控件都已经在各自的父控件上

(3)不用再给view设置frame

4NSLayoutConstraint

一个NSLayoutConstraint对象就代表一个约束。

创建约束对象的常用方法:

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

view1 :要约束的控件

attr1 :约束的类型(做怎样的约束)

relation :与参照控件之间的关系

view2 :参照的控件

attr2 :约束的类型(做怎样的约束)

multiplier :乘数

c :常量

自动布局有个核心公式:

obj1.property1 =(obj2.property2 * multiplier)+ constant value

例如:实现下面效果:

- (void)viewDidLoad

{

[super viewDidLoad];

// 1.添加控件

UIView *blueView = [[UIView alloc] init];

blueView.backgroundColor = [UIColor blueColor];

    blueView.translatesAutoresizingMaskIntoConstraints = NO;

[self.view addSubview:blueView];

UIView *redView = [[UIView alloc] init];

redView.backgroundColor = [UIColor redColor];

    redView.translatesAutoresizingMaskIntoConstraints = NO;

[self.view addSubview:redView];

// 2.约束蓝色

// 2.1.高度

NSLayoutConstraint *blueHeight =

[NSLayoutConstraint constraintWithItem:blueView attribute:

NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:

nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0

constant:40];

[blueView addConstraint:blueHeight];

// 2.2.左边间距

CGFloat margin = 20;

NSLayoutConstraint *blueLeft =

[NSLayoutConstraint constraintWithItem:blueView attribute:

NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:

self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:

margin];

[self.view addConstraint:blueLeft];

// 2.3.顶部间距

NSLayoutConstraint *blueTop =

[NSLayoutConstraint constraintWithItem:blueView attribute:

NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:

self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:

margin];

[self.view addConstraint:blueTop];

// 2.4.右边间距

NSLayoutConstraint *blueRight =

[NSLayoutConstraint constraintWithItem:blueView attribute:

NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:

self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:

-margin];

[self.view addConstraint:blueRight];

// 3.约束红色

// 3.1.让红色右边 == 蓝色右边

NSLayoutConstraint *redRight =

[NSLayoutConstraint constraintWithItem:redView attribute:

NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:

blueView attribute:NSLayoutAttributeRight multiplier:1.0

constant:0.0];

[self.view addConstraint:redRight];

// 3.2.让红色高度 == 蓝色高度

NSLayoutConstraint *redHeight =

[NSLayoutConstraint constraintWithItem:redView attribute:

NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:

blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:

0.0];

[self.view addConstraint:redHeight];

// 3.3.让红色顶部 == 蓝色底部 + 间距

NSLayoutConstraint *redTop =

[NSLayoutConstraint constraintWithItem:redView attribute:

NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:

blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:

margin];

[self.view addConstraint:redTop];

// 3.4.让红色宽度 == 蓝色宽度 * 0.5

NSLayoutConstraint *redWidth =

[NSLayoutConstraint constraintWithItem:redView attribute:

NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:

blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:

0.0];

[self.view addConstraint:redWidth];

}

5、添加约束的规则

在创建约束之后,需要将其添加到作用的view上。

在添加时要注意目标view需要遵循以下规则:

(1)对于两个同层级view之间的约束关系,添加到它们的父view上

(2)对于两个不同层级view之间的约束关系,添加到他们最近的共同父view上

(3)对于有层次关系的两个view之间的约束关系,添加到层次较高的父view上

6VFL语言

什么是VFL语言?

VFL全称是Visual Format Language,翻译过来是“可视化格式语言”,是苹果公司为了简化Autolayout的编码而推出的抽象语言。

7VFL示例

H:[cancelButton(72)]-12-[acceptButton(50)]

canelButton宽72,acceptButton宽50,它们之间间距12

H:[wideView(>=60@700)]

wideView宽度大于等于60point,该约束条件优先级为700(优先级最大值为1000,优先级越高的约束越先被满足)

V:[redBox]-[yellowBox(==redBox)]

竖直方向上,先有一个redBox,其下方紧接一个高度等于redBox高度的yellowBox

H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|

水平方向上,Find距离父view左边缘默认间隔宽度,之后是FindNext距离Find间隔默认宽度;再之后是宽度不小于20的FindField,它和FindNext以及父view右边缘的间距都是默认宽度。(竖线“|” 表示superview的边缘)

8VFL的使用

使用VFL来创建约束数组:

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;

format :VFL语句

opts :约束类型

metrics :VFL语句中用到的具体数值

views :VFL语句中用到的控件

创建一个字典(内部包含VFL语句中用到的控件)的快捷宏定义:

NSDictionaryOfVariableBindings(...)

例如:

NSDictionary *views =

NSDictionaryOfVariableBindings(blueView, redView);

NSArray *conts2 =

[NSLayoutConstraint constraintsWithVisualFormat:

@"V:[blueView(==blueHeight)]-margin-|" options:0 metrics:

@{@"blueHeight" : @40, @"margin" : @20} views:views];

示例代码:

- (void)viewDidLoad

{

[super viewDidLoad];

// 1.添加控件

UIView *blueView = [[UIView alloc] init];

blueView.backgroundColor = [UIColor blueColor];

blueView.translatesAutoresizingMaskIntoConstraints = NO;

[self.view addSubview:blueView];

UIView *redView = [[UIView alloc] init];

redView.backgroundColor = [UIColor redColor];

redView.translatesAutoresizingMaskIntoConstraints = NO;

[self.view addSubview:redView];

// 2.VFL生成约束

NSArray *conts =

[NSLayoutConstraint constraintsWithVisualFormat:

@"H:|-20-[blueView]-20-|" options:0 metrics:nil views:

@{@"blueView" : blueView}];

[self.view addConstraints:conts];

NSArray *conts2 =

[NSLayoutConstraint constraintsWithVisualFormat:

@"V:|-20-[blueView(40)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView" : blueView, @"redView" : redView}];

[self.view addConstraints:conts2];

NSLayoutConstraint *redWidth =

[NSLayoutConstraint constraintWithItem:redView attribute:

NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:

blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:

0.0];

[self.view addConstraint:redWidth];

}}

运行效果图:

9有了AutolayoutUILabel

在没有Autolayout之前,UILabel的文字内容总是居中显示,导致顶部和底部会有一大片空缺区域:

有Autolayout之后,UILabel的bounds默认会自动包住所有的文字内容,顶部和底部不再会有空缺区域:

10基于Autolayout的动画

在修改了约束之后,只要执行下面代码,就能做动画效果:

[UIView animateWithDuration:1.0 animations:^{

[添加了约束的view layoutIfNeeded];

}];

例如:

self.leftMargin.constant = 100;

self.width.constant = 200;

[UIView animateWithDuration:2.0 animations:^{

//父控件和redView都添加了约束

[self.view layoutIfNeeded];

[self.redView layoutIfNeeded];

}];

iOS开发之Autolayout的更多相关文章

  1. iOS开发之autoLayout constraint

    前言 ios设备的尺寸越来越多,针对一款app可能要适配到多种设备.多种尺寸.所以.我们期望我们的app可以autoLayout.本文主要介绍在Xcode中使用constraint.未来会不定期对此文 ...

  2. iOS开发之AutoLayout中的Content Hugging Priority和 Content Compression Resistance Priority解析

    本篇博客的内容也不算太复杂,算是AutoLayout的一些高级的用法.本篇博客我们主要通过一些示例来看一下AutoLayout中的Content Hugging Priority以及Content C ...

  3. 李洪强iOS开发之iOS好文章收集

    李洪强iOS开发之iOS好文章收集 该文收集朋友们转发或自己的写的技术文章,如果你也有相关的好文章,欢迎留言,当好文章多的时候,我会对这些好文章进行分门别类 文章 简述 日期 直播服务配置 使用 ng ...

  4. iOS开发之Socket通信实战--Request请求数据包编码模块

    实际上在iOS很多应用开发中,大部分用的网络通信都是http/https协议,除非有特殊的需求会用到Socket网络协议进行网络数 据传输,这时候在iOS客户端就需要很好的第三方CocoaAsyncS ...

  5. iOS开发之UISearchBar初探

    iOS开发之UISearchBar初探 UISearchBar也是iOS开发常用控件之一,点进去看看里面的属性barStyle.text.placeholder等等.但是这些属性显然不足矣满足我们的开 ...

  6. iOS开发之UIImage等比缩放

    iOS开发之UIImage等比缩放 评论功能真不错 评论开通后,果然有很多人吐槽.谢谢大家的支持和关爱,如果有做的不到的地方,还请海涵.毕竟我一个人的力量是有限的,我会尽自己最大的努力大家准备一些干货 ...

  7. iOS开发之 Xcode6 添加xib文件,去掉storyboard的hello world应用

    iOS开发之  Xcode6.1创建仅xib文件,无storyboard的hello world应用 由于Xcode6之后,默认创建storyboard而非xib文件,而作为初学,了解xib的加载原理 ...

  8. iOS开发之loadView、viewDidLoad及viewDidUnload的关系

    iOS开发之loadView.viewDidLoad及viewDidUnload的关系 iOS开发之loadView.viewDidLoad及viewDidUnload的关系    标题中所说的3个方 ...

  9. iOS开发之info.pist文件和.pch文件

    iOS开发之info.pist文件和.pch文件 如果你是iOS开发初学者,不用过多的关注项目中各个文件的作用.因为iOS开发的学习路线起点不在这里,这些文件只会给你学习带来困扰. 打开一个项目,我们 ...

随机推荐

  1. FMDB的简单用法

    使用cocoaPods将FMDB下载到工程 第一步:引入框架,引入支持类库(libsqlite3.0.tbd) #import <FMDB.h> 声明属性 @interface ViewC ...

  2. UITableView、UICollectionView行高/尺寸自适应

    UITableView 我们都知道UITableView从iOS 8开始实现行高的自适应相对比较简单,首先必须设置estimatedRowHeight给出预估高度,设置rowHeight为UITabl ...

  3. angular实现跨域

    angular.js 自带jsonp,实现跨域,下面来实搜索框的下拉列表,使用百度和360分别尝试一下 百度:url截取之后红色部分需替换 :https://sp0.baidu.com/5a1Fazu ...

  4. 理解redis高可用方案

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  5. jsp内置对象的方法

    JSP内置对象的方法:out:out.print();request:request对象主要用于出列客户端请求.   常用方法:    String getParameter(String name) ...

  6. 详解JavaScript闭包

    要想完全明白JavaScript的闭包,要先明白js中的一些基础原理,然后我再给出一些例子来讲解闭包. 在执行JavaScript时会创建一个执行环境(excution context),执行环境定义 ...

  7. MJRefresh在UITableView中的使用

    前言 MJRefresh是一个好用的上下拉刷新的控件,github地址如下:https://github.com/CoderMJLee/MJRefresh 很多app都使用这个控件,我们也来了解一下它 ...

  8. FineUIMvc随笔 - 动态创建表格列

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 用户需求 用户希望实现动态创建表格列,在 WebForms 中,我们通过在 Page_Init 中创建列来实现: 但是在 MVC ...

  9. mysql 添加登录用户

    一, 创建用户: 命令:CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 说明:username - 你将创建的用户名, host - 指 ...

  10. Python入门教程(1)

    人生苦短,我用Python! Python(英语发音:/ˈpaɪθən/), 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第一个公开发行版发行于19 ...