(译)Getting Started——1.2.2 Desinging a User Interface(设计用户界面)
用户需要以最简单的方式与应用界面进行交互。应该从用户的角度出发设计页面,使得界面更高效、简捷和直接。
storyboard以图形化的方式帮助你设计和实现界面。在设计和实现界面的过程中,你可以准确的看到你实现的界面是什么样的,界面上哪些东西合适,哪些东西不合适,以及你对界面随时的调整,都是一目了然的。
当你使用storyboard构建界面时,正如你在上一节教程中学习的那样,你一直都在与视图(View)打交道,视图(View)用于把内容显示给用户。视图(View)是用于构建用户界面,用于有效地、优雅地、清晰地展示内容的基本单元。如果你正在开发更为复杂的应用,那你可以使用多个场景和多个View。
视图层次结构
屏幕上,视图不会显示自己,也不会响应用户的输入,它们只能提供一个用于放置其它视图的窗口。于是,应用里的视图是由被称为视图层次结构的东东所管理的。视图层次结构定义了相对于其它视图的视图布局。在一个层次结构中,被包含在其它视图里的视图被叫做子视图,包含其它视图的视图被叫做父视图。即使一个视图里有多个子视图,它也只有且仅有一个父视图。
视图层次结构的顶层对象是window对象。它是UIWindow类的实例,它是屏幕上用于添加视图对象的基本容器。为了显示内容,你需要给window添加内容视图对象(内容视图对象作为window的子视图)。
内容视图和它的子视图对于用户来说,是可见的,内容视图也必须被插入到window的视图层次结构中。在你使用storyboard时,放置内容视图的位置已经为你自动配置好了。在应用被启动时,应用对象会加载storyboard,会创建有关的视图控制器类的实例,解压每个视图控制器里的视图层次,然后把作为开始的视图控制里的视图内容添加到window中。在下面的章节中,你会学习到如何管理视图控制器。现在,你需要把焦点聚集到如何在storyboard的单视图控制器中创建一个层次结构。
视图的类型
在你设计应用时,了解哪种意图下使用哪种视图是非常重要的。例如,如果你想收集用户的信息(比如是一段文本),你可以使用text field,如果你要显示一段静态的文字,你应该使用label。应用绘制时,使用UIKit框架的视图是比较容易创建的,这是因为你可以使用它们快速的装配出基本的界面来。一个UIKit框架的视图对象是UIView类或子类的实例。UIKit框架提供了不同类型的视图用于帮助你表现和组织数据。
尽管每个视图都有它自己特定的功能,但是总的来说,UIKit视图可以被归为这么几种类型:
视图类型 | 意图 | 举例 |
Content |
显示特定类型的内容,例如图片或文本 | Image view,label |
Collections |
显示集合或一组视图 | Collection view,table view |
Controls |
执行动作或显示信息 | Button,slider,switch |
Bars |
导航或执行动作 | Toolbar,navigation bar,tab bar |
input |
接收用户的文本输入 | search bar,text view |
Containers |
为其它视图提供容器 | View,scroll view |
Modal | 中断应用正常的流程来让用户执行动作 | Action sheet,alert view |
你可以在Interface Builder中,用可视化的方式来装配视图。Interface Builder中提供了标准的view、control等库,这些东东在你构建界面时用得到。从这个库中拖出对象,把它们放置于画布中,然后用你自己的方式去安排它们。在保存之前,使用inspector来配置这些对象。你会马上看到结果,不需要写任何一行代码,你就可以运行程序了。
UIKit框架提供了标准的视图来显示各种类型的内容,你还可以继承UIView(或它的子类)来创建自己的视图。自定义的视图一定是UIView的子类,在自定义视图中,你需要自己处理所有的绘制事件,处理所有的事件句柄。在该教程中,你不会使用自定义视图,如果你有兴趣,你可以在Defining a Custom View一文中学习到如何实现自定义视图的更多知识。
使用storyboard放置视图
在可视化环境中,使用storyboard来放置自己的视图层次。storyboard提供了一个直接地、可视化地方式来让你操作视图,构建界面。
正如你在上一节教程中看到的那样,storyboard由场景组成,每个场景都关联着一个视图层次结构。从对象库中拖出一个视图并把它摆放在场景上,storyboard就会自动把它加入到当前场景的视图层次结构中。在视图层次结构中,视图的位置是由你决定的,你把视图放到哪里,它就在哪里显示。在你给场景添加完一个视图后,你可以在画布上对视图进行重设大小、配置、移动位置等操作。
画布上也可以显示界面上对象的视图大纲,它在画布的左边显示,你从大纲上就可以清楚的看到画布中对象的层次结构。
storyboard场景中创建的视图层次结构实际上是一系列被压缩的Objective-C对象。在运行时,这些对象被解压。解压的结果就是,你使用utility区域的inspector为相关类的实例设置的属性值的层次结构被展现出来。
正如你在上一节教程中学到的那样,在storyboard中,你工作的默认界面配置被应用为界面的各个版本。当你需要为特定的设备尺寸和方向调整你的界面时,你应该把这种变化指定给特定的尺寸类。尺寸类是在显示环境下,描述水平或垂直空间的高级方式,例如竖向的iPhone或横向的iPad。有两种类型的尺寸类:普通地、紧凑地。展示环境的特点是一对尺寸类,一个描述了水平空间,一个描述了垂直空间。在画布上,你可以使用尺寸类控制器,为普通尺寸和紧凑尺寸的结合来预览和编辑界面。
在本教程中,你没有在特定的尺寸下工作,但是,如果你对尺寸类很好奇,请阅读Size Classes Design Help章节。
使用Inspector来配置视图
utility区域,对象库上方的inspector面板中显示的内容如下:
每个inspector的元素都为界面上的元素提供了重要的配置选项。当你选择了一个对象(例如一个视图),inspector会根据你选择的对象,更新面板里的属性,你就可以对属性进行设置了。
1. File:指定storyboard的一般通用信息。
2. Quick Help:获取该对象相关的有用信息。
3. Identity:为该对象指定自定义的类,定义它可访问的属性。
4. Attributes:自定义对象的可视化属性。
5. Size:指定对象的尺寸和Auto Layout属性。
6. Connections:在界面和源码之间创建连接。
在前一节教程中,你使用了Attributes inspector。在教程剩下的部分中,你会继续使用其它的inspector来配置视图和对象。尤其是,使用Attributes inspector来配置视图,使用Identity inspector来创建视图控制器,使用Connections inspector在视图和视图控制器之间创建连接。
使用Auto Layout定位视图
当你在storyboard中开始定位视图时,你需要考虑各种各样的情况。IOS应用运行在数量众多的不同设备上,这些设备的屏幕尺寸不同,方向不同,语言不同等等。你需要动态的界面,当设备的屏幕尺寸、方向、本地化、度量等发生变化时,界面应该可以无缝的响应。
如果你已经学习了上一节教程,你会看到,Xcode提供了名为Auto Layout的工具来帮助你创建通用的、适配性强的界面。Auto Layout是解释视图之间关系的系统。在单个视图上或多个视图之间,它会让你定义一系列的约定。
点击画布右下方的Auto Layout图标,来给画布上的视图添加不同类型的约定,解决布局问题,检查用于约束行为的约定。
1.Align:创建行或列的约束。例如把一个视图放置于容器的中间,或者把一个视图放于某两个视图的左边。
2.Pin:创建空间约束。例如定义视图的高度,或者指定它离另外一个视图的水平距离。
3.Resolve Auto Layout Issues:基于建议,通过添加或重设约束来解决布局问题。
4.Resizing Behavior:指定大小重新设定后如何影响约束。
此时,对于在ToDoList应用中你创建的简单页面来说,你不需要学习Auto Layout中进一步的知识。因为,应用的界面很复杂,你就需要添加不同的约束来精确的指定,在不同的设备和方向下,界面应该如果摆放视图。在教程的最后,会有一个指向Auto Layout教程的链接,这个教程会帮助你使用约束来定义更为复杂的自适应的界面。