当前位置:首页 » 编程语言

第三章 :介绍 Auto Layout

2015-09-12 13:14 本站整理 浏览(154)

第三章 :介绍 Auto Layout

译者注:由于本人英语水平有限,尽可能描述出作者的本意。如有错误,及时指出。文中会省略部分技术无关的赘述
“Life is short. Build stuff that matters.”
                                        – Siqi Chen

Auto Layout 简介

Hello World程序好玩儿吗 ? 在我们做真正的app之前 ,我们先来看看Auto Layout开始吧。

Auto Layout是一个基于约束的布局系统 。它允许开发人员创建自适应UI响应适当地改变的屏幕大小和设备方向。一些初学者觉得它很难学所以逃避使用它。相信我 ,只要你适应了他 , AutoLayout 将会使你最好的工具之一 ,一个你在开发app的时候离不开的工具。

你也许会奇怪 , 为什么我要讲Auto Layout 而不是直接将一个真正的项目呢 。 在Xcode 6 中 学习Auto Layout 是不可避免的 。我想要帮助你再布局用户界面上打下坚固的基础 。 随着iPhone 6 和 iPhone 6 Plus的发布 ,苹果的iPhone 也有多不同的尺寸 ,如果不适用Auto Layout , 将会很难创建一个app适应不同的屏幕分辨率 。 通过这章你将学会怎样在storyboard上使用Auto Layout 。

Auto Layout 是什么

打开你的Hello World程序 ,把模拟器换成iPhone 4s 。你得到的结果就像上图 , 按钮不在中间了 。

再试试别的, 选择 Hardware— Rotate Left .模拟器编程横屏。这次按钮也不在中间

为什么 ?出了什么问题?

首先你必须明白 , 5s 和 4s有不同的屏幕尺寸 。对5s来说 在竖屏模式下 320个点(640像素)X 568个点(1136像素 )。 4s是 320(640)X480(960).

为什么用点代替像素 ?

回到2007年,苹果推出第一代iPhone采用了3.5英寸的显示屏, 为320x480分辨率 。苹果在后面的iPhone 3G 和 iPhone 3GS 保留了这种屏幕分辨率 。在那时候1个点对应一个分辨率 。后来苹果引入iPhone 4采用了retina屏。屏幕采用640X960分辨率 。1个点对象2个像素 。

点系统使我们开发起来更轻松,不管屏幕分辨率从如何改变 。我们只处理基础分辨率 。点和像素之间的转换交给IOS去处理。

不使用Auto Layout 的时候 , 我们按钮在storyboard上得布局是固定的。换句话说我们采用hard-code的方式确定按钮的边框和位置 。在我们的例子中 ,俺就的origin 被设置为(120,269) . 因此不管你用3.5英寸还是4英寸的屏幕 ,按钮都回被画在那个特定的位置 。上图展示了按钮在不同屏幕下。这就解释了Hello World 按钮为什么不能在3.5英寸屏幕和横屏下正常显示 。

然而 , 我们想要我们的app在任何屏幕上不管横屏竖屏都能够正常的显示 , 这就是为什么我们要学习Auto Layout , 它使解决屏幕适配的一个解决方案 。

Auto Layout 的所有都跟约束有关

就像前面提到的额, Auto Layout 是一个基于约束的布局系统 。允许开发人员创建的自适应UI响应适当地变化的屏幕尺寸与设备方向。听起来不错 , 但是基于约束布局是什么意思呢? 想象一些Hello World 按钮 ,如果你想把按钮放在view中间 你要怎样去描述它 。你也许会这样描述它:不管屏幕的分辨率和方向 , 按钮都必须水平和垂直居中 。

这块实际上你需要定义两个约束 :

center horizontally (水平居中)

center vertically (垂直居中)

这些约束表达按钮在界面上得布局规则 。Auto Layout 是基于约束的 。我们以单词的形式描述约束 ,Auto Layout 以数学表达式展示出来 。比如 ,如果你定义一个按钮的位置 , 也许你想说 “左边缘要距离containing View 左边缘30个点 “,这句话可以转换位button.left = (container.left + 30). 这就是你所要知道的全部 ,幸运的是 ,我们并不需要去处理公式 。

我们看下怎样把按钮居中。

使用Auto Layout让按钮居中

Xcode 提供两种方式去使用 Auto Layout:Auto Layout菜单

Control-drag (不太会翻译 按住control键拖动?)

我们将会再这章节中演示这两种方式 。我们先试试Auto Layout 菜单 。打开 “Main.storyboard” ,Auto Layout 菜单在Interface Builder底下 。这些按钮都是针对Auto Layout的不同功能 。

每个按钮都都自己的功能:

Align —— 创建对齐约束,比如对准两个views的最边缘

Pin —— 定义空间约束, 如定义UI空间的宽度 。

Issues ——解决布局问题

Resizing —— 调整约束影响的布局

要把Hello World 按钮居中 ,你首先应该点击Align按钮 ,在弹出来的菜单中选择 “Vertical center in container” 和 “Horizontal center in container” , 然后点击 “Add 2 Constraints” 。

