屏幕适配
针对不同大小的屏幕尺寸进行适配
-
iPhone各型号和系列的尺寸不相同
- 3.5inch、4.0inch、4.7inch、5.5inch
-
屏幕的方向也会导致适配问题
- 横屏、竖屏
点和像素
-
在用户眼中
- 屏幕是由无数个像素组成的
- 像素越多，屏幕越清晰
-
在开发者眼中
- 屏幕是由无数个点组成的，点又是由像素组成的
- 像素越多，屏幕越清晰
在非Retina屏中一个点由一个像素组成
在Retina屏中一个点由2X2个像素组成
fenbianlv.png
简介(屏幕适配发展史)
- 在以前的iOS程序中，是如何布局UI界面的？
- 写固定值-> autoresizingMask -> autolayout-> sizeClasses
- iPhone1-iPhone4s时代 屏幕的尺寸固定为(320,480) ,我们只需要简单计算一下相对位置就好了
- iphone5-iphone5s时代屏幕的尺寸变了(320,568) 这时AutoresizingMask派上了用场(为什么不用Autolayout? 因为还要支持ios5)
- iphone6时代屏幕的宽度也发生了变化,终于是时候抛弃AutoresizingMask改用Autolayout了(1.不用支持ios5了 2. 相对于屏幕适配的多样性来说autoresizingMask也已经过时了)
- 直到iphone6发布之后 我知道使用Autolayout势在必行了
autoresizingMask
使用autoresizingmarsk时要禁用autolayout，因为二者不兼容
在storyboard中使用
autoerisizingMarsk.png
- 在代码中的使用
//控件尺寸随屏幕变化拉伸
self.scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
//控件的位置固定在右下角
self.pageControl.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin;
UIViewAutoresizingFlexibleLeftMargin 距离父控件的左边是可以伸缩的
UIViewAutoresizingFlexibleBottomMargin 距离父控件的底部是可以伸缩的
UIViewAutoresizingFlexibleRightMargin 距离父控件的右边是可以伸缩的
UIViewAutoresizingFlexibleTopMargin 距离父控件的顶部是可以伸缩的
UIViewAutoresizingFlexibleHeight 高度跟随父控件的高度进行伸缩
UIViewAutoresizingFlexibleWidth 宽度跟随父控件的宽度进行伸缩
- 但是Autoresizing的局限性很大，不能处理同级控件之间的关系
Autolayout
- 什么是autolayout？
- Autolayout是一种“自动布局”技术，专门用来布局UI界面的
- Autolayout自iOS6开始引入，由于Xcode4的不给力，当时并没有得到很大推广
- 自iOS 7（Xcode5）开始，Autolayout的开发效率得到很大的提升，苹果官方也推荐开发者尽量使用Autolayout来布局UI界面
- Autolayout能很轻松地解决屏幕适配的问题
Autolayout的2个核心概念
- 约束:通过给控件添加约束,来决定控件的位置和尺寸
- 参照:在添加约束时,是依照谁来添加(可以是父控件或者兄弟控件)
自动布局的核心计算公式
- obj1.property1 =（obj2.property2 * multiplier）+ constant value
添加约束的规则
- 对于两个同层级view之间的约束关系，添加到它们的父view上
- 对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上
- 对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上
在storyboard中添加约束
![Upload yuesu.png failed. Please try again.]
在代码中实现约束
- 代码实现Autolayout的步骤
利用NSLayoutConstraint类创建具体的约束对象
添加约束对象到相应的view上
- (void)addConstraint:(NSLayoutConstraint *)constraint;
- (void)addConstraints:(NSArray *)constraints;
-
代码实现Autolayout的注意点
- 要先禁止autoresizing功能，设置view的下面属性为NO
view.translatesAutoresizingMaskIntoConstraints = NO;- 添加约束之前，一定要保证相关控件都已经在各自的父控件上,不用再给view设置frame
-
一个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 ：常量
例如：
// 左边约束
NSLayoutConstraint *leftlc_b = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:30];
[self.view addConstraint:leftlc_b];
- 在Autolayout中，UILabel的bounds默认会自动包住所有的文字内容，顶部和底部不再会有空缺区域
基于Autolayout的动画
- 在修改了约束之后，只要执行下面代码，就能做动画效果
[UIView animateWithDuration:1.0 animations:^{
[添加了约束的view的父控件 layoutIfNeeded];
}];
VFL语言
- 由于autolayout的编码过于繁琐，苹果公司为了简化Autolayout的编码而推出VFL抽象语言，全称为“Visual Format Language”
- 示例：
H:[cancelButton(72)]-12-[acceptButton(50)]
//canelButton宽72，acceptButton宽50，它们之间间距12
Masonry
- 目前最流行的Autolayout第三方框架
- 用优雅的代码方式编写Autolayout
- 省去了苹果官方恶心的Autolayout代码
- 大大提高了开发效率
