一、新特性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)

然后相同的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下载

转载于:https://www.cnblogs.com/jhcelue/p/7102327.html

iOS 8 UI布局 AutoLayout及SizeClass(二)相关推荐

  1. iOS开发UI篇—Quartz2D简单使用(二)

    iOS开发UI篇-Quartz2D简单使用(二) 一.画文字 代码: // // YYtextview.m // 04-写文字 // // Created by 孔医己 on 14-6-10. // ...

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

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

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

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

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

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

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

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

  6. iOS 8 AutoLayout 及SizeClass(三) 使用详解 好多值得学习及研究的地方

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

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

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

  8. 二、更换Abp Vnext默认的UI 布局

    上一节我们搭建了简单的项目环境,但是默认的UI看起来比较low,也不大满足我们的使用习惯,我们有必要替换默认的UI主题. 这里我们只讨论angular前端的实现,并且使用的UI框架是基于bootstr ...

  9. iOS开发UI基础—手写控件,frame,center和bounds属性

    iOS开发UI基础-手写控件,frame,center和bounds属性 一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4 ...

最新文章

  1. pycharm执行python程序报错ImportError: DLL load failed: torchvision找不到指定的程序
  2. 关于AIX lv 4k offset问题初步了解
  3. 解读Cardinality Estimation算法(第四部分:HyperLogLog Counting)
  4. .NET Core Tools转向使用MSBuild项目格式
  5. SpringCloud Alibaba 框架下公司架构图
  6. Leetcode 456. 132 Pattern
  7. 问题与事务跟踪系统jira中的版本管理
  8. 从操作系统内核看设计模式--linux内核的facade模式
  9. mysql练习----SUM and COUNT/zh图(二)
  10. .net中对象序列化技术
  11. Delphi2010Excel导入数据库
  12. 人脸生成黑科技:实现人脸转变特效,让人脸自动戴墨镜
  13. 嵌入式研发人员的核心竞争力浅谈
  14. 教你去掉 U盘写保护
  15. Docker基础、利用Docker Compose部署Vue项目
  16. android wear手表6,Android Wear(手表)开发
  17. 最简单web工程接收消息图片--微信企业号
  18. 斐波那契数列、小青蛙跳台阶
  19. mysql联合主键,也就是两个数据字段一起做主键的情况
  20. 财务应付结算系统设计-账单

热门文章

  1. textaligncenter仍然不居中_5个word你不知道的功能
  2. Linux内存带宽的一些测试笔记
  3. 【clickhouse】yandex 官方 BalancedClickhouseDataSource 源码分析
  4. 95-910-330-源码-FlinkSQL-Calcite-Flink结合Calcite
  5. 95-25-010-命令-topic 创建过程
  6. 95-10-132-启动-TransactionCoordinator-源码
  7. 【java】java 关键字: final详解
  8. 【Kafka】kafka无法查看消费组消费信息,其他相关组件正常
  9. Greenplum元数据信息
  10. 【Flink】Flink 启动报错 DirectoryNotEmptyException Could not close resource