你现在应该看到一组约束线 。如果约束线是蓝色的。那就说明你的布局配置的么有问题约束也没有歧义 。如果你想查看你的约束,你可以在右边窗口的尺寸检查器下查看。

okay,现在你可以测试你的app了 , 点击Run运行app,改变模拟器 ,iPhone 4 , iPhone 5 ,iPhone 6 上都可以显示正常了。

解决布局问题

我们刚刚设置的布局约束很完美 。但是不是所有的布局都这么完美 ,Xcode足够智能可以检测到任何布局问题 。

像图中一样把按钮拖到左下角 ,Xcode立马检测到布局问题 ,并且把布局线变成橙色表示错位的项目 。

布局问题经常发生在你创建了一个含糊不清的或者冲突的约束 。这里我们制定按钮水平垂直居中 ,然而 ,现在按钮却在左下角。Xcode感觉到迷惑因此用橙色的线条来表明问题 。

不管出现任何布局问题,视图的文件框都会出现一个箭头(红色或者黄色) ,点击那个箭头会出现一个问题列表 。Xcode足够只能去解决这个问题 。点击指示器按钮 会弹出一个框显示一些解决方案。针对我们这个案例 ,选择”Update Frame” 然后点击”Fix Misplacement” ,按钮就会被移动到view中间 。

不是所有布局问题都是这种问题 , 我只是想掩饰怎样找到和修复问题 。当你建立一个使用自动布局你的UI无论是在自己的应用程序或

通过演练工作,你将会知道如何轻松的解决问题。

预览 storyboard

目前为止 , 我们只是使用模拟器去测试UI的变化 。虽然Xcode内置的模拟器很强大 , 但是这不是一个最好的测试UI改变的方案 。Xcode 6 提供了一个预览的功能 。

在Interface Builder下 ,打开Assistant pop-up 菜单 ,如图。

按住shift+option 不放,点击Main.storyboard 。你可以按照上图的步骤。

系统会提示你选择在哪里显示预览。如图双击右边+按钮 。

Xcode将会在你编辑用户界面的旁边显示一个预览。默认显示iPhone 4屏幕 。你可以点击左下角的+添加别的屏幕 。如果你想看横屏, 点击屏幕下得rotate按钮。预览功能对你设计用户界面非常有用 。可以让你改变用户界面的同时看到预览效果 。而且还能节省加载程序的事件,当你只是想测试一个界面的改变。

添加一个Label

现在你已经对Auto Layout有一点了解了.我们尝试在右下角添加一个Label ,iPhone 5s比iPhone 4s高 ,当你在屏幕下方添加一些UI控件 ,需要一些调整去支不同的屏幕。

在Interface Builder 中 ,从对象库中拖一个Label放在右下角,如下图 。双击并改变它的文本 “Welcome to Auto Layout” 或者其他你喜欢的文本 。

查看预览窗口 , 在3.5英寸的屏幕中找不到这个label 。

我们需要设置两个约束让它显示正常 。

我们将添加一个约束,使标签保持接近视图的底部。这次我么使用”Control-drag”d的方式去做。按住control 键不放 ,点击Label向下拖到到父视图 。然后都松开 ,这时候会弹出一个约束菜单选项 。选择”Bottom Space to Bottom Layout Guide” 来设置Lebel到试图控制器底部的约束 。这将会使Label和试图控制器底部保持一个固定的距离。这个约束一添加,Interface Builder就会显示出红色的约束线,表示有一些缺失的约束 。

解决Auto Layout问题 ,去试图文本框点击红色箭头,然后点击红色指示器 ,再点击”Add Missing constraints ”

当你预览UI或者在模拟器上运行 ,这个Label将会在3.5英寸屏或者横屏上显示正常了。

Top and Bottom 布局指南

你也许会疑惑Bottom Layout Guide是什么意思 ? 一般来说 ,Bottom Layout Guide指的是试图的底部 , 像示例中展示的那样。然而 ,还有其他情况 。有时候我们嵌入了一个Tab bar(后面章节学习 ),Bottom Layout Guide指的是Tab bar的顶部 。对顶部而言 ,默认占了20个点(状态栏的高度),也有其他情况.如果试图包含一个Navigation Controller , guide就会设置位navigation Bar的底部 。

如果你不太明白 , 就在Interface Builder上点击”Top Layout Guide”或者”Bottom Layout Guide” ,Interface Builder 会蓝色线条展示guide线的高度

总结

本章讲解了Auto Layout的基础 。后面会通过真实的app继续探索Auto Layout其他功能 。目前为止 ,我希望你对怎样布局你的app节目和适配所有屏幕有个大概的了解 。

很多初学者(甚至一些有经验的程序员)因为Auto Layout看起来比较困惑去躲避使用它 。如果你在读完本章后开始喜欢Auto Layout 的话, 你已经在成为一个优秀IOS程序员的路上了 。最开始苹果的屏幕只有3.5英寸 ,随着苹果的发展 ,以后的app将要适配越来越多的屏幕 。所以我建议学Auto Layout。