美文网首页
屏幕适配的总结笔记

屏幕适配的总结笔记

作者: 方圆十里不留母狗 | 来源:发表于2016-04-17 22:35 被阅读127次

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

    相关文章

      网友评论

          本文标题:屏幕适配的总结笔记

          本文链接:https://www.haomeiwen.com/subject/iroolttx.html