1ui基础第10天自动布局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

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

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

5、某个按钮紧贴屏幕上边显示, 但 是当屏幕变成4.7 inch以后, 则希望该按钮显示到屏幕的正中央 nsize classes技术主要解决的问题: 为为不同尺寸的屏幕不同尺寸的屏幕, 通过通过 autolayout设置不同的约束。设置不同的约束。 高级软件人才实作培训专家! 北京传智播客教育 屏幕适配发展总结 1.通过代码计算 frame 2.Autoresizing（设置控件与父控件的相对关系, 从而实现间接设置frame， ios系统在运行时会 根据设置的规则, 计算出对应的frame,无需手 动计算frame） n通过设置子控件与父控件的关系来决定如何显示控件 3.autolayout

6、n通过设置某控件与任意其他控件间的关系来决定如何显 示这个控件, 不仅仅局限与父子控件 4.size classes n通过 size classes + autolayout实现针对不同屏幕为控 件设置不同的约束 高级软件人才实作培训专家! 北京传智播客教育 注意 n注意: 无论是通过 autoresizing 还是 autolayout 其实只是间接设置了控件的 frame, 所以一旦使用了 autoreszing 或 者 autolayout 那么就不要在直接设置 frame 了, 否者可能产生混乱。 高级软件人才实作培训专家! 北京传智播客教育 nAutoresizing nAutol

7、ayout n并且： autoresizing 和autolayout 二者是互斥的，同时只能使用 其中一种，当使用autoresizing的时候必须禁用autolayout, 当使用 autolayout的时候就无法使用Autoresizing了。 高级软件人才实作培训专家! 北京传智播客教育 高级软件人才实作培训专家! 北京传智播客教育 高级软件人才实作培训专家! 北京传智播客教育 介绍 autoresizing的使用 n只是为了介绍, 以后不要用 autoresizing, 都用 autolayout nautoresizing 和 autolayout只能用其一 n当使用 autore

8、sizing 的时候就无法使用 autolayout, 反之亦然。 高级软件人才实作培训专家! 北京传智播客教育 案例1: n要求： n1. 在控制器的 view 的四角放四个高宽都为100的 UIView。 n2. 在不同尺寸的屏幕下都可以正确显示在四角。 n目的: 说明 autoresizing 外面4根线的作用。 n步骤: n1 选择3.5 inch的控制器, 在四角放四个 UIView, 设置宽高都是100, 并设置不同背景颜色 n2 分别演示在iPhone4S iPhone5s iPhone6 不同模拟器下的效果 （同时演示横屏下效果也不正常）, 说明如果不做屏幕适配, 那么在不同的

9、 模拟器下效果不正常 n3 通过 autoresizing解决布局问题, 首先取消掉 autolayout。 n4 选中对应的子控件, 点击工具箱中的Size Inspector(小尺子) n5 找到 autoresizing的属性框, 通过设置是否需要外面的4根线来实现 屏幕适配 高级软件人才实作培训专家! 北京传智播客教育 案例1: 总结 n外面四根线的含义: n当前控件与父控件之间是否保持固定的距 离。如果选择了外面的线则表示与父 控件某一边的距离固定, 如果不勾选, 则 表示当前控件与父控件的某一边距离是可 拉伸的（不固定）。 高级软件人才实作培训专家! 北京传智播客教育 案例2: n

10、要求: n1. 在界面上放置两个 UIView n2. 蓝色 UIView, 200*200；红色 UIView 100*100 n3.红色 UIViwe 要放在蓝色 UIView的里面 n4.当蓝色 UIView的宽高发生改变的时候, 要求红色 UIView的宽高也随着改变 n目的: 说明 autoresizing里面的两根线的作用 n步骤: 先把内部的红色 UIView 的 autoresizing 都删除, 然后把 autoresizing 中间的两根线勾上。 n注意 :通过在 xcode 中修改属性中蓝色 UIView的大小来 演示红色 UIView 跟随变化的效果。 高级软件人才实作

11、培训专家! 北京传智播客教育 案例2: 总结 n里面两根线的作用: n 表示子控件的宽和高是否随着父控件的宽高的 变化而变化 高级软件人才实作培训专家! 北京传智播客教育 案例3：通过代码实现 autoresizing n目的: 为了在工作中遇到旧的项目是通过代码实现的 autoresizing时可以应付自如。旧的项目还有没 storyboard。 n注意注意: 这里一定要用纯代码的方式创建每一个控件, 拖上 来的控件默认设置了一些属性, 会造成运行效果不正确 高级软件人才实作培训专家! 北京传智播客教育 案例3：步骤 n1 通过代码创建一个蓝色 UIView, 200*200 n2 在这个蓝

12、色 UIView里创建一个红色 UIView, 200*50, 这个红 色 UIView放在在蓝色 UIView的最底部: x = 0, y = 150 n3 要求: 当蓝色 UIView发生变化时（宽和高改变时）, 红色 UIView的宽随着蓝色 UIView的宽度变化（红色 UIView的高度始终 保持不变）, 并且永远紧贴在蓝色UIView底部显示。 n4 为按钮注册单击事件, 点击按钮的时候动态改变蓝色 UIView的高 度和宽度, 观察里面红色 UIView的变化 n5 为红色 UIView设置宽度随着父控件变化而变化、顶部自由伸缩 （也就是底部紧贴父控件的底部）就可以了。 nred

13、Vw.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin; 高级软件人才实作培训专家! 北京传智播客教育 高级软件人才实作培训专家! 北京传智播客教育 高级软件人才实作培训专家! 北京传智播客教育 什么是Autolayout - 自动布局 pAutolayout是一种“自动布局”技术，专门用来布局UI 界面的 pAutolayout自iOS 6开始引入，由于Xcode 4的不给力， 当时并没有得到很大推广 p自iOS 7（Xcode 5）开始，Autolayout的开发

