iOS 8 UI布局 AutoLayout及SizeClass(二)

一、新特性Size Class介绍

随着iOS8系统的公布,一个全新的页面UI布局概念出现,这个新特性将颠覆包含iOS7及之前版本号的UI布局方式,这个新特性就是Size Class。

Size Class配合Auto Layout能够解决全部(包含iPhone及iPad)iOS设备屏幕尺寸及屏幕旋转时候的UI适配问题 。

二、为什么要使用Size Class

直到iPhone6公布后。眼下iOS设备的屏幕尺寸已经有4种了,如图:

iOS 8 UI布局 AutoLayout及SizeClass(二)

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属性:

iOS 8 UI布局 AutoLayout及SizeClass(二)

默认Size Classes就已经使用了,当然假设不想使用它也能够关掉,然后使用旧的布局方式。但假设选择使用Size Class。然后关掉Auto Layout。Xcode会弹出一个警告框:(稍后就会明确为什么!)

iOS 8 UI布局 AutoLayout及SizeClass(二)

选择cancel,由于接下来要使用Size Classes。

Size Classes事实上就是将iOS设备屏幕的Size进行分类。怎样分类的呢?

对于iOS设备(不管iPhone还是iPad)。宽度和高度都各分为3种情况:紧凑(Compact)、规则(Regular)、不论什么(Any)

iOS 8 UI布局 AutoLayout及SizeClass(二)

当中“不论什么”(Any)包括紧凑(Compact)、规则(Regular)类型。假设屏幕宽度用w表示。高度用h表示,那么w(Regular)/h(Regular)组合就是iPad屏幕尺寸(size)的类别(class),不管iPad横屏还是竖屏,屏幕尺寸类别都是w(Regular)/h(Regular)。上图能够非常清楚的表达。

官网也列举了一些:

iOS 8 UI布局 AutoLayout及SizeClass(二) 
 iOS 8 UI布局 AutoLayout及SizeClass(二)

iOS 8 UI布局 AutoLayout及SizeClass(二) iOS 8 UI布局 AutoLayout及SizeClass(二)iOS 8 UI布局 AutoLayout及SizeClass(二)

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl6aG9uZ2Z1MjAxMw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="300" height="150" alt="" style="border:none; max-width:100%">

到这里应该明确了。Size Classes是将屏幕尺寸的种类做了进一步的抽象。

那有一个问题,分类的有什么用?该怎么用啊?

曾经为不同的iOS设备尺寸或者同尺寸横竖屏不同适配UI,都要依据实际情况而去计算frame。

使用Size Classes是依据当前的屏幕size类型而使用Auto Layout方式进行布局了,要摒弃之前计算frame的思路。而改用相对布局的思维去思考(实际上还是要计算frame)。

并且Xcode6最大的突破也是这里,不在须要建立不同尺寸的storyboard了。仅仅要建立一个。然后改动其view的size就能够做各种屏幕尺寸的适配。例如以下:

比如我要做iPad页面设计,就设置成w (Regular)/h(Regular)

iOS 8 UI布局 AutoLayout及SizeClass(二)

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl6aG9uZ2Z1MjAxMw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="300" height="270" alt="" style="border:none; max-width:100%">

然后相同的project,又要兼容横屏的iPhone6 plus。就能够把view的size class设置成:w (Regular)/h(Compact),然后继续适配

iOS 8 UI布局 AutoLayout及SizeClass(二)

然后当程序跑在不同的设备上。或者设备横屏和竖屏切换。就能显示对应的UI了。

说了这么多。还是动手实验一下吧:

适配iPhone6,在RootViewController的view上加入一个新的view。让这个新的view不管屏幕横屏还是竖屏时候都距离其superview的边缘50点宽,而且横屏时候为绿颜色,竖屏时候为红颜色。

1、新建项目(刚刚已经新建了一个AL8的项目,不反复步骤了)

2、切换size class为wCompact/hRegular模式

iOS 8 UI布局 AutoLayout及SizeClass(二)

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl6aG9uZ2Z1MjAxMw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="200" height="210" alt="" style="border:none; max-width:100%">

而且加入一个view,不用管其frame。并设置其背景色为红色

iOS 8 UI布局 AutoLayout及SizeClass(二)

接下来选中红色的view。然后点击Xcode顶部工具栏的Editor-Pin,然后分别加入红色view相对superview边框的约束(上下左右)

iOS 8 UI布局 AutoLayout及SizeClass(二)

加入约束的过程中会看到约束的线是黄颜色。表明当前的约束还不能确定view的frame。须要继续加入,当加入完4个约束后。约束线的颜色是蓝色的。表明当前约束是正确的。

iOS 8 UI布局 AutoLayout及SizeClass(二)

然后选中约束,设定约束的值(我们不是想让新的view距离其superview边界50点宽吗。),4个约束都要设置。

iOS 8 UI布局 AutoLayout及SizeClass(二)

设置完后点击下view会自己主动更新frame,应该是这种:

iOS 8 UI布局 AutoLayout及SizeClass(二)

3、切换size class为wRegular/hCompact模式,然后反复第二步中的设置,差别是新加入的view背景颜色设置为绿色。

iOS 8 UI布局 AutoLayout及SizeClass(二)

4、大功告成,用模拟器执行下吧,模拟器要选择iPhone6 plus哦!然后旋转屏幕看看是不是我们想要的效果!

思考:把模拟器切换为iPhone6、iPhone5、iPhone4s、iPad会有什么现象!下一篇会解释!

Demo下载

上一篇:java如何在函数中调用主函数的数组


下一篇:iOS开发~UI布局(一)初探Size Class