[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的两个方向都太宽了,让我们使用size classes来修正吧。回到刚才那个第一张图的网格选择iphone的画面设置,就是compact width+ regular height。网格中的红色矩形。

你将会注意到你在网格中选中之后底部的bar改变为蓝色。那是在警告你:“Hey ,你并不是在一个基础的设置,有些改变将会值在你运行的时候显示。所以这个bar现在是蓝色的!” 我所说的一些改变是因为有四项你能改变的size classes:1约束常数,2字体,3约束的开/关,4子视图的开/关

前两个是完全的自我——先到这里下次更新

时间: 2024-12-31 13:12:49

[IOS]译Size Classes with Xcode 6: One Storyboard for all Sizes的相关文章

Size Classes with Xcode 6<转>

1.基本概念 在iPad和iPhone 5出现之前,iOS设备就只有一种尺寸.我们在做屏幕适配时需要考虑的仅仅有设备方向而已.而很多应用并不支持转向,这样的话就完全没有屏幕适配的工作了.随着iPad和iPhone 5,以及接下来的iPhone 6的推出,屏幕尺寸也变成了需要考虑的对象.在iOS7之前,为一个应用,特别是universal的应用制作UI时,我们总会首先想我们的目标设备的长宽各是多少,方向变换以后布局又应该怎么改变,然后进行布局.iOS6引入了AutoLayout来帮助开发者使用约束

Size Classes with Xcode 6

1.基本概念 在iPad和iPhone 5出现之前,iOS设备就只有一种尺寸.我们在做屏幕适配时需要考虑的仅仅有设备方向而已.而很多应用并不支持转向,这样的话就完全没有屏幕适配的工作了.随着iPad和iPhone 5,以及接下来的iPhone 6的推出,屏幕尺寸也变成了需要考虑的对象.在iOS7之前,为一个应用,特别是universal的应用制作UI时,我们总会首先想我们的目标设备的长宽各是多少,方向变换以后布局又应该怎么改变,然后进行布局.iOS6引入了AutoLayout来帮助开发者使用约束

Size Classes with Xcode 6:为所有的尺寸准备一个Storyboard

我最喜欢的Xcode6的特性是新的size classes 概念,有了它,我们解决了“我如何能够快速的为那么多不同尺寸屏幕以及方向的设备写app”.他们也让在一个storyboard中创建一个通用的app.通过与新的适应屏幕的controller联合,它能够更简单的依靠interface builder,而不是与之对抗,从而简化了你应用的布局. 应用中的每一个view controller 都有一个特别的collection对象,这个特别的collection对象都有两个size classes

Xcode 6 AutoLayout Size Classes

1.基本概念 在iPad和iPhone 5出现之前,iOS设备就只有一种尺寸.我们在做屏幕适配时需要考虑的仅仅有设备方向而已.而很多应用并不支持转向,这样的话就完全没有屏幕适配的工作了.随着iPad和iPhone 5,以及接下来的iPhone 6的推出,屏幕尺寸也变成了需要考虑的对象.在iOS7之前,为一个应用,特别是universal的应用制作UI时,我们总会首先想我们的目标设备的长宽各是多少,方向变换以后布局又应该怎么改变,然后进行布局.iOS6引入了AutoLayout来帮助开发者使用约束

iOS Autoresizing Autolayout Size classes

Autoresizing:出现最早,仅仅能够针对父控件做约束(注意:要关闭Autolayout&Size classes才能够看到Autoresizing) 代码对应: UIView.h中的autoresizingMask属性 @property(nonatomic) UIViewAutoresizing autoresizingMask;    // simple resize. default is UIViewAutoresizingNone typedef NS_OPTIONS(NSUI

【iOS开发-120】在storyboard中如何使用Size Classes,其实就是设置多套AutoLayout

(1)在storyboard中使用Size Classes. 我们之前使用过AutoLayout,目前多了一个Size Classes,可以看做是在不同的Size Classes下进行AutoLayout设置. 详细教程,http://www.cocoachina.com/ios/20141020/9978.html --貌似,storyboard的功能越来越强大了.光是不同尺寸和屏幕的适配,就足以让敲代码成为一种痛苦. --找了很多博文,发现,几乎都是谈如何在storyboard中使用Size

iOS Xcode6 AutoLayout跟Size Classes(4)size classes 的应用

iOS 8在应用界面的可视化设计上添加了一个新的特性-Size Classes,对于任何设备来说,界面的宽度和高度都只分为两种描述:正常和紧凑.这样开发者便可以无视设备具体的尺寸,而是对这两类和它们的组合进行适配.这样不论在设计时还是代码上,我们都可以不再受限于具体的尺寸,而是变成遵循尺寸的视觉感官来进行适配 要知道Size Classes并不能帮我们自动布局,而是帮助我们来管理不同类型的IB 但是我们看到图中的宽度和高度都是Any,Any是什么意思呢?如果weight设为Any,height设

iOS8 Size Classes的理解与使用

在iOS8中,新增了Size Classes特性,它是对当前所有iOS设备尺寸的一个抽象,也是该抽象了,想想现在多少种iOS尺寸的设备吧:iPhone4-5-6-6plus.iPad.iPad mini.iWatch,如何还是按照以前那针对种特定设备来编写不同的布局的话,一定是很糟糕的一件事情. 现在有了sizeclass,事情就好办多了:你不是设备多吗,那我们就只把屏幕的宽和高分别分成三种情况:(Compact, Regular, Any),也即紧凑.正常和任意.这样宽和高三三一整合,一共9中

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 different size classes supported by your app. 应用程序也支持把图片存入一个自定义集合,用来在不同的尺寸类中显示. In the set list, select an image set. 在集合列表(set list)中,选择一个图片集. Open the ut