14、效率得 到很大的提升 p苹果官方也推荐开发者尽量使用Autolayout来布局UI界 面 pAutolayout能很轻松地解决屏幕适配的问题 高级软件人才实作培训专家! 北京传智播客教育 Autolayout的2个核心概念 p参照 p通过参照其他控件或父控件来设置当前控件 的位置和大小 p约束Constraint(规则) p通过添加约束限制控件的位置和大小 高级软件人才实作培训专家! 北京传智播客教育 autoresizing 无法解决的问题 高级软件人才实作培训专家! 北京传智播客教育 autoresizing 无法解决的问题 高级软件人才实作培训专家! 北京传智播客教育 介绍自动布局所使用

15、的按钮 高级软件人才实作培训专家! 北京传智播客教育 介绍自动布局所使用的按钮 n分别介绍自动布局的每个按钮。 高级软件人才实作培训专家! 北京传智播客教育 Autolayout的警告和错误 n警告 p控件的frame不匹配所添加的约束, 比如 比如约束控件的宽度为100, 而控件现在的宽度是110 n错误 p缺乏必要的约束, 比如 只约束了宽度和高度, 没有约束具体的位置 p两个约束冲突, 比如 1个约束控件的宽度为100, 1个约束控件的宽度为110 高级软件人才实作培训专家! 北京传智播客教育 案例1：（控制器都使用600*600来做） n需求：设置一个宽150，高30的按钮始终显示在屏

16、幕的正中央（水 平居中对齐、垂直居中对齐） n思路：设置水平居中约束、垂直居中约束、高和宽的约束 高级软件人才实作培训专家! 北京传智播客教育 案例2: n设置一个 UIView 无论在任何屏幕下距离上下左右四个边的距离都是 50。思路：设置距离四周的 margin 为50. 高级软件人才实作培训专家! 北京传智播客教育 案例3： n距离左右20, 两个 View 之间间隔始终是20, 两个 View 的高度都 是50。宽度不定。（演示使用多种方式都可以实现） n注意：设置右边相对于某个控件的margin （间距）的时候, 如果当 前控件的右边没有那个控件，则无法选择。 高级软件人才实作培训专

17、家! 北京传智播客教育 案例4: n在控制器view顶部添加2个view，1个蓝色，1个红色 p2个view高度永远相等, 50 p红色view和蓝色view右边对齐 p蓝色view距离父控件左边、右边、上边间距相等，30 p蓝色view距离红色view间距固定，30 p红色view的左边和父控件的中点对齐(或者红色 View的宽度是蓝色 View 的 一半) 高级软件人才实作培训专家! 北京传智播客教育 高级软件人才实作培训专家! 北京传智播客教育 案例5： n完成“史上最牛的游戏”首页 p添加对应的6个button和背景图片，适配3.5 inch、4.0 inch 高级软件人才实作培训专家

18、! 北京传智播客教育 n注意：按钮、开关、文本框等控件不设置高、宽的约束也可以，因为 这些控件的高、宽都有默认值。 高级软件人才实作培训专家! 北京传智播客教育 案例6 n横竖屏效果如图所示 高级软件人才实作培训专家! 北京传智播客教育 添加约束的规则（1） n在创建约束之后，需要将其添加到作用的view上 n在添加时要注意目标view需要遵循以下规则： p1）对于两个同层级view之间的约束关系，添加到它们的父view上 高级软件人才实作培训专家! 北京传智播客教育 添加约束的规则（2） n2）对于两个不同层级view之间的约束关系，添加到他们最近的共同 父view上 高级软件人才实作培训专

19、家! 北京传智播客教育 添加约束的规则（3） n3）对于有层次关系的两个view之间的约束关系，添加到层次较高的 父view上 高级软件人才实作培训专家! 北京传智播客教育 n总结: 如果添加的约束和其它控件没有关系, 会添加到自己身上 n总结:如果是父子关系, 设置子控件的约束, 约束会添加到父控件上 n注意: 两个控件是兄弟关系 n总结: 如果是兄弟关系, 设置两兄弟的约束, 约束会添加到第一个共同的父 控件上 高级软件人才实作培训专家! 北京传智播客教育 代码实现Autolayout n代码实现Autolayout的步骤 p利用NSLayoutConstraint类创建具体的约束对象 p

20、添加约束对象到相应的view上 - (void)addConstraint:(NSLayoutConstraint *)constraint; - (void)addConstraints:(NSArray *)constraints; n代码实现Autolayout的注意点 p1 要先禁止autoresizing功能，设置view的下面属性为NO view.translatesAutoresizingMaskIntoConstraints = NO; p2 添加约束之前，一定要保证相关控件都已经在各自的父控件上 p3不用再给view设置frame 高级软件人才实作培训专家! 北京传智播客教育

21、 NSLayoutConstraint n一个NSLayoutConstraint对象就代表一个约束 n创建约束对象的常用方法 +(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c; pview1 ：要约束的控件 pattr1 ：约束的

22、类型（做怎样的约束） prelation ：与参照控件之间的关系 pview2 ：参照的控件 pattr2 ：约束的类型（做怎样的约束） pmultiplier ：乘数 pc ：常量 n自动布局有个核心公式 perty1 =（perty2 * multiplier）+ constant value 高级软件人才实作培训专家! 北京传智播客教育 案例4用代码实现 n/ 创建蓝色View n/ 创建红色 n/ 禁止 autoresizing n/ 创建约束 n/ 创建蓝色 View的约束 n/ 距离左边30 n/ 距离上边30 n/ 距离右边30 n/ 高度50 n

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

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

25、ar), 一般用 * 表示 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的横屏下安装这个开关。 n