[IOS]译Size Classes with Xcode 6: One Storyboard for all Sizes
Size Classes with Xcode 6: One Storyboard for all Sizes
为所有的尺寸准备一个Storyboard
我最喜欢的Xcode6的特性是新的size classes 概念,有了它,我们解决了“我如何能够快速的为那么多的不同尺寸屏幕以及方向的设备写app”。他们也让在一个storyboard中创建一个通用的app。通过与新的适应屏幕的controller联合,它能够更简单的依靠interface builder,而不是与之对抗,从而简化了你应用的布局。
应用中的每一个view controller 都有一个特别的collection对象,这个特别的collection对象都有两个size classes,一个垂直size class 一个水平的size class。并且每一个class都有3个可能的值:compact,regular,或者any。这些值都能基于设备和方向进行改变。你的app将会基于当前的size classes为每一个view controller 布局好它的界面。苹果使用一个网格来让用户选择哪个设置来工作,所以这里有一个网格包含了设备与方向,
如图高亮的是所对应的size class 组合
一个有趣的事情:ipad 是 regular x regular 。
“
Straight from Apple's 'What's new in iOS8 guide' :
“With the amount of screen space available, the iPad has a regular size class in the vertical and horizontal directions in both portrait and landscape orientations.”
— Dr. Dre*”这里是来自原文的一段话
好了,书本材料就到这里,接下来打开Xcode6 让我们试一下。根据苹果的NDA以及Xcode6的截图,而下面的这些截图都来自于Xcode5,所以我这些图片仅仅是一些引导。
创建一个新的通用项目。如果你想要早在一个已经创建了的Xcode6项目,你需要激活size classes选项。你可以在Interface Builder中的属性面板 勾选autolayout 的选项的下面找到它。
首先,让我们在Xcode中看一下size class的网格。这是一个你可以在不同的布局排列间切换的区域。当你查看storyboard的时候,看到视图的底部,并且点击‘wAny hAny’字样的标签。你将会看到一些类似网格的画面。
(原文中都没有这个网格的截图我正在这里截图一个吧 译者)
默认的,我们以一个基础的设置开始,也就是any width和any height。很多事情都将在这里安置和改变,包括了iphone和ipad的所有方向的默认布局。苹果建议把大多数的设置都在这个界面中进行设置。这个是因为减少工作量而显得特别的简单。让我们布局一个超级宽的按钮在画面的中间。给它一个绿色的背景,从而让我们看到它真实的尺寸,给它一个约束来让他居中
并且给它一个夸张的固定宽度600。
好了,现在在ipad和iphone的模拟器都运行一下,你将会看到都是居中,但对于iphone的两个方向都太宽了,(这里你设置了页面中button的宽度 但并没有马上更新是因为 你在做添加约束的时候没有更新图形,导致了如下图的情况,storyboard里面没有更新,而在模拟器运行时候更新了,左边大纲栏目里面也有警告说明,可以直接点击警告里面的黄色三角来更新画面其实就是 Updata Frame)
让我们使用size classes来修正吧。回到刚才那个第一张图的网格选择iphone的纵向portrait设置,就是compact width+ regular height。网格中的红色矩形。
你将会注意到你在网格中选中之后底部的bar改变为蓝色。那是在警告你:“Hey ,你并不是在一个基础的设置,有些改变将会只在你运行的时候显示。所以这个bar现在是蓝色的!” 我所说的一些改变是因为有四项你能改变的size classes:1约束常数,2字体,3约束的开/关,4子视图的开/关
前两个是不言而喻的,但是让我来告诉你如何让后两者工作。在当前的size class (compact width 和 regular height)状况下让我们试着把一个约束关闭。在文档的提纲栏里,点击设置在我们的button的Centre X 校准约束:
现在看一下我们的属性检查栏,在底部我们可以看到带标记的一个单词“Installed”,并且左侧有额外的加号按钮。点击额外的加号并且点选'Compact Width| Regular Height'(当前的就是)。
现在你将会看到2个标记物,把刚刚添加的哪一个取消勾选(wC hR)
现在我们的约束不再安置并且做任何事情来配置size classes。就像你看到的,Xcode正在控诉我们的约束太混乱了(左边的大纲会有错误提示表示你缺少了约束-译者),如果你这时候运行app在iphone的模拟器上的话,按钮不在X方向居中了。但是在ipad的上面还是居中的,因为约束仍然安置在基本的设置里面。这个约束将会一直配置着除非我们把它取消勾选。你甚至能够旋转你的iphone模拟器,并且发现button将会神奇的回到居中,因为iphone的横向是不同的size class配置,好了,让我们把勾选回来,让button回到居中。
现在让我们改变我们设置在button宽度的约束,选择button,并且来到Size的属性检查栏,下拉到底部,我们可以看到所有的约束。点击Width原本是600的 使用Edit设置为100:
在iphone的模拟器上运行,你将会看到button已经具备了正确的宽度。运行在ipad的模拟器的时候却展示了600的宽度,因为我们没有改变基本设置里面的宽度。但是,在iphone的横向landscape仍然看着不怎么样,因为iphone的横向设置来自基本的Any Any 的设置。让我们修正一下。在网格里面我们选择compact Width和Compact Height。也就是第一张图的蓝色网格。
现在我们在这个设置下改变width 的约束,就像我们为了compact x regular改变的一样。给予一个400的宽度。运行一下iphone的模拟器,并且旋转到横向,按钮有了400的宽度,看上去很棒。达到了我们的预想。有一点很好就是你能看到一个所有的约束的列表,这些都是不同的设置的。仅仅选择你想要在文档大纲里面看到的约束,然后来到属性检查栏,他们整齐的排列在初始的常数下面。它标注了每一个基于它所应用的设置。
即使我们决定我们想要只在iphone横向landscape模式下button消失,使用size classes 我们只要反向安置views就像我们反向安置一个约束。选择我们的UIbutton,滚动到属性检查器的底部。通过点击 加号按钮 给我们当前的设置添加一个新的安置选项,然后取消勾选它。
就像你看到的,那个view 立马消失了,因为我们在设置里面反向安置了它,我们立马就能看到。运行app,你能看到它在纵向的portrait iphone上消失了,但是当你旋转到横向的landscape的时候又回来了。当然它也一直安置在ipad上面因为ipad仍然使用的是基本的设置。
最后一个事情就是我们想要显示如何来在代码中提示这些设置的改变。size classes 一般都会被UIInterfaceOrientation 或者UIUserInterfaceIdiom 替代。因此对于理解如何在代码中工作很重要。你需要做的第一个事情设置你的view controller 来符合UITraitEnvironment协议:
class ViewController: UIViewController, UITraitEnvironment { override func viewDidLoad(){
//code
}
}
这个协议需要一个 required 方法来 告知你的view controller trait collection 发生了改变:
override func traitCollectionDidChange(previousTraitCollection: UITraitCollection!) {
if previousTraitCollection? {
//print out the previousTrait's info
println(previousTraitCollection)
}
}
一个UITraitCollection 提供了一个细节包括了 view controller的属性:
<UITraitCollection: 0xb4072a0;
_UITraitNameUserInterfaceIdiom = ,
_UITraitNameDisplayScale = 2.000000,
_UITraitNameTouchLevel = ,
_UITraitNameInteractionModel = ,
_UITraitNameHorizontalSizeClass = ,
_UITraitNameVerticalSizeClass = >
上述两个描述都是刚才我们改变的 横向或者纵向的size class ,这里是枚举:
enum UIUserInterfaceSizeClass : Int {
case Unspecified
case Compact
case Regular
}
希望这篇文章能够帮助你基本的理解sizeclasses 以及他们如何更加的简化你在interface builder的工作。像往常一样,我把练习的放在GitHub上,让我们知道如果你有问题的话在下面留言。
*probably not Dr. Dre
原文地址 http://www.learnswift.io/blog/2014/6/12/size-classes-with-xcode-6-and-swift
翻译的不怎么样,补充了几张图。如有错误请斧正
[IOS]译Size Classes with Xcode 6: One Storyboard for all Sizes的更多相关文章
- Size Classes with Xcode 6
转载自 http://www.cocoachina.com/ios/20141015/9919.html 总结:通过在Size Classes不同的模式下设置,可以实现不同设备在横屏.竖屏下UIVie ...
- Size Classes with Xcode 6:为所有的尺寸准备一个Storyboard
我最喜欢的Xcode6的特性是新的size classes 概念,有了它,我们解决了“我如何能够快速的为那么多不同尺寸屏幕以及方向的设备写app”.他们也让在一个storyboard中创建一个通用的a ...
- ios 利用size classes 使 iPad 水平和垂直方向布局不同
我们知道ipad全屏幕显示时,无论水平放置还是竖直放置,width 和 height 都是 regular,不像iphone能够区别,那么就不能使用size class 布局不同的水平和垂直界面了吗? ...
- iOS:Size Classes的使用
iOS 8在应用界面的可视化设计上添加了一个新的特性-Size Classes,对于任何设备来说,界面的宽度和高度都只分为两种描述:正常和紧凑.这样开发者便可以无视设备具体的尺寸,而是对这两类和它们的 ...
- Xcode 6 AutoLayout Size Classes
1.基本概念 在iPad和iPhone 5出现之前,iOS设备就唯独一种尺寸. 我们在做屏幕适配时须要考虑的唯独设备方向而已. 而非常多应用并不支持转向,这种话就全然没有屏幕适配的工作了. 随着iPa ...
- iOS Autoresizing Autolayout Size classes
Autoresizing:出现最早,仅仅能够针对父控件做约束(注意:要关闭Autolayout&Size classes才能够看到Autoresizing) 代码对应: UIView.h中的a ...
- 关于IOS的屏幕适配(iPhone)——Auto Layout和Size Classes
Auto Layout和Size Classes搭配使用极大的方便了开发者,具体如何使用Auto Layout和Size Classes大家可以参考其他文章或者书籍,这里只提一点,在我们设置Size ...
- iOS8 Size Classes的理解与使用
在iOS8中,新增了Size Classes特性,它是对当前所有iOS设备尺寸的一个抽象,也是该抽象了,想想现在多少种iOS尺寸的设备吧:iPhone4-5-6-6plus.iPad.iPad min ...
- Asset Catalog Help (七)---Customizing Image Sets for Size Classes
Customizing Image Sets for Size Classes Add images to a set that are customized for display in diffe ...
随机推荐
- CF451E Devu and Flowers (隔板法 容斥原理 Lucas定理 求逆元)
Codeforces Round #258 (Div. 2) Devu and Flowers E. Devu and Flowers time limit per test 4 seconds me ...
- Express知识整理
开发实例 Express开发实例(1) —— Hello,world! Express开发实例(2) —— Jade模板引擎
- [Data Structure & Algorithm] 八大排序算法
排序有内部排序和外部排序之分,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存.我们这里说的八大排序算法均为内部排序. 下图为排序 ...
- Websites for more Android development information
There is a vibrant, helpful Android developer community on the Web. Here are a numberof useful websi ...
- JavaScript事件处理程序
JavaScript中的事件处理程序主要分为3种: HTML事件处理程序: <script type="text/javascript"> // HTML事件处理程序 ...
- 值得推荐的android开源框架
1.volley 项目地址https://github.com/smanikandan14/Volley-demo (1) JSON,图像等的异步下载: (2) 网络请求的排序(scheduling) ...
- word20161206
D-channel / D 信道 DACL, discretionary access control list / 自由访问控制列表 daily backup / 每日备份 Data Communi ...
- 利用Mongoose来结构化模式与验证
Mongoose是一个文档对象模型(ODM)库,为MongoDB Node.js原生驱动程序提供更多的功能. 把结构化的模式应用到一个MongoDB集合,提供了验证和类型转换的好处 Mongoose通 ...
- 关于用bootstrap显示查询的后台数据
PrintWriter pw = response.getWriter(); pw.println(sb); pw.flush(); 由于用bootstrap查询数据,页面需要自身返回bootstra ...
- CSS3 外发光 渐变色
渐变色--线性渐变 linear-gradient #bg { width: 100%; background: -webkit-linear-gradient(#9f1c65, #d89068,#7 ...