Kingyeung Chan

THINK GREAT THOUGHTS AND YOU WILL BE GREAT

大家好,我系Monster.Chan,一名来自中国的 iOS / AWS / Unity3D 开发者,就职于SAINSTORE。在不断修炼,努力提升自己


结合工作经验,目前写了《Getting Started with AWS》、《Websites & Web Apps on AWS》,欢迎试读或者购买

iOS自适应布局

从iOS开始,苹果一直在建议开发者使用自动化布局,但我发现大家都在逃避这个问题,采用最多仍然是固定布局。

自从iPhone6上市后,人们很难再去逃避这个自动化布局问题,四种屏幕的尺寸(算上iPad就要上升到5种了)、3各种分辨率和转向似乎让着手于自适应布局变得更加简单。

看完整篇文章,希望你可以流畅使用storyboardsconstraintssize class的特性。

Storyboards

在Xcode中,storyboards可以让你在屏幕上拖放原生对象并定义每个屏幕之间如何连接。

当我们创建一个工程,storyboards上的视图控制器,它的横纵比例跟任何设备都不匹配,实际上它是一个600pt*600pt的正方形:

这个storyboard屏幕并不表示特定硬件的屏幕,而是任何iOS设备屏幕的抽象表现。

Simulated Metrics

也许你不会介意在这个抽象画布上操作,但在实际大小的画布上操作可能更有帮助。我们可以很方便地在Xocde里面改变视图模拟器的大小和方向:

Constraints

现在让屏幕模拟4寸屏幕,并添加两个相邻的正方形。

当我们竖屏运行时,这两个正方形完全按照我们的布局排列,当我们切换成横屏是它们仍然忠于自己的坐标:

当我启动iphone6的模拟器运行该项目,我们可以看见我们的布局并没有自适应不同屏幕尺寸,右边多处了白色区域。

这是由于没有约束,所以这些对象会按照storyboard上创建的坐标和面积来定位。

现在我们为蓝色方块添加头部约束,黄色方块添加尾部约束

当我们运行项目的时候,约束把蓝色方块固定在屏幕左侧,把黄色方块固定在右侧。

现在让我们给两个方块之间添加横向空间约束,和上面的约束相似,会让两个方块之间有一定的固定空间。

这些我们再次运行项目,你会发现所有的约束都满足了,但是为了满足所有的约束,其中一个方块给拉伸了。

这似乎告诉我们这样一件事:除非被告知,否则iOS会尽量让大多数对象都保持自然大小。

现在让我们添加同等宽度约束。

当项目目运行时,可以看见两个方块宽度的增量相同。

最后,我们为两个方块添加纵横比约束。

这个约束保证了宽度和高度的比永远是相同的。

当我们运行app的时候,我们可以看到每个方块的宽度在增加,高度也同时在增加。

当我们切换iPhone6模拟器,我们可以看见这个方块利用之前的约束进行了相应的拉伸。

现在你已经对约束的使用有所了解,接下来会为介绍具体操作。

备注:大家应尽量少用约束,因为约束越少,你的布局越好维护。

在storyboard中添加约束的方法

约束弹窗也许最好的方法就是选择一个或多个对象,从其中一个弹窗中添加约束。我个人认为这是最好的方法了,因为可以看见所有约束的范围。

Size class

为了在大多数基础布局或者更高级的布局上使用约束,你需要使用Size Class,它有一种能够告诉你物理设备宽度和高度的特性。
Size Class为高和宽分别提供了三种类型:紧凑型(compact)、普通型(regular)、任意性(any)。这三种高和宽类型可以组合成9种size class,来表示不同的屏幕。

最近的文章

找回Xcode6失去的pch文件

不知道大家有没有发现Xcode6创建工程后,pch文件没有了。大部分宏定义,头文件导入都在这里,Xcode6去掉Precompile Prefix Header的主要原因可能在于Prefix Header大大的增加了Build的时间。但没有了Prefix Header之后就要通过手动@import来手动导入头文件了,在失去了编程便利性的同时也降低了Build的时间。 如何在Xcode6中添加pch(Precompile Prefix Header)Command+N,打开新建文件窗口:i...…

继续阅读
更早的文章

Magento on the Cloud in scalable

I want to get Magento into the cloud and make it scalable. This decision come about as we believe performance is a large factor in conversion, coupled with server reliability and server uptime. You may ask "Why we should use aws? " It ha...…

继续阅读