Autoresizing
在Autolayout之前,有Autoresizing可以作屏幕适配,但局限性较大,有些任务根本无法完成(Autoresizing只能设置自身和父控件之间的关系)
Autoresizing仅仅能解决子控件和父控件之间的相对关系问题
相比之下,Autolayout的功能比Autoresizing强大很多
Autolayout解决任何控件之间的相对关系问题
Autolayout的2个核心概念
约束:通过给控件添加约束,来决定控件的位置和尺寸
参照:在添加约束时,是依照谁来添加(可以是父控件或者兄弟控件)
Autoresizing
- 局限性:只能设置自身和父控件之间的相对关系
- 6跟线的含义
//距离父控件`左边`的间距是伸缩的
UIViewAutoresizingFlexible`Left`Margin = 1 << 0
//距离父控件`右边`的间距是伸缩的
UIViewAutoresizingFlexible`Right`Margin = 1 << 2
//距离父控件`上边`的间距是伸缩的
UIViewAutoresizingFlexible`Top`Margin = 1 << 3
//距离父控件`下边`的间距是伸缩的
UIViewAutoresizingFlexible`Bottom`Margin = 1 << 5
//`宽度`跟随父控件`宽度`进行伸缩
UIViewAutoresizingFlexible`Width` = 1 << 1
//`高度`跟随父控件`高度`进行伸缩
UIViewAutoresizingFlexible`Height` = 1 << 4
Autolayout
-
简介 (屏幕适配发展史)
- 在以前的iOS程序中,是如何布局UI界面的?
- 写固定值-> autoresizingMask-> autolayout-> sizeClasses
- iPhone1-iPhone4s时代 屏幕的尺寸固定为(320,480) ,我们只需要简单计算一下相对位置就好了
- iphone5-iphone5s时代屏幕的尺寸变了(320,568) 这时AutoresizingMask派上了用场(为什么不用Autolayout? 因为还要支持ios5)
- iphone6时代 屏幕的宽度也发生了变化,终于是时候抛弃AutoresizingMask改用Autolayout了
- 不用支持ios5了
- 相对于屏幕适配的多样性来说autoresizingMask也已经过时了
- 直到iphone6发布之后 我知道使用Autolayout势在必行了
iPhone的尺寸
3.5inch、4.0inch、4.7inch、5.5inch
iPad的尺寸
7.9inch、9.7inch、12.9inch
屏幕方向
竖屏
横屏
-
什么是Autolayout
- Autolayout是一种“自动布局”技术,专门用来布局UI界面的
- Autolayout自iOS6开始引入,由于Xcode4的不给力,当时并没有得到很大推广
- 自iOS7(Xcode5)开始,Autolayout的开发效率得到很大的提升
- 苹果官方也推荐开发者尽量使用Autolayout来布局UI界面
- Autolayout能很轻松地解决屏幕适配的问题
-
点和像数
- 在用户眼中
- 屏幕是由无数个像素组成的
- 像素越多,屏幕越清晰
- 在用户眼中
-
在开发者眼中
- 屏幕是由无数个点组成的,点又是由像素组成的
- 像素越多,屏幕越清晰
2个核心概念
-
约束
- 确定一个控件的(x,y,w,h)
-
参照
- 所添加的约束跟哪个控件有关(相对于哪个控件来说)
常见单词
- Leading -> Left -> 左边
- Trailing -> Right -> 右边
UILabel实现包裹内容
- 设置宽度约束为 <= 固定值
- 设置位置约束
- 不用去设置高度约束
autolayout在storyboard/xib中使用(掌握)
-
autolayout在代码中使用
- 一个约束就是一个
NSLayoutConstraint
对象 obj1.property1 =(obj2.property2 * multiplier)+ constant value
- 添加约束的原则
- 实现方式
- VFL(了解)
- Masonry(掌握)
- 一个约束就是一个
-
其它的知识点
- UIlabel实现包裹内容
- 设置位置约束
- 设置宽度约束 <= 固定值
- 不设置高度约束
- 约束的优先级
- 修改约束
- 约束动画
- UIlabel实现包裹内容
self.redViewWlc.constant = 50;
[UIView animateWithDuration:2.0 animations:^{
// 强制刷新
[self.view layoutIfNeeded];
}];
- 实现代码
- 代码实现Autolayout的步骤
- 利用NSLayoutConstraint类创建具体的约束对象
- 添加约束对象到相应的view上
- 代码实现Autolayout的步骤
-(void)addConstraint:(NSLayoutConstraint*)constraint;
-(void)addConstraints:(NSArray*)constraints;
- 代码实现Autolayout的注意点
- 要先禁止autoresizing功能,设置view的下面属性为NO
view.translatesAutoresizingMaskIntoConstraints= NO;
- 添加约束之前,一定要保证相关控件都已经在各自的父控件上
- 不用再给view设置frame
- Autolayout的警告与错误
- 一个NSLayoutConstraint对象就代表一个约束
- 创建约束对象的常用方法
/*
pview1:要约束的控件
pattr1:约束的类型(做怎样的约束)
prelation:与参照控件之间的关系
pview2:参照的控件
pattr2:约束的类型(做怎样的约束)
pmultiplier:乘数
pc:常量
*/
+(id)constraintWithItem:(id)view1attribute:(NSLayoutAttribute)attr1relatedBy:(NSLayoutRelation)relationtoItem:(id)view2attribute:(NSLayoutAttribute)attr2multiplier:(CGFloat)multiplierconstant:(CGFloat)c;
- 核心公式
obj1.property1 =(obj2.property2 * multiplier)+ constantvalue
-
添加约束的规则
- 在创建约束之后,需要将其添加到作用的view上
- 在添加时要注意目标view需要遵循以下规则:
-
对于两个
同层级
view之间的约束关系,添加到它们的父view上
-
对于两个
不同层级
view之间的约束关系,添加到他们最近的共同父view上
-
对于有
层次关系
的两个view之间的约束关系,添加到层次较高的父view上
-
-
有了Autolayout的UILabel
-
在没有Autolayout之前,UILabel的文字内容总是居中显示,导致顶部和底部会有一大片空缺区域
-
有Autolayout之后,UILabel的bounds默认会自动包住所有的文字内容,顶部和底部不再会有空缺区域
-
-
关于Autolayout动画
- 在修改了约束之后,只要执行下面代码,就能做动画效果
[UIViewanimateWithDuration:1.0animations:^{
[添加了约束的view的父控件 layoutIfNeeded];
}];