[转]iOS8中的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背景颜色设置为绿色。

时间: 2024-10-10 14:09:21

[转]iOS8中的size class的相关文章

初探 iOS8 中的 Size Class

以前和安卓的同学聊天的时候,谈到适配一直是一个非常开心的话题,看到他们被各种屏幕适配折磨的欲仙欲死,心里真替他们高兴.不过在做到 iPhone 和 iPad 的适配的时候,一个页面需要配置多个 xib 进行开发还是个很头疼的事情.再加上 iPhone6 和 iPhone6 plus 的发布,适配似乎也变得麻烦起来.今天了解了 iOS8 中的 Size Class 之后,真的笑,笑出声. 简介 先来看一下我们的新伙伴:Size Classes.在 iOS8 中,我们不用再像以前那样,一个页面新建多

[iOS] 初探 iOS8 中的 Size Class

转自:http://www.itnose.net/detail/6112176.html ? ? ? 以前和安卓的同学聊天的时候,谈到适配一直是一个非常开心的话题,看到他们被各种屏幕适配折磨的欲仙欲死,心里真替他们高兴.不过在做到 iPhone 和 iPad 的适配的时候,一个页面需要配置多个 xib 进行开发还是个很头疼的事情.再加上 iPhone6 和 iPhone6 plus 的发布,适配似乎也变得麻烦起来.今天了解了 iOS8 中的 Size Class 之后,真的笑,笑出声. 简介 先

ios8中的UIScreen

Java代码   let orientation: UIInterfaceOrientation = UIApplication.sharedApplication().statusBarOrientation println("Currently landscape: " + ((orientation == UIInterfaceOrientation.LandscapeLeft||orientation == UIInterfaceOrientation.LandscapeRig

掌握iOS8中的动态文本

原文链接 : Swift Programming 101: Mastering Dynamic Type in iOS 8 原文作者 : Kevin McNeish 译文出自 : 开发技术前线 www.devtf.cn 转载声明: 本译文已授权开发者头条享有独家转载权,未经允许,不得转载! 译者 : kmyhy Apple声称鼓励第三方App能够支持动态文本.但是,如果你尝试在App中实现这个特性,你会发现其中有很多坑(例如静态cell和定制cell样式).在本文中,我们将介绍动态文本的机理以及

iOS8中的定位服务

My app that worked fine in iOS 7 doesn't work with the iOS 8 SDK. CLLocationManager doesn't return a location, and I don't see my app under Settings > Location Services either. I did a Google search on the issue but nothing came up, what could be wro

iOS8中使用CoreLocation定位

在iOS8中,苹果已经强制开发者在请求定位服务时获得用户的授权,此外iOS状态栏中还有指示图标,提示用户当前应用是否正在使用定位服务.另外在iOS8中,苹果进一步改善了定位服务,让开发者请求定位服务时需要向用户提供更多的透明.此外,iOS8中还支持让应用开发者调用全新的"访问监控"功能,当用户允许后应用才能获得更多的定位数据. iOS8以前使用CoreLocation定位 1.首先定义一个全局的变量用来记录CLLocationManager对象,引入CoreLocation.frame

iOS8中添加的extensions总结(一)——今日扩展

通知栏中的今日扩展 分享扩展 Action扩展 图片编辑扩展 文件管理扩展 第三方键盘扩展 注:此教程来源于http://www.raywenderlich.com的<iOS8 by Tutorials> 关于App extensions 的原理,即How extensions work 首先App扩展是一个App功能性上的扩展,它并不独立与你原来的App,也就是说在给App Store提交的时候是打包到原有App中一起提交,它们并不是独立的App.其次,App的每一种扩展都有自己单独的API

iOS8中UITableVIew分割线短的问题

在iOS8中会发现分割线默认是没有全部显示的,在iOS7中适用的代码 if ([self.myCardTableView respondsToSelector:@selector(separatorInset)]) { self.myCardTableView.separatorInset = UIEdgeInsetsZero; } 已经不管用了.而要在viewDidLoad中加入已下代码 if ([self.myCardTableView respondsToSelector:@selecto

iOS8中 UITableView section 分区头部视图不显示

最近自己使用了UITableView写了一个通讯录,但是在编写过程还算顺利,但是后来测试的时候,发现在iOS8中TableView的分区头不能正常显示,使用 - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section 方法可以正常的设置分区的Title,但是如果你使用了 - (UIView *)tableView:(UITableView *)tableView viewF