首页 > 代码库 > iOS 8 UI布局 AutoLayout及SizeClass(二)
iOS 8 UI布局 AutoLayout及SizeClass(二)
随着iOS8系统的公布,一个全新的页面UI布局概念出现,这个新特性将颠覆包含iOS7及之前版本号的UI布局方式,这个新特性就是Size Class。
Size Class配合Auto Layout能够解决全部(包含iPhone及iPad)iOS设备屏幕尺寸及屏幕旋转时候的UI适配问题 。
二、为什么要使用Size Class
直到iPhone6公布后。眼下iOS设备的屏幕尺寸已经有4种了,如图:
iPhone6没出现之前,还能够通过代码来适配两种尺寸的UI,但iPhone6公布后。渐渐的发现曾经的方式可能真的要淘汰了,由于以后可能还要面对很多其它的屏幕尺寸。显然硬编码UI的Frame的时代要过去了。要使用Auto Layout了。
自从iOS6開始就引入了Auto Layout。但一直没用推广使用,原因有非常多(比如:Auto Layout本身不是非常成熟、硬编码能够解决iPhone仅有两种屏幕尺寸的UI适配、iPhone项目和iPad项目分开来进行等)。
Size Class是配合Auto Layout来使用的。让Auto Layout方式变得不那么复杂。
三、该怎样使用Size Class
要使用Size Class。首先要安装最新的Xcode6,新建一个Single View Application template项目,选择Main.storyboard-> View,查看Inspector属性:
默认Size Classes就已经使用了,当然假设不想使用它也能够关掉,然后使用旧的布局方式。但假设选择使用Size Class。然后关掉Auto Layout。Xcode会弹出一个警告框:(稍后就会明确为什么!)
选择cancel,由于接下来要使用Size Classes。
Size Classes事实上就是将iOS设备屏幕的Size进行分类。怎样分类的呢?
对于iOS设备(不管iPhone还是iPad)。宽度和高度都各分为3种情况:紧凑(Compact)、规则(Regular)、不论什么(Any)
当中“不论什么”(Any)包括紧凑(Compact)、规则(Regular)类型。假设屏幕宽度用w表示。高度用h表示,那么w(Regular)/h(Regular)组合就是iPad屏幕尺寸(size)的类别(class),不管iPad横屏还是竖屏,屏幕尺寸类别都是w(Regular)/h(Regular)。上图能够非常清楚的表达。
官网也列举了一些:
到这里应该明确了。Size Classes是将屏幕尺寸的种类做了进一步的抽象。
那有一个问题,分类的有什么用?该怎么用啊?
曾经为不同的iOS设备尺寸或者同尺寸横竖屏不同适配UI,都要依据实际情况而去计算frame。
使用Size Classes是依据当前的屏幕size类型而使用Auto Layout方式进行布局了,要摒弃之前计算frame的思路。而改用相对布局的思维去思考(实际上还是要计算frame)。
并且Xcode6最大的突破也是这里,不在须要建立不同尺寸的storyboard了。仅仅要建立一个。然后改动其view的size就能够做各种屏幕尺寸的适配。例如以下:
比如我要做iPad页面设计,就设置成w (Regular)/h(Regular)
然后相同的project,又要兼容横屏的iPhone6 plus。就能够把view的size class设置成:w (Regular)/h(Compact),然后继续适配
然后当程序跑在不同的设备上。或者设备横屏和竖屏切换。就能显示对应的UI了。
说了这么多。还是动手实验一下吧:
适配iPhone6,在RootViewController的view上加入一个新的view。让这个新的view不管屏幕横屏还是竖屏时候都距离其superview的边缘50点宽,而且横屏时候为绿颜色,竖屏时候为红颜色。
1、新建项目(刚刚已经新建了一个AL8的项目,不反复步骤了)
2、切换size class为wCompact/hRegular模式
而且加入一个view,不用管其frame。并设置其背景色为红色
接下来选中红色的view。然后点击Xcode顶部工具栏的Editor-Pin,然后分别加入红色view相对superview边框的约束(上下左右)
加入约束的过程中会看到约束的线是黄颜色。表明当前的约束还不能确定view的frame。须要继续加入,当加入完4个约束后。约束线的颜色是蓝色的。表明当前约束是正确的。
然后选中约束,设定约束的值(我们不是想让新的view距离其superview边界50点宽吗。),4个约束都要设置。
设置完后点击下view会自己主动更新frame,应该是这种:
3、切换size class为wRegular/hCompact模式,然后反复第二步中的设置,差别是新加入的view背景颜色设置为绿色。
4、大功告成,用模拟器执行下吧,模拟器要选择iPhone6 plus哦!然后旋转屏幕看看是不是我们想要的效果!
思考:把模拟器切换为iPhone6、iPhone5、iPhone4s、iPad会有什么现象!下一篇会解释!
Demo下载
iOS 8 UI布局 AutoLayout及SizeClass(二)