文档章节

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

Domineering
 Domineering
发布于 2015/02/09 17:46
字数 2244
阅读 16
收藏 0


我最喜欢的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 组合:

232336441744402.png

一个有趣的事情:ipad 是 regular x regular 。正如苹果在 "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 的选项的下面找到它。

241604119249723.png

首先,让我们在Xcode中看一下size class的网格。这是一个你可以在不同的布局排列间切换的区域。当你查看storyboard的时候,看到视图的底部,并且点击‘wAny hAny’字样的标签。你将会看到一些类似网格的画面。

译者:原文中都没有这个网格的截图我正在这里截图一个吧。)

241603470659461.png

默认的,我们以一个基础的设置开始,也就是any width和any height。很多事情都将在这里安置和改变,包括了iphone和ipad的所有方向的默认布局。苹果建议把大多数的设置都在这个界面中进行设置。这个是因为减少工作量而显得特别的简单。让我们布局一个超级宽的按钮在画面的中间。给它一个绿色的背景,从而让我们看到它真实的尺寸,给它一个约束来让他居中。

240014216434838.png

并且给它一个夸张的固定宽度600。

240041495819091.png

好了,现在在ipad和iphone的模拟器都运行一下,你将会看到都是居中,但对于iphone的两个方向都太宽了,(这里你设置了页面中button的宽度 但并没有马上更新是因为 你在做添加约束的时候没有更新图形,导致了如下图的情况,storyboard里面没有更新,而在模拟器运行时候更新了,左边大纲栏目里面也有警告说明,可以直接点击警告里面的黄色三角来更新画面其实就是 Updata Frame)

241604299874608.png

让我们使用size classes来修正吧。回到刚才那个第一张图的网格选择iphone的纵向(portrait)设置,就是紧凑的宽度+ 常规的高度。网格中的红色矩形。

241605252217849.png

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

前两个是不言而喻的,但是让我来告诉你如何让后两者工作。在当前的size class (compact width 和 regular height)状况下让我们试着把一个约束关闭。在文档的提纲栏里,点击设置在我们的button的Centre X 校准约束:

55.png

现在看一下我们的属性检查栏,在底部我们可以看到带标记的一个单词“Installed”,并且左侧有额外的加号按钮。点击额外的加号并且点选'Compact Width| Regular Height'(当前的就是)。

现在你将会看到2个标记物,把刚刚添加的哪一个取消勾选(wC hR)

241605463622507.png

现在我们的约束不再安置并且做任何事情来配置size classes。就像你看到的,Xcode正在控诉我们的约束太混乱了(左边的大纲会有错误提示表示你缺少了约束-译者),如果你这时候运行app在iphone的模拟器上的话,按钮不在X方向居中了。但是在ipad的上面还是居中的,因为约束仍然安置在基本的设置里面。这个约束将会一直配置着除非我们把它取消勾选。你甚至能够旋转你的iphone模拟器,并且发现button将会神奇的回到居中,因为iphone的横向是不同的size class配置,好了,让我们把勾选回来,让button回到居中。

现在让我们改变我们设置在button宽度的约束,选择button,并且来到Size的属性检查栏,下拉到底部,我们可以看到所有的约束。点击Width原本是600的 使用Edit设置为100:

241606006126460.png

在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协议:

1
2
3
4
5
6
class ViewController: UIViewController, UITraitEnvironment {
   
 override func viewDidLoad(){
 //code
 }
}

这个协议需要一个 required 方法来 告知你的view controller  trait collection 发生了改变:

1
2
3
4
5
6
override func traitCollectionDidChange(previousTraitCollection: UITraitCollection!) {
        if previousTraitCollection? {
          //print out the previousTrait's info
        println(previousTraitCollection)
        }
    }

一个UITraitCollection 提供了一个细节包括了 view controller的属性:

990.png

上述两个描述都是刚才我们改变的 横向或者纵向的size class ,这里是枚举:

1
2
3
4
5
enum UIUserInterfaceSizeClass : Int {
    case Unspecified
    case Compact
    case Regular
}

希望这篇文章能够帮助你基本的理解sizeclasses 以及他们如何更加的简化你在interface builder的工作。像往常一样,我把练习的放在GitHub上,让我们知道如果你有问题的话在下面留言。

原文:Size Classes With Xcode 6: One Storyboard For All Sizes补充了几张图。如有错误请斧正

本文转载自:

Domineering
粉丝 7
博文 162
码字总数 41763
作品 0
深圳
私信 提问
为iPhone 6设计自适应布局

Apple从iOS 6加入了Auto Layout后开始就比较委婉的开始鼓励、建议开发者使用自适应布局,但是到目前为止,我感觉大多数开发者一直在回避这个问题,不管是不是由于历史原因造成的,至少他们在...

阳光飞鸟
2015/03/13
138
0
Storyboard的爱与恨

尽管现在已经是Apple将Storyboard整合进Xcode中的第四个年头,大家对于Storyboard的评价仍然褒贬不一。有早期就选择转向Storyboard用于UI开发的国内业界领头人物,也有创建项目就立马删除Sto...

上官尘
2016/02/25
186
0
Xcode6中自动布局autolayout和sizeclass的使用

一、关于自动布局(Autolayout) 在Xcode中,自动布局看似是一个很复杂的系统,在真正使用它之前,我也是这么认为的,不过事实并非如此。 我们知道,一款iOS应用,其主要UI组件是由一个个相对...

泊竹
2014/09/20
4.2K
0
适配iPad和iPhone

我们打开Xcode,新建一个项目: 选择创建一个单视图应用: 设置项目名称AdaptiveWeather,语言选择Swift,设备选择Universal: 创建好项目后,我们在项目目录结构中可以看到只存在一个文件:...

FTD_SL
2016/04/01
148
0
Swift的一些翻译4:Designing UI Using Stack Views

第六章 用堆栈视图(Stack Views)来设计UI iOS9带来了许多新的特性来让我们的开发生涯更简单,Stack Views的简介就是一个很好的例子.之前给你们简单的介绍了auto layout.这个例子让我们工作起来...

zetan
2015/12/07
87
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周五乱弹 ——不知道假装开心,装的像么

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :天黑了 你很忧愁, 你说世界上, 找不到四块五的妞, 行走在凌晨两点的马路上, 你疲倦地拿着半盒黄鹤楼。#今日歌曲推荐# 《四块...

小小编辑
今天
2.1K
16
64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
昨天
69
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
昨天
32
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
昨天
116
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
昨天
31
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部