介绍屏幕适配的发展过程
1. 直接使用
* iPhone3GS \ iPhone4 \ iPhone4S 屏幕的物理尺寸是一样的, 而且一个应用要么是横屏要么是竖屏, 不存在能同时进行横竖屏切换的应用
2. 使用
* 苹果发布 iPad 以后, 屏幕的物理大小发生了变化, 并且要求部分应用程序实现横竖屏切换
* 举例: 在竖屏下有一个按钮要占据整个屏幕宽度,
* autoresizing只能设置父控件与子控件之间的相对关系
3. 使用 autolayout(从 iOS6开始)
* 随着 iPhone5 \ iPhone5s 等的发布苹果设备的屏幕变得越来越多, 不仅要求能根据控件父子关系来设置相对位置,
* 因为 autoresizing只能设置当期控件与父控件之间的相对关系, 当遇到要设置兄弟控件之间的关系的时候 autoresizing就无能为力了
* 举例: 在竖屏下, 屏幕底部有两个按钮, 这两个按钮的间距为一个固定的值; 当切换为横屏的时候要求这两个按钮还显示在屏幕底部, 并且按钮间的间距不变, 按钮可以随之变宽。
注意点1:autolayou的约束可以拖拽和修改.
注意点2.autolayou实现动画不能直接在动画代码中修改constant,应该调用layoutifneed方法.
4. 使用 size classes(看时间作为补充, 今天的内容是"Autolayout")
* 当 iPhone6发布以后, 苹果设备的屏幕越来越多(以后也可能出现更多不同大小的屏幕), 为了能更容易的适配不同的屏幕, 苹果推出了size classes 技术
* 通过 autolayout设置的约束, 约束一旦添加就会应用于各种屏幕(也就是说在各种不同的屏幕下都使用相同的约束)
通过 size classes + autolayout的方式, 可以为不同尺寸的屏幕设置不同的约束
举例: qq登陆.
技术主要解决的问题: 为不同屏幕, 通过 autolayout设置不同的约束。
5. 屏幕适配的发展总结:
frame -> autoresizing(通过设置子控件与父控件的关系来决定如何显示控件) -> autolayout(通过设置某控件与任意其他控件间的关系来决定如何显示这个控件, 不仅仅局限与父子控件) -> size classes(通过 size classes + autolayout实现针对不同屏幕为控件设置不同的约束)
二、 介绍 autoresizing的使用(只是为了介绍, 以后不要用 autoresizing, 都用
和 autolayout只能用其一
1. 案例演示(说明 autoresizing外面的四根线作用):
1> 选择3.5 inch的控制器, 在四角放四个 UIView, 设置宽高都是100, 并设置不同背景颜色
2> 分别演示在iPhone4S \ iPhone5s \ iPhone6 不同模拟器下的效果(同时演示横屏下效果也不正常), 说明如果不做屏幕适配, 那么在不同的模拟器下效果不正常
3> 通过 autoresizing解决布局问题, 首先取消掉 autolayout。
特别提示: autoresizing 和 autolayout二者只能用其一。 若使用了 autoresizing则不能使用 autolayout, 若使用了 autolayout, 则不能使用 autoresizing。
4> 选中对应的子控件, 点击"工具箱"中的"Size Inspector(小尺子)"
5> 找到 autoresizing的属性框, 通过设置是否需要"外面的4根线"来实现屏幕适配
** 外面四根线的含义: 当前控件与父控件之间是否保持固定的距离。如果"选择"了外面的"线"则表示与父控件某一边的距离固定, 如果不勾选, 则表示当前控件与父控件的某一边距离是可拉伸的(不固定)。
*中间的线的作用表示如果我们设置了表示宽度和高度固定,注意这个和外面的线正好相反.
2. 案例演示(说明 autoresizing里面的两根线的作用)
1> 在界面上放置两个
蓝色 UIView, 200*200
红色 UIView(放在蓝色 UIView的里面), 100*100
2> 要求当蓝色 UIView的宽高发生改变的时候, 要求红色 UIView的宽高也随着改变
** 里面两根线的作用: 表示子控件的宽和高是否随着父控件的宽高的变化而变化
* 通过修改属性中蓝色 UIView的大小来演示红色 UIView 跟随变化的效果
3. 通过代码来实现
* 目的: 为了在工作中遇到旧的项目是通过代码实现的 autoresizing时可以应付自如。旧的项目还有没 storyboard。
3.1 案例:
(注意: 这里一定要用纯代码的方式创建每一个控件, 拖上来的控件默认设置了一些属性, 会造成运行效果不正确)
1> 通过代码创建一个蓝色 UIView, 200*200
2> 在这个蓝色 UIView里创建一个红色 UIView, 200*50, 这个红色 UIView放在在蓝色 UIView的最底部: x = 0, y = 150
3> 要求: 当蓝色 UIView发生变化时(宽和高改变时), 红色 UIView的宽随着蓝色 UIView的宽度变化(红色 UIView的高度始终保持不变), 并且永远紧贴在蓝色UIView底部显示。
4> 为按钮注册单击事件, 点击按钮的时候动态改变蓝色 UIView的高度和宽度, 观察里面红色 UIView的变化
5> 为红色 UIView设置宽度随着父控件变化而变化、顶部自由伸缩(也就是底部紧贴父控件的底部)就可以了。
redVw.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin;
三、 介绍 autolayout的使用
1. 演示案例(说明 autoresizing的局限性): 底部有两个 UIView, 永远保持这两个 UIView中间的间距.
1> 在4.7 inch的控制器下, 在底部放两个 UIView, 宽分别是185, 这样中间就能保持5的间距
2> 通过 autoresizing设置这两个 UIView分别位于左下角和右下角
3> 运行模拟器, 当横屏显示的时候, 两个 UIView的间距发生了变化
4> 要求: 当横屏的时候要始终保持两个按钮的间距, 可以通过放大或者缩小按钮的宽度来保持间距。
5> 此时, 无法通过 autoresizing来实现, 需要使用 autolayout。
2. 介绍 autolayout下面的菜单按钮的作用
说明 storyboard下面的按钮, 哪些是 autolayout用的, 哪些是 size classes用的
* 第一个按钮用来设置对齐方式的
* 第二个按钮用来固定控件的(固定控件的宽、高、距离父控件(兄弟控件等)的距离)
* 第三个按钮用来解决约束中遇到的一些问题的(删除约束、使用 xcode 建议的约束、使控件按照约束的方式显示等)
* 第四个按钮没用过
3. 案例1: 在控制器中放一个 UIView, 通过 frame设置 UIView距离四周的距离都是50.
* 此时的问题: 当屏幕变化的时候(屏幕大小发生变化, 或者横屏的时候), 没有做屏幕适配
* 解决方案一: 使用 autoresizing(外面四根线勾上, 里面两根线也勾上)
解决方案二: 使用
** 1> 通过设置红色 UIView距离四周(上下左右)的距离都50的约束来实现
** 2> 或者通过设置红色 UIView水平、垂直居中对齐来实现
** 注意问题: 只是设置完毕对齐方式还要设置高和宽否则提示约束不完整
** 设置水平、垂直居中的含义其实就是设置当前控件与父控件的中点一致(只设置了 x, y, 还要在设置高和宽)
总结无论是通过 autoresizing还是 autolayout最终其实还是通过设置控件的frame来实现的。所以一旦使用了 autolayout就不要再随便设置 frame 了, 可能造成混乱。
** 注意: 红色箭头表示: 缺少约束 或者 约束冲突
4. 通过 autolayout解决 autoresizing的局限性问题, 设置底部的两个 UIView之间始终保持相同间距。
始终关注4个值, x, y, height, width
四、 介绍 size classes 的使用
从 iOS8开始才支持
* size classes本质就是对所有的屏幕进行了分类, 我们可以为不同类型的屏幕设置不同的约束
* 仅仅是对屏幕进行了分类, 真正排布UI元素还得使用autolayout
* 不再有横竖屏的概念, 只有屏幕尺寸的概念
* 不再有具体尺寸的概念, 只有抽象尺寸的概念
* 把宽度和高度各分为3种情况
1> any(任意, 表示既可以是 compact, 也可以是 regular), 一般用 * 表示
2> compact(紧凑, 小), 一般用 - 表示
3> regular(正常, 大), 一般用 + 表示
//
注意:
//一般不要在 wAny 和 hAny下设置约束, 否则当在 wAny 和 hAny下设置约束后, 在其他尺寸的屏幕再设置约束会产生冲突。因为约束会被继承下来。
//
//约束的继承关系(*符号就表示+ 或者 -):
其它8种情况都会继承
会被- - \ + -继承
会被+ - \ + +继承
Any设置约束的时候要特别注意。
5> sizeclass和autolayout关系
sizeclass:仅仅是对屏幕进行了分类
autolayout:对屏幕中各种元素进行约束(位置\尺寸)
1: 在所有竖屏的 iPhone上左上角有一个开关, 在所有 iPad 上, 右下角显示开关
:
1> 先选中控件, 在右侧设置 Installed 属性, 告诉 xcode 在哪种屏幕下要显示这个控件
2> 选择底部菜单栏的size classes菜单项, 设置在特定的屏幕下如何显示(如何应用约束)
** 注意: 默认情况下 Installed表示 Any 和 Any, 也就意味着默认情况下在任何屏幕下都显示这个控件
2: 在所有横屏的 iPhone上右上角有一个开关。
3: 在所有屏幕下显示一张图片, 在iPad 下显示另外一张图片。
4: 设置某个图片, 默认(手机竖屏)显示一张图片(垂直、水平居中显示), 当切换到手机横屏的时候显示另外一张图片(显示到右下角)。
:
1> 添加一个 UIIamgeView, 并且设置 Installed属性, 在 所有 iPhone的竖屏下显示, 并设置约束;在所有手机的横屏下显示,
2> 拖拽第一张图片到 Imagees.xcassets中。
3> 设置图片框要显示的图片
4> 在 Imagees.xcassets中选中对应的图片, 设置图片的属性。
5: 设置一个 Label 在不同屏幕下显示不同的字体。点击字体左边的+号来修改。
蓝色view
距离左边30 + 距离右边30
50
距离左边30
距离顶部30
红色view
width:
设置红色view与蓝色view的高相等
X: 设置红色view与蓝色view右对齐 + 红色view水平居中, 这两个约束共同决定了红色view的x和宽度。
距离蓝色view的间距是30
红色Width -> X
蓝色Width + 0 ) * 1
蓝色Top X
self.top + 30) * 1