屏幕适配的总结笔记

一、屏幕适配-autoresizing简单使用

1、为什么要屏幕适配？

> iphone手机屏幕尺寸呈现多样化。

> 横竖屏适配(ipad)

2、屏幕适配的发展过程。

> 纯代码计算frame适配--> autoresizing--> autolayout。

* autoresizing:ios7之前经常使用

* autolayout:ios6开始出现,ios7之后大范围使用

> PPT介绍页面布局的三个时期

3 autoresizing示例

//注意:autoresizing和autolayout是一般情况下不能共存，要开启autoresizing(去掉Use Auto Layout)

3.1、通过storyboard讲解autoresizing使用

> 在四个角放入4个控件运行查看两种情况下默认的效果

> 依次设置4个控件autosizing周围的线条讲解四周线条含义（固定距离周围的距离）

3.2、通过代码实现autosizing

> 需求：蓝色父控件和红色小控件

/**

1.红色工具条永远粘着蓝色父控件的底部

* 距离父控件底部、左边、右边的间距是固定的

* 距离父控件顶部的间距是伸缩的

2.红色工具条的宽度永远填充整个蓝色父控件

* 自己的宽度跟随父控件宽度的改变而伸缩（改变）

3.红色工具条的高度永远固定是44

*/

设置autoreizingMask属性距离顶部可拉伸、宽度可拉伸。

> autoreizingMask每个枚举值的含义如下：

/*

UIViewAutoresizingNone                = 0,

默认情况，父控件的尺寸修改了，子控件没有任何反应

UIViewAutoresizingFlexibleLeftMargin  = 1 << 0,

距离父控件左边的间距是伸缩的(右边距离固定)

UIViewAutoresizingFlexibleWidth        = 1 << 1,

自己的宽度跟随父控件宽度的改变而伸缩

UIViewAutoresizingFlexibleRightMargin  = 1 << 2,

距离父控件右边的间距是伸缩的(左边的距离固定)

UIViewAutoresizingFlexibleTopMargin    = 1 << 3,

距离父控件顶部的间距是伸缩的

UIViewAutoresizingFlexibleHeight      = 1 << 4,

自己的高度跟随父控件高度的改变而伸缩

UIViewAutoresizingFlexibleBottomMargin = 1 << 5

距离父控件底部的间距是伸缩的

*/

> 切记：代码中设置某个方向可伸缩代表另一个方向固定,(storyboard里面)中正好相反

二、Autolayout基本使用

1、autoresizing的缺陷

> 需求：如果想设置A控件和B控件之间距离固定。

> 无论如何Autosizing无法满足需求,因为Autosizing是相对父控件计算的,不能单独设置两个子控件之间的相对位置。

> autolayout的出现就是为了拟补autoresizing的缺陷。

2、Autolayout简单使用

> PPT介绍Autolayout基本概念

* 参照:就是一个控件可以参照另一个控件的位置

* 约束:就是限制条件。比如里两个控件之间的距离是20

3、新建项目演示autolayout的基本使用。

> 验证无法通过autoresizing来固定两个子控件之间的间距。

> 使用autolayout来约束子控件的宽高和距离父控件上下左右的间距。

> 警告和错误

1)、警告(黄色提示)

* 控件的frame不匹配所添加的约束, 比如比如约束控件的宽度为100, 而控件现在的宽度是110

2)、错误(红色提示)

* 缺乏必要的约束, 比如只约束了宽度和高度, 没有约束具体的位置

* 两个约束冲突, 比如1个约束控件的宽度为100, 1个约束控件的宽度为110

> Top Layout Guide    上面的参照线

> Bottom Layout Guide  下面的参照线

三、Autolayout其它用法

1、约束两个子控件

> 宽高相等

> 垂直方向距离固定20

> 两个子控件永远在父控件中间

四、Autolayout练习(PPT)

五、Autolayout代码实现

1、使用代码实现AutoLayout的注意点。

> 要先禁止autoresizing功能，设置view的下面属性为NO

view.translatesAutoresizingMaskIntoConstraints = NO;

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

