屏幕适配的总结笔记

一、屏幕适配-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。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容