iOS开发日记30-Autolayout

今天博主有一个Autolayout的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步.

、概述

在以前的 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强大很多

Autolayout  2 个核心概念:

(1)参照

(2)约束

 Autolayout 的警告和错误

警告:

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

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

错误:

缺乏必要的约束, 比如:

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

两个约束冲突, 比如:

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

、代码实现 Autolayout

代码实现Autolayout的步骤:

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

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

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

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

代码实现Autolayout的注意点:

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

view.translatesAutoresizingMaskIntoConstraints = NO;

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

(3) 不用再给 view 设置 frame

 NSLayoutConstraint

一个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];
}

、添加约束的规则

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

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

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

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

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

 VFL 语言

什么是VFL语言?

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

 VFL 示例

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

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

H:[wideView(>[email protected])]

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的边缘)

 VFL 的使用

使用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];
}}

运行效果图:

 有了 Autolayout  UILabel

在没有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];
}];
时间: 2024-12-15 22:08:49

iOS开发日记30-Autolayout的相关文章

ios 开发日记 13-剖析网易新闻标签栏视图切换(addChildViewController属性介绍)

iOS开发 剖析网易新闻标签栏视图切换(addChildViewController属性介绍) 时间 2014-06-25 21:45:21  CSDN博客 原文  http://blog.csdn.net/hmt20130412/article/details/34523235 主题 网易iOS开发 本来只是打算介绍一下addChildViewController这个方法的,正好今天朋友去换工作面试问到网易新闻标签栏效果的实现,就结合它,用个小Demo实例介绍一下:(具体解释都写在了Demo里

iOS开发日记31-Block终极篇

今天博主有一个Block的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步. 1.什么是Block      Block是一个C级别的语法以及运行时的一个特性,和标准C中的函数(函数指针)类似,但是其运行需要编译器和运行时支持,从ios4.0开始就很好的支持Block. 2.在iOS开发中,什么情况下使用Block      Block除了能够定义参数列表.返回类型外,还能够获取被定义时的词法范围内的状态(比如局部变量),并且在一定条件下(比如使用__block变量)能够修改这些状态.此

iOS开发日记26-详解时间戳

今天博主有一个时间戳的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步. iOS开发中,我们在很多情况下都会遇到使用当下时间作为参数的情况,这称之为时间戳.在iOSSDK中,与时间戳相关的API主要有三个,NSDate,NSCalendar和NSDate?Components. NSDate 就是一个绝对的时间,可以换算成相对1970s的时差. NSCalendar 顾名思义就是日历,封装了系统如何按照年月日的方式来组织时间,组织时间的方式和地区,时区有很大关系. NSDate?Comp

iOS开发日记16-动画Animation

今天博主有一个动画Animation的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步. iOS开发中的动画分为两种:一种为UIView动画,又称隐式动画,动画后frame的数值发生了变化.另一种是CALayer动画,又称显示动画,动画后模型层的数据不会发生变化,图形回到原来的位置.但是在实际开发中,因为UIView可以相应用户交互,所以UIView动画用的多. 一.UIview的动画 1.实现方式:动画块,block begin //设置动画效果  修改属性值,动画时长等等 conmm

ios开发日记11 对tableView三种计算动态行高方法的分析

tableView是一个神奇的东西,可以这么说,就算是一个初学者如果能把tableView玩的很6,那编一般的iOS的需求都问题不大了.tableView是日常开发中用烂了的控件,但是关于tableView中的自定义cell的动态行高,还是有一些玄机的. AD: tableView是一个神奇的东西,可以这么说,就算是一个初学者如果能把tableView玩的很6,那编一般的iOS的需求都问题不大了.tableView是日常开发中用烂了的控件,但是关于tableView中的自定义cell的动态行高,

ios 开发日记 23 - Reveal使用步骤

一.Reveal使用步骤 1.启动Reveal --> Help --> Show Reveal Library in Finder,拖动添加Reveal.framework到工程中.选中 Copy items into destination group's folder (if needed)以及当前的targets.展开查看Reveal.framework中所有h文件都正确加入工程中: 确保Summary--> Linked Frameworks and Libraries目录下,

iOS开发日记44-图片及处理

今天博主有一个图片及处理的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步. 图片通常是移动端流量耗费最多的部分,并且占据着重要的视觉空间.合理的图片格式选用和优化可以为你节省带宽.提升视觉效果. 几种图片格式简介: 1.静态图片的编码与解码 JPEG PNG WebP BPG 2.动态图片的编码与解码 GIF APNG WebP BPG 首先谈一下大家耳熟能详的几种老牌的图片格式吧: JPEG 是目前最常见的图片格式,它诞生于 1992 年,是一个很古老的格式.它只支持有损压缩,其压缩

iOS开发日记21-7.0之后的图文混排

今天博主有一个图文混排的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步. iOS7.0以前,图文混排主要有两种方法:1.WebView+js  2.coreText iOS7.0之后,苹果提供了新的封装,让图文混排更加的简便,也就是第三种方法:3.TextKit 今天就和大家详细的分享一下这三种图文混排的方法 1.webview+js的方法其实很简单,下面贴出代码,各位自行研究 去除webView滚动时,上下的白边. - (void)clearWebViewBackground:(UI

iOS开发日记55-通知栏扩展(App Extension)

今天博主有一个App Extension的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步. 总览 扩展 (Extension) 是 iOS 8 和 OSX 10.10 加入的一个非常大的功能点,开发者可以通过系统提供给我们的扩展接入点 (Extension point) 来为系统特定的服务提供某些附加的功能.对于 iOS 来说,可以使用的扩展接入点有以下几个: Today 扩展 - 在下拉的通知中心的 "今天" 的面板中添加一个 widget 分享扩展 - 点击分享按钮后将网