> 不用再给view设置frame

2、代码实现Autolayout概念（PPT讲解）

> 对照公式讲解NSLayoutConstraint对象每个参数的含义

/*

typedef NS_ENUM(NSInteger, NSLayoutAttribute) {

NSLayoutAttributeLeft = 1,                    //左侧

NSLayoutAttributeRight,                        //右侧

NSLayoutAttributeTop,                          //上方

NSLayoutAttributeBottom,                      //下方

NSLayoutAttributeLeading,                      //左边

NSLayoutAttributeTrailing,                    //右边

NSLayoutAttributeWidth,                        //宽度

NSLayoutAttributeHeight,                      //高度

NSLayoutAttributeCenterX,                      //X轴中心

NSLayoutAttributeCenterY,                      //Y轴中心

NSLayoutAttributeBaseline,                    //文本底标线

NSLayoutAttributeNotAnAttribute = 0            //没有属性

};

其中leading与left trailing与right 在正常情况下是等价的 但是当一些布局是从右至左时(比如阿拉伯文) 则会对调，换句话说就是只用left和right就好了

typedef NS_ENUM(NSInteger, NSLayoutRelation) {

NSLayoutRelationLessThanOrEqual = -1,          //小于等于

NSLayoutRelationEqual = 0,                    //等于

NSLayoutRelationGreaterThanOrEqual = 1,        //大于等于

};

*/

3、代码实现AutoLayout(PPT练习2)

> 添加控件并禁止Autoresizing

> 创建蓝色控件约束（高度、距离左边、顶部、右边）

> 创建红色控件约束（右边等于蓝色、高度等于蓝色、顶部对齐蓝色底部、宽度等于蓝色一半）

4、VFL

> VFL基本概念（PPT）

> 利用VFL实现PPT练习2

* 注意在设置垂直方向属性时设置右对齐

* 注意VFL语句中不能有乘除法（还需要代码写约束配合）

/***  利用VFL语言生成约束*/

NSString *vfl = @"V:|-padding-[blueView(40)]-padding-[redView(==blueView)]";

NSDictionary *views = NSDictionaryOfVariableBindings(blueView, redView);

NSDictionary *metrics = @{@"padding" : @20};

NSArray *contrains = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:0 metrics:metrics views:views];

/*

Autolayout基础知识

http://commandshift.co.uk/blog/2013/02/20/creating-individual-layout-constraints/

http://commandshift.co.uk/blog/2013/01/31/visual-format-language-for-autolayout/

*/

/*

TableView中使用Autolayout (MeXXX)

https://github.com/smileyborg/TableViewCellWithAutoLayout

https://github.com/smileyborg/TableViewCellWithAutoLayoutiOS8

注意：利用Autolayout约束UIScrollView和TableView需要特殊处理

*/

5、AutoLayout动画(PPT)

> 每个约束都是NSLayoutConstraint对象，可以修改该对象的constant调整控件的布局然后调用layoutIfNeeded更新布局

6、UILabel使用autolayout(PPT)

六、sizeclass

1> 发展历程

代码计算frame -> autoreszing(父控件和子控件的关系) -> autolayout(任何控件都可以产生关系) -> sizeclass

2> sizeclass

* 仅仅是对屏幕进行了分类, 真正排布UI元素还得使用autolayout

* 不再有横竖屏的概念, 只有屏幕尺寸的概念

* 不再有具体尺寸的概念, 只有抽象尺寸的概念

* 把宽度和高度各分为3种情况

1) Compact : 紧凑(小)

2) Any : 任意

3) Regular : 宽松(大)

4) 符号代表

- : Compact

* : Any

+ : Regular

5) 继承性（不建议大家使用Any）

* * : 其它8种情况都会继承

* - : 会被- - \ + -继承

+ * : 会被+ - \ + +继承

6) sizeclass和autolayout的作用

sizeclass:仅仅是对屏幕进行了分类

autolayout:对屏幕中各种元素进行约束(位置\尺寸)

7) 从xcode6开始，iPhone&ipad的开发可以使用同一个 stroyboard。