一、新特性Size Class介绍

随着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)

然后同样的工程,又要兼容横屏的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下载

iOS8开发~UI布局(一)初探Size Class相关推荐

  1. iOS8开发~UI布局(二)storyboard中autolayout和size class的使用详解

    一.概要:前一篇初步的描述了size class的概念,那么实际中如何使用呢,下面两个问题是我们一定会遇到的: 1.Xcode6中增加了size class,在storyboard中如何使用? 2.a ...

  2. iOS8开发~UI布局(三)深入理解autolayout

    一.概要 通过对iOS8界面布局的学习和总结,发现autolayout才是主角,autolayout是iOS6引入的新特性,当时还粗浅的学习了下,可是没有真正应用到项目中.随着iOS设备尺寸逐渐碎片化 ...

  3. iOS开发~UI布局(二)storyboard中autolayout和size class的使用详解

    一.概要:前一篇初步的描述了size class的概念,那么实际中如何使用呢,下面两个问题是我们一定会遇到的: 1.Xcode6中增加了size class,在storyboard中如何使用? 2.a ...

  4. iOS开发~UI布局(三)深入理解autolayout

    一.概要 通过对iOS8界面布局的学习和总结,发现autolayout才是主角,autolayout是iOS6引入的新特性,当时还粗浅的学习了下,可是没有真正应用到项目中.随着iOS设备尺寸逐渐碎片化 ...

  5. Shiny平台构建与R包开发(一)——ui布局

    本节为Shiny平台构建与R包开发教程的第一小节. Getting Started 初识Shiny时,了解其工作机理非常重要.下面的案例展示了一个最简单的Shiny APP的工作机理: #DO NOT ...

  6. iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

    iOS开发UI篇-使用xib自定义UItableviewcell实现一个简单的团购应用界面布局 iOS开发UI篇-使用xib自定义UItableviewcell实现一个简单的团购应用界面布局 一.项目 ...

  7. Android 开发 -- 开发第一个安卓程序、Android UI开发(布局的创建:相对布局和线性布局、控件单位:px pt dp sp、常用控件 、常见对话框、ListView)

    文章目录 1. 开发第一个Hello World程序 1.1 开发程序 1.2 认识程序中的文件 1.3 Android程序结构 1.4 安卓程序打包 2. Android UI开发 2.1 布局的创 ...

  8. Android应用开发(1)---Android五大UI布局的特有属性

    Android五大UI布局的特有属性 Android五大UI布局 1. LinearLayout 线性布局 2. RelativeLayout 相对布局 3. FrameLayout 帧布局,空白布局 ...

  9. 示例:应用WPF开发的仿制GitHub客户端UI布局

    一.目的: 应用WPF做的仿制GitHub客户端UI布局页面,仅供参考 二.环境: .Net Framework 4.5 三.示例: 原图: 实现效果图: 未完待续... 四.下载地址 https:/ ...

最新文章

  1. Java基础(七)--Exception异常处理
  2. python读取csv文件的方法-python读写csv文件的方法
  3. SQL Server 文件路径
  4. python 文件处理1:将某一目录下的文件合并
  5. 五、数据对象和属性类型
  6. dojo中的dojo/on
  7. 西门子安装未找到ssf文件_V5.3安装时显示NO SSF FILE FOUND对话框,我该怎么解决啊? 谢谢!-工业支持中心-西门子中国...
  8. jquery Datatables 行数据删除、行上升、行下降功能演示
  9. leetcode题目整理
  10. SQLite数据库可视化工具【SQLiteStudio】的下载及安装
  11. linux下redis常用命令
  12. 输出200以内的素数
  13. CT重建-X射线断层成像仿真实验
  14. 计算机的时钟设置错误,谷歌浏览器用不了显示电脑时钟错误解决方法
  15. c语言如何关闭窗口,如何用C脚本关闭当前窗口?
  16. 三星手机动态修改分辨率信息
  17. OpenCV中关于各种颜色的定义以及RGB值
  18. 微信备份到云服务器失败怎么回事,icloud云备份失败怎么办 icloud云备份失败原因及解决方法...
  19. 选择云服务器主要看那方面的参数和性能
  20. 游戏开发校招面试全记录(大四篇)

热门文章

  1. 深度学习和目标检测系列教程 22-300:关于人体姿态常见的估计方法
  2. 三十五、深入Vue.js语法(下篇)
  3. pyqt5动态显示当前时间
  4. 十八、不会fiddler抓包,谈何爬虫
  5. 突破模糊定性分析,批归一化和权重衰减的球面优化机制
  6. 清华大学王晨阳:轻量级Top-K推荐框架及相关论文介绍
  7. 机器学习模型,能分清川菜和湘菜吗?
  8. AI学习与进阶实践-基于行业价值的AI学习与进阶路径
  9. 【学习笔记】吴恩达机器学习 WEEK1
  10. 浏览器快捷键_干货 | 掌握这些快捷键,工作效率翻倍