21.2.3　设计界面

在图21-4和Xcode主窗口中，注意一个名为MainWindow.xib的文件。xib文件包含了与程序的用户界面有关的所有信息，包括关于它的窗口、按钮、标签、选项卡栏、文本字段等信息。当然，你现在还没有用户界面！这是接下来要完成的工作。

双击MainWindow.xib文件，这将启动另一个名为Interface Builder的应用程序。还可以从项目的Resources文件夹访问XIB文件。

Interface Builder启动时，屏幕上会出现一系列窗口，如图21-6、图21-7和图21-8所示。实际打开的窗口可能与这些图略有出入。

Library窗口提供了一组可用于界面的控件。图21-6显示了这个窗口的一种显示格局。

MainWindow. xib窗口（图21-7）是在应用程序代码与界面之间建立连接的控制窗口，如下所示。

只是标示为Window的窗口显示了iPhone主窗口的布局。因为你尚未给iPhone窗口设计任何内容，该窗口开始为空，如图21-8所示。

我们要做的第一件事情是将iPhone窗口设置为黑色。为此，首先在名为Window的窗口内单击。现在，从Tools菜单中选择Inspector。这应该会打开如图21-9所示的Inspector窗口。

图　21-6　Interface Builder Library窗口

图　21-7　Interface Builder MainWindow.xib窗口

确保Inspector窗口的名称显示为Windows Attributes，如图21-9所示。如果不是，单击顶部选项卡栏中最左侧的选项卡，以便显示正确的窗口。

如果向下看到窗口的View部分，可以看到一个标示为Background的属性。如果双击Background旁边的白色实心矩形，可以打开颜色拾取器。从拾取器中选择黑色，这将把Inspector窗口中Backgournd属性旁边的矩形从白色变为黑色（参见图21-10）。

图　21-8　Interface Builder iPhone窗口

图　21-9　Interface Builder Inspector窗口

如果看一看代表iPhone显示窗口的名为window的窗口，可以看到它已经变为黑色，如图21-11所示。

图　21-10　修改窗口的背景颜色

图　21-11　界面窗口变为黑色

现在可以关闭Colors窗口。

在Library窗口中单击一个对象并将其拖到iPhone窗口中，可以在iPhone界面中创建新的对象。现在单击并拖动一个标签。当标签接近窗口中心顶部的位置时释放鼠标，如图21-12所示。

在窗口内四处移动标签时，会出现蓝色的导线。有时候，显示导线是为了将对象与前面在窗口中放置的其他对象对齐，而在其他时候是为了确保对象与其他对象和窗口边缘之间具有足够的间隔，从而与Apple的界面导线保持一致。

以后随时可以改变标签在窗口中的位置，方法是单击将其拖动到窗口内的其他位置。

现在让我们设置这个标签的一些属性。如果窗口中当前没有选中标签，单击你刚刚创建的标签以选中它。注意，Inspector窗口的内容会自动改变，从而提供关于窗口中当前选中对象的信息。我们不想让这个标签默认显示任何文本，因此将Text值修改为一个空字符串（也就是说，从Inspector窗口中显示的文本字段中删除字符串Label）。

对于Layout属性，选择Right-justified（右对齐）作为对齐方式。最后，将标签的背景颜色改为蓝色（或者你选择的其他颜色），就像把窗口的背景颜色改为黑色一样。Inspector窗口的外观应该如图21-13所示。

图　21-12　添加一个标签

图　21-13　修改标签的属性

现在让我们修改标签的大小。返回Window窗口，只要向外拉伸它的边角即可改变标签大小。改变标签的大小和位置，直到如图21-14所示为止。

现在我们给界面添加一个按钮。从Library窗口中单击一个Round Rect Button对象并将其拖到界面窗口中，把它放置在窗口的左下角，如图21-15所示。修改按钮上的标签有两种途径：双击按钮然后输入文本，或者在Inspector窗口中设置Title字段。任意选择一种途径，让窗口变得如图21-15所示。

图　21-14　改变标签的大小和位置

图　21-15　给界面添加一个按钮

现在，我们有了一个连接到程序中display实例变量的标签，这样只要在程序中设置变量的值，标签文本就会随之发生变化。

我们还有一个标示1的按钮，只要按下它就会调用我们的click1：方法。该方法将display的文本字段设置为1。而且因为该变量将连接到标签，所以标签文本也会更新。概言之，下面是我们要实现的过程：

1.用户按下标为1的按钮。

2.这个事件导致click：方法被调用。

3.click：方法将实例变量display的文本修改为字符串1。

4.因为UILabel对象display连接到了iPhone窗口中的标签，所以这个标签也会更新为相应的文本值，也就是值1。

为了实现上述过程，我们只需要建立两个连接。让我们讨论一下如何去做。

首先，让我们将按钮连接到IBAction方法click1：，方法是按下Ctrl键的同时单击按钮，然后将出现在屏幕上的蓝线拖动到MainWindow.xib窗口中的应用程序委托，如图21-16所示。

在Delegate立方体上释放鼠标后，会出现一个下拉列表，允许你选择一个IBAction方法连接到这个按钮。在我们的例子中，我们只有一个这样的方法叫做click1：，因此下拉列表中只会出现它。选择该方法以建立连接，如图21-17所示。

图　21-16　为按钮添加一个操作

图　21-17　将事件连接到方法

现在，让我们将display变量连接到标签。只要按下按钮就会执行应用程序中的一个方法（也就是说，操作的流程是从界面到应用程序委托），而设定应用程序中实例变量的值会更新iPhone窗口中的标签（在这里，操作流程是从应用程序委托到界面）。因此，一开始要在按下Ctrl键的同时单击应用程序委托图标，并将出现的蓝线拖动到Window中的标签，如图21-18所示。

释放鼠标时，你将看到对应类的IBOutlet变量的一个列表，作为可供选择的控件（UILabel）。我们的程序中有一个这样的变量，叫做display。选择此变量（如图21-19所示）并建立连接。

图　21-18　连接一个出口变量

图　21-19　完成连接

到这里全部过程就结束了！在Interface Builder的菜单栏中选择File→Save，然后选择Build and Go from Xcode（在Interface Builder中也同样可以做到）。

如果一切顺利，程序将成功编译和开始执行。执行开始时，程序将被加载到iPhone模拟器中，该模拟器会出现在计算机显示器上。模拟器窗口应该如本章开始部分的图21-1所示。只要在模拟器中单击按钮，就可以看到模拟效果。此时，我们概述的操作步骤和建立的连接，会导致在显示器顶部的标签中显示字符串1，如图21-2所示。