IOS 6 自动布局 入门-1(IOS中autolayout和之前版本autoresize

%E8%87%AA%E5%8A%A8%E5%B8%83%E5%B1%80-%E5%85%A5%E9%97%A8%EF%BC%8D1

来自Ray:恭喜各位!你们已经通过宣传ios feast提前解锁了第一个有关IOS6的教程。

目前这份教程只是我们的新书iOS 6 By Tutorials里面某个章节的精简版。这份教程由同样著作过iOS Apprentice Series的Matthijs Hollemans 完成,开始体验吧!

这份教程由IOS 教程小组的组员Matthijs Hollemans发布,Matthijs既是一位经验丰富的IOS程序员又是一名资深老到的界面设计者。

你是否曾经因为尝试想让你的应用同时在景观方向(横版)以及肖像方向(竖版)看上去不错而感到受挫?是否为了让应用同时支持iPhone以及iPad的模型尺寸而抓狂?现在我们可以不用为此而担心了,我有个好消息带给大家!

通常来说,如果屏幕是固定尺寸,那么设计它的用户界面不会很难,但如果屏幕的frame需要能够变化,那么其中各个UI元素的位置以及尺寸也必须为了适应新的尺寸做相应的变化。

目前为止,即使你的界面设计是在合理的复杂度内,你也必须要为之写许多代码来适应变化的布局。现在我相信你会很高兴听到这种情况将不会发生了-对于iPhone与iPad IOS6 带来了一个非常了不起的特征:自动布局。

自动布局不仅能给你的应用带来各种屏幕尺寸设计的支持,做为额外的惊喜,它还能使设计中的各种小事比如多语言环境支持。你从此不必再为你想要支持的各种语言重新设计nibs和storyboards文件,当然这也包括一些从右至左书写的语言比如说希伯来文和阿拉伯语。

这篇教程将向你展示的是如何开始使用Iterface Builder来做自动布局。在iOS 6 by Tutorials里,我们把这篇教程内容写得更深,并且基于这个知识会有一个全新的章节,在这里面你会看到如果通过代码来释放自动布局的全部功能。

好吧,现在开始拿着你喜欢的零食以及饮料,准备开始做一名自动布局的大师吧!

springs and struts 的问题

毫无疑问你可能对autosizing masks比较熟悉–这个也就是“springs and struts” 模式。autosizing mask决定了一个view会发生什么当它的superview 改变大小的时候。它是否有灵活并且自动修复页边处理能力(the struts),它的宽和高同时也会发生什么变化呢(the springs)?

举个例子,当一个view的superview的宽度变宽时,它的宽度也会灵活地跟着变宽,并且它的右边界也会自动修复般的一直紧挨着superview的右边界。

autosizing 系统处理这种简单的情况还是不错的,但是当情况稍微复杂一点的时候,它就会很快搞砸你的布局。现在让我们看一个springs and struts模式所不能处理的一个简单例子吧。

打开Xcode创建一个基于Single View Application template新项目,把之命名为”StrutsProblem”,选择iPhone程序并且禁用Storyboards:

在 Interface Builder 里点击打开ViewController.xib。在你做任何其他事情之前,请先在nib里把Auto Layout禁用掉。你可以在File inspector里找到这个选项:

取消选择“Use Autolayout”复选框. 那么现在你的nib使用的是旧版本的struts-and-springs 模式。

提示:任何你通过Xcode4.5或者更高版本创建的新nib或者storyboard文件会默认使用Auto Layout。因为Auto Layout这个特性只有在IOS 6中有,所以如果你想要使用 Xcode4.5来做一些兼容IOS5的应用,你必须要在新的nib或者storyboard文件中通过取消选择“Use Autolayout”复选框来禁用Auto Layout。

拖拉三个新的view到main view中,如图所示:

为了使看起来更清晰,我们把每个view都填注颜色。

现在每个View都离窗体边界 20 points远;各个填充颜色的view之间的距离也是20 points。底部的view是280 points宽,并且顶部两个view都设置成130 points宽。所有的view都设置成200 points 高。

运行程序并且把模拟器或者你的设备旋转至景观方向。你的设备会如下图所以,和我们理想的差距甚远:

提示:你能够通过使用HardwareRotate Left and Rotate Right的菜单选项来旋转模拟器, 或者通过按住Cmd然后使用向左或者向右方向键来旋转。

而我想要的是让程序运行后是这个样子的在景观方向下:

很明显, autosizing masks 对于要达到这三个view的理想变化还需要做点其他的。 从左上角的View来开始设置autosizing :

这一步使View能紧挨着顶部和左边缘(而不是底部与右边缘),并且在水平和垂直方向上都能够支持伸缩当superview改变其大小时。

类似地, 改变 右上角autosizing 设置:

这是底部view的设置:

运行程序并且转动设备至景观方向。现在应该看上去是这样:

世俗的纷扰,生活的琐碎使人精疲力尽,

IOS 6 自动布局 入门-1(IOS中autolayout和之前版本autoresize

相关文章:

你感兴趣的文章:

标签云: