在项目导航面板中找到BNRQuizViewController类文件。读者在创建这个类时勾选了With XIB for user interface,因此Xcode自动生成了第三个文件:BNRQuizView- Controller.xib。请读者选择BNRQuizViewController.xib。
Xcode会使用Interface Builder(界面创建工具)打开XIB(发音“zib”)文件。Interface Builder是一种可视化编辑器,可以用拖动对象的方式创建图形用户界面。XIB的全称就是XML Interface Builder。
很多其他平台的GUI创建工具,需要先描述应用外观,然后单击某个按钮,生成大量代码。Interface Builder则不同,它是一种对象编辑器:使用时需要先创建并设置对象,例如按钮和标签,然后将对象保存在固化文件里。这种固化文件就是XIB文件。
Interface Builder将编辑区域分为两部分:左侧是dock,右侧是画布。
dock可以使用两种方式展示XIB文件中的对象:图标视图(icon view)和大纲视图(outline view)。图标视图能为屏幕腾出更多的空间,但是出于学习目的,使用大纲视图查看对象更加方便。
如果读者的dock处于图标视图状态,请点击icon / outline视图切换按钮将dock切换到大纲视图状态,按钮在画布左下角的位置(见图1-11)。
图1-11 使用Interface Builder编辑XIB文件
大纲视图中的BNRQuizViewController.xib包含三个对象:Placeholders模块中的两个占位符对象(placeholder)和一个View对象。请读者先忽略占位符对象,我们稍后再介绍它。
View对象是一个UIView类的对象,读者可以在画布上看到它。它是用户界面的基石,可以容纳其他视图对象。而且,读者在画布上看到的和应用正式运行时的外观完全相同。
单击大纲视图中的View对象,它会显示在画布上。拖曳移动视图,移动视图不会修改对象自身,只会重新组织画布。单击视图左上角的x按钮可以关闭视图。同样,这样做不会删除视图,只是将其从画布中移除。再次选中大纲视图中的View对象,可将其加回画布。
现在Quiz应用的用户界面只有一个空白的视图对象,还需要添加两个标签和两个按钮(见图1-12)。
图1-12 需要的标签和按钮
创建视图对象
要加入这些视图对象,需要打开工具区域(utilities area)的对象库(object library)。
工具区域位于编辑器区域的右侧,分上下两部分:检视面板(inspector)和库面板(library)。上方的检视面板负责显示编辑器区域当前选中的文件或对象的各种设置。下方的库面板则会列出可以加入文件或项目的物件(例如对象或代码)。拖曳这两个区域间的分隔条,可以改变其相对的尺寸。
这两个面板的顶部都有一选择条,可以用来选择各种不同类型的面板和库(见图1-13)。在库面板选择条中,单击图标,可以打开对象库面板。
图1-13 Xcode工具区域
对象库中的对象主要用于构建用户界面,它们可以被拖曳到XIB文件中。
请读者在对象库中找到Label对象(应该可以在列表顶部找到Label对象,如果没有,可以往下滚动列表,或者使用面板底部的查询框),然后选中该对象并拖曳至(画布上的)视图对象上,再将这个Label对象放在视图正中间靠近顶部的位置。拖曳第二个Label对象,放在视图正中间靠近底部的位置。
接下来请找到Button对象,拖曳两个Button对象至视图对象,并分别放在两个Label对象的下方。
现在读者已经为BNRQuizViewController.xib添加了四个新的视图对象,在编辑区域的大纲视图中可以看到它们。
设置视图对象
视图对象已经全部创建好了,接下来应该设置对象的属性。部分属性,例如大小、位置和文本可以在画布中直接编辑。其他属性则必须通过属性检视面板(attributes inspector)来编辑,我们很快就会介绍它。
请读者修改以上四个对象的大小,使其宽度能够横跨窗口的大部分区域(在画布或大纲视图中选中对象,然后拖曳它的角或边,就可以修改对象的大小,如图1-14所示)。
图1-14 修改标签和按钮的大小
双击画布中的某个Button对象,就可编辑该对象的标题。将上方Button对象的标题改为Show Question(显示问题),下方的改为Show Answer(显示答案)。使用同样的方法可编辑Label对象的文字。删除上方Label对象的文字(之后用于显示问题),下方的设置为???。这时的界面如图1-15所示。
图1-15 设置标签和按钮的文本
如果标签中的文本处于居中对齐状态,则界面会更加美观。设置标签的文本对齐方式必须通过属性检视面板来编辑。
选中位于视图下方的Label对象,单击检视面板选择条中的图标,打开属性面板。
在属性面板中找到标题为Alignment的分段控件(segmented control)。选择中间的那个选项(居中对齐),如图1-16所示。
图1-16 设置label的文本对齐方式为居中对齐
修改后请读者观察画布中的变化,视图下方Label的文字???会改为居中对齐。下面将视图上方的Label也设置为居中对齐(该对象目前还没有文字,但是运行时会有)。
为了让用户知道按钮的点击区域,可以改变按钮的背景颜色。首先请在画布中选择Show Question按钮。
在属性检视面板中向下滚动,会看到View标题下方的属性。在Background标签右侧,点击颜色面板(白色方块,上面有一条红色的斜线)可以打开颜色拾取器。请读者为按钮选择一种满意的颜色。
接下来选择Show Answer按钮,但是这次点击颜色面板右侧有上下箭头的弹出式菜单。菜单中会显示系统默认颜色和最近使用的颜色。请在菜单中选择与Show Question按钮相同的颜色。
NIB文件
此时读者可能会好奇,应用运行时是如何使用这些对象的呢?
构建项目时,所有XIB文件都会被编译为NIB文件(NIB文件体积更小,更容易解析),然后Xcode会将NIB文件拷贝至应用的程序包(bundle)中。程序包其实就是目录,其中包含应用的可执行文件和其会用到的所有资源文件。
应用在运行时刻会从程序包中按需载入NIB文件并激活文件中的对象。Quiz应用只有一个NIB文件,并且会在应用启动时载入,复杂的应用会有很多NIB文件。读者将在第6章中学习更多关于应用如何加载NIB文件的知识。
现在,应用的用户界面看起来很不错,但是还没有任何功能。接下来请读者将视图对象和控制器对象——BNRQuizViewController关联起来,这样应用就可以响应用户操作了。