iOS自动布局Autolayout

1、高级软件人才实作培训专家!北京传智播客教育 Autolayout-自动布局iOS学院高级软件人才实作培训专家!北京传智播客教育 简介-iPhone屏幕适配的发展过程一直接使用 frame 计算控件的位置、大小(MagicNumber)1.iPhone3GS iPhone4 iPhone4S 屏幕的物理尺寸是一样屏幕的物理尺寸是一样的的(无需屏幕适配无需屏幕适配), 而且一个应用要么是横屏要么是竖屏, 不存在能同时进行横竖屏切换的应用二使用 autoresizing进行屏幕适配（设置显示规则，只能按照父控件来设置参照）1.随着iPad 的发布, 屏幕物理大小发生了变化屏幕物理大小发生了变化, 并

2、且要求部分应用程序实现横竖屏切换横竖屏切换，所以不能把控件的 frame 都写死了，需要进行屏幕适配。2.autoresizing的核心思想就是：参照父容器来设置子控件的 frame。不再写死 frame, 而是参照参照。3.举例: 在竖屏下有一个按钮要占据整个屏幕宽度, 当切换到横屏下以后同样要占据整个屏幕的宽度4.注意: autoresizing只能设置当前控件与父控件之间的相对关系高级软件人才实作培训专家!北京传智播客教育 简介-iPhone屏幕适配的发展过程三使用 autolayout（从 iOS6开始）进行屏幕适配1.随着 iPhone5 iPhone5s 等的发布苹果设备不同尺寸的

3、屏幕变得越来越多, 不仅要求能根据控件父子关系来设置相对位置, 也要求能根据任意控件之间的关系来设置位置2.因为 autoresizing只能设置当期控件与父控件之间的相对关系, 当遇到要设置兄弟控件之间的关系的时候 autoresizing就无能为力了3.举例: 在竖屏下, 屏幕底部有两个按钮, 这两个按钮的间距为一个固定的值(宽度不指定); 当切换为横屏的时候要求这两个按钮还显示在屏幕底部, 并且按钮间的间距不变, 按钮可以随之变宽。高级软件人才实作培训专家!北京传智播客教育 简介-iPhone屏幕适配的发展过程四使用 size classes + autolayout 进行屏幕适配1.看

4、时间作为补充, 今天的内容是Autolayout”2.当 iPhone6发布以后, 苹果设备的屏幕越来越多(以后也可能出现更多不同大小的屏幕), 为了能更容易的适配不同的屏幕, 苹果推出了size classes 技术3.通过 autolayout设置的约束, 约束一旦添加就会应用于各种屏幕（也就是说在各种不同的屏幕下都使用相同的约束）4.通过 size classes + autolayout的方式, 可以为不同尺寸的屏幕可以为不同尺寸的屏幕设置不同的约束设置不同的约束n举例: 在3.5 inch的屏幕下希望某个按钮紧贴屏幕上边显示, 但是当屏幕变成4.7 inch以后, 则希望该按钮显示到

5、屏幕的正中央nsize classes技术主要解决的问题: 为为不同尺寸的屏幕不同尺寸的屏幕, 通过通过 autolayout设置不同的约束。设置不同的约束。高级软件人才实作培训专家!北京传智播客教育 屏幕适配发展总结1.通过代码计算 frame2.Autoresizing（设置控件与父控件的相对关系,从而实现间接设置frame， ios系统在运行时会根据设置的规则, 计算出对应的frame,无需手动计算frame）n通过设置子控件与父控件的关系来决定如何显示控件3.autolayoutn通过设置某控件与任意其他控件间的关系来决定如何显示这个控件, 不仅仅局限与父子控件4.size class

6、esn通过 size classes + autolayout实现针对不同屏幕为控件设置不同的约束高级软件人才实作培训专家!北京传智播客教育 注意n注意: 无论是通过 autoresizing 还是 autolayout 其实只是间接设置了控件的 frame, 所以一旦使用了 autoreszing 或者 autolayout 那么就不要在直接设置 frame 了, 否者可能产生混乱。高级软件人才实作培训专家!北京传智播客教育 nAutoresizingnAutolayoutn并且： autoresizing 和autolayout 二者是互斥的，同时只能使用其中一种，当使用autoresiz

7、ing的时候必须禁用autolayout, 当使用autolayout的时候就无法使用Autoresizing了。高级软件人才实作培训专家!北京传智播客教育 高级软件人才实作培训专家!北京传智播客教育 高级软件人才实作培训专家!北京传智播客教育 介绍 autoresizing的使用n只是为了介绍, 以后不要用 autoresizing, 都用 autolayoutnautoresizing 和 autolayout只能用其一n当使用 autoresizing 的时候就无法使用 autolayout, 反之亦然。高级软件人才实作培训专家!北京传智播客教育 案例1:n要求：n1. 在控制器的 vi

8、ew 的四角放四个高宽都为100的 UIView。n2. 在不同尺寸的屏幕下都可以正确显示在四角。n目的: 说明 autoresizing 外面4根线的作用。n步骤:n1 选择3.5 inch的控制器, 在四角放四个 UIView, 设置宽高都是100, 并设置不同背景颜色n2 分别演示在iPhone4S iPhone5s iPhone6 不同模拟器下的效果（同时演示横屏下效果也不正常）, 说明如果不做屏幕适配, 那么在不同的模拟器下效果不正常n3 通过 autoresizing解决布局问题, 首先取消掉 autolayout。n4 选中对应的子控件, 点击工具箱中的Size Inspecto

9、r(小尺子)n5 找到 autoresizing的属性框, 通过设置是否需要外面的4根线来实现屏幕适配高级软件人才实作培训专家!北京传智播客教育 案例1: 总结n外面四根线的含义: n当前控件与父控件之间是否保持固定的距离。如果选择了外面的线则表示与父控件某一边的距离固定, 如果不勾选, 则表示当前控件与父控件的某一边距离是可拉伸的（不固定）。高级软件人才实作培训专家!北京传智播客教育 案例2:n要求:n1. 在界面上放置两个 UIViewn2. 蓝色 UIView, 200*200；红色 UIView 100*100n3.红色 UIViwe 要放在蓝色 UIView的里面n4.当蓝色 UIV

10、iew的宽高发生改变的时候, 要求红色 UIView的宽高也随着改变n目的: 说明 autoresizing里面的两根线的作用n步骤: 先把内部的红色 UIView 的 autoresizing 都删除, 然后把 autoresizing 中间的两根线勾上。n注意 :通过在 xcode 中修改属性中蓝色 UIView的大小来演示红色 UIView 跟随变化的效果。高级软件人才实作培训专家!北京传智播客教育 案例2: 总结n里面两根线的作用:n 表示子控件的宽和高是否随着父控件的宽高的变化而变化高级软件人才实作培训专家!北京传智播客教育 案例3：通过代码实现 autoresizingn目的: 为

11、了在工作中遇到旧的项目是通过代码实现的 autoresizing时可以应付自如。旧的项目还有没 storyboard。n注意注意: 这里一定要用纯代码的方式创建每一个控件, 拖上来的控件默认设置了一些属性, 会造成运行效果不正确高级软件人才实作培训专家!北京传智播客教育 案例3：步骤n1 通过代码创建一个蓝色 UIView, 200*200n2 在这个蓝色 UIView里创建一个红色 UIView, 200*50, 这个红色 UIView放在在蓝色 UIView的最底部: x = 0, y = 150n3 要求: 当蓝色 UIView发生变化时（宽和高改变时）, 红色 UIView的宽随着蓝色

12、 UIView的宽度变化（红色 UIView的高度始终保持不变）, 并且永远紧贴在蓝色UIView底部显示。n4 为按钮注册单击事件, 点击按钮的时候动态改变蓝色 UIView的高度和宽度, 观察里面红色 UIView的变化n5 为红色 UIView设置宽度随着父控件变化而变化、顶部自由伸缩（也就是底部紧贴父控件的底部）就可以了。nredVw.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin;高级软件人才实作培训专家!北京传智播客教育 高级软件人才实作培训专家!北京传

13、智播客教育 高级软件人才实作培训专家!北京传智播客教育 什么是Autolayout - 自动布局pAutolayout是一种“自动布局”技术，专门用来布局UI界面的pAutolayout自iOS 6开始引入，由于Xcode 4的不给力，当时并没有得到很大推广p自iOS 7（Xcode 5）开始，Autolayout的开发效率得到很大的提升p苹果官方也推荐开发者尽量使用Autolayout来布局UI界面pAutolayout能很轻松地解决屏幕适配的问题高级软件人才实作培训专家!北京传智播客教育 Autolayout的2个核心概念p参照p通过参照其他控件或父控件来设置当前控件的位置和大小p约束Co

14、nstraint(规则)p通过添加约束限制控件的位置和大小高级软件人才实作培训专家!北京传智播客教育 autoresizing 无法解决的问题高级软件人才实作培训专家!北京传智播客教育 autoresizing 无法解决的问题高级软件人才实作培训专家!北京传智播客教育 介绍自动布局所使用的按钮高级软件人才实作培训专家!北京传智播客教育 介绍自动布局所使用的按钮n分别介绍自动布局的每个按钮。高级软件人才实作培训专家!北京传智播客教育 Autolayout的警告和错误n警告p控件的frame不匹配所添加的约束, 比如比如约束控件的宽度为100, 而控件现在的宽度是110n错误p缺乏必要的约束, 比

15、如只约束了宽度和高度, 没有约束具体的位置p两个约束冲突, 比如1个约束控件的宽度为100, 1个约束控件的宽度为110高级软件人才实作培训专家!北京传智播客教育 案例1：（控制器都使用600*600来做）n需求：设置一个宽150，高30的按钮始终显示在屏幕的正中央（水平居中对齐、垂直居中对齐）n思路：设置水平居中约束、垂直居中约束、高和宽的约束高级软件人才实作培训专家!北京传智播客教育 案例2: n设置一个 UIView 无论在任何屏幕下距离上下左右四个边的距离都是50。思路：设置距离四周的 margin 为50.高级软件人才实作培训专家!北京传智播客教育 案例3：n距离左右20, 两个 V

16、iew 之间间隔始终是20, 两个 View 的高度都是50。宽度不定。（演示使用多种方式都可以实现）n注意：设置右边相对于某个控件的margin （间距）的时候, 如果当前控件的右边没有那个控件，则无法选择。高级软件人才实作培训专家!北京传智播客教育 案例4:n在控制器view顶部添加2个view，1个蓝色，1个红色p2个view高度永远相等, 50p红色view和蓝色view右边对齐p蓝色view距离父控件左边、右边、上边间距相等，30p蓝色view距离红色view间距固定，30p红色view的左边和父控件的中点对齐(或者红色 View的宽度是蓝色 View 的一半)高级软件人才实作培训专

17、家!北京传智播客教育 高级软件人才实作培训专家!北京传智播客教育 案例5：n完成“史上最牛的游戏”首页p添加对应的6个button和背景图片，适配3.5 inch、4.0 inch高级软件人才实作培训专家!北京传智播客教育 n注意：按钮、开关、文本框等控件不设置高、宽的约束也可以，因为这些控件的高、宽都有默认值。高级软件人才实作培训专家!北京传智播客教育 案例6n横竖屏效果如图所示高级软件人才实作培训专家!北京传智播客教育 添加约束的规则（1）n在创建约束之后，需要将其添加到作用的view上n在添加时要注意目标view需要遵循以下规则：p1）对于两个同层级view之间的约束关系，添加到它们的父

18、view上高级软件人才实作培训专家!北京传智播客教育 添加约束的规则（2）n2）对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上高级软件人才实作培训专家!北京传智播客教育 添加约束的规则（3）n3）对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上高级软件人才实作培训专家!北京传智播客教育 n总结: 如果添加的约束和其它控件没有关系, 会添加到自己身上n总结:如果是父子关系, 设置子控件的约束, 约束会添加到父控件上n注意: 两个控件是兄弟关系n总结: 如果是兄弟关系, 设置两兄弟的约束, 约束会添加到第一个共同的父控件上高级软件人才实作培训专家!

19、北京传智播客教育 代码实现Autolayoutn代码实现Autolayout的步骤p利用NSLayoutConstraint类创建具体的约束对象p添加约束对象到相应的view上- (void)addConstraint:(NSLayoutConstraint *)constraint;- (void)addConstraints:(NSArray *)constraints;n代码实现Autolayout的注意点p1 要先禁止autoresizing功能，设置view的下面属性为NOview.translatesAutoresizingMaskIntoConstraints = NO;p2 添

20、加约束之前，一定要保证相关控件都已经在各自的父控件上p3不用再给view设置frame高级软件人才实作培训专家!北京传智播客教育 NSLayoutConstraintn一个NSLayoutConstraint对象就代表一个约束n创建约束对象的常用方法+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFlo

21、at)multiplier constant:(CGFloat)c;pview1 ：要约束的控件pattr1 ：约束的类型（做怎样的约束）prelation ：与参照控件之间的关系pview2 ：参照的控件pattr2 ：约束的类型（做怎样的约束）pmultiplier ：乘数pc ：常量n自动布局有个核心公式perty1 =（perty2 * multiplier）+ constant value高级软件人才实作培训专家!北京传智播客教育 案例4用代码实现n/ 创建蓝色Viewn/ 创建红色n/ 禁止 autoresizingn/ 创建约束n/ 创建蓝色 Vi

22、ew的约束n/ 距离左边30n/ 距离上边30n/ 距离右边30n/ 高度50n/ 创建红色 View 的约束n/ 红色 view 的高度n/ 红色 view 的宽度等于蓝色n/ 红色 view 与蓝色 view 的间距 topn/ 红色 view与 蓝色 view 右对齐高级软件人才实作培训专家!北京传智播客教育 基于Autolayout的动画n在修改了约束之后，只要执行下面代码，就能做动画效果UIView animateWithDuration:1.0 animations: 添加了约束的view layoutIfNeeded;思路：通过添加约束后，在修改约束的值，来实现动画。注意：调用

23、某个 view 的layoutIfNeeded方法, 会先更新这个 view 的约束, 这个 view 的子控件的约束, 这个 View的父控件的约束。高级软件人才实作培训专家!北京传智播客教育 Size Classes 介绍n从 iOS8开始才支持 size classes。nsize classes本质就是对所有的屏幕进行了分类, 我们可以为不同类型的屏幕设置不同的约束n仅仅是对屏幕进行了分类, 真正排布UI元素还得使用autolayoutn不再有横竖屏的概念, 只有屏幕尺寸的概念n不再有具体尺寸的概念, 只有抽象尺寸的概念n把宽度和高度各分为3种情况n1 any(任意, 表示既可以是 c

24、ompact, 也可以是 regular), 一般用 * 表示n2 compact(紧凑, 小), 一般用 - 表示n3 regular(正常, 大), 一般用 + 表示高级软件人才实作培训专家!北京传智播客教育 sizeclass和autolayout关系nsizeclass:仅仅是对屏幕进行了分类nautolayout:对屏幕中各种元素进行约束(位置尺寸)高级软件人才实作培训专家!北京传智播客教育 size classes 案例1:n案例1: 在所有竖屏的 iPhone上左上角有一个开关, 在所有 iPad 上, 右下角显示开关。n步骤:n0 在 any 和 any 的情况下拽一个开关。n1 先选中控件, 在右侧设置 Installed 属性, 告诉 xcode 在哪种屏幕下要显示这个控件n2 选择底部菜单栏的size classes菜单项, 设置在特定的屏幕下如何显示(设置约束)n* 注意: 默认情况下 Installed表示 Any 和 Any, 也就意味着默认情况下在任何屏幕下都显示这个控件高级软件人才实作培训专家!北京传智播客教育 size classes 案例2:n案例2: 在所有横屏的 iPhone上右上角有一个开关。n步骤：n1 在所有 iPhone的横屏下安装这个开关。n2 切换到横屏下