iOS开发工具Xcode：Interface Builder

简介：

Interface Builder（IB）是Mac OS X平台下用于设计和测试用户界面（GUI）的应用程序（非开源）。为了生成GUI，IB并不是必需的，实际上Mac OS X下所有的用户界面元素都可以使用代码直接生成；但IB能够使开发者简单快捷的开发出符合Mac OS X human-interface guidelines的GUI。通常你只需要通过简单的拖拽（drag-n-drop）操作来构建GUI就可以了。IB使用Nib文件储存GUI资源，同时适用于Cocoa和Carbon程序。在需要的时候，Nib文件可以被快速地载入内存。

Interface Builder工具是在iPhone SDK中提供的。该工具通常用于Mac OS X开发和iPhone应用程序开发。Interface Builder提供了拖放面板以供开发人员将控件拖放到屏幕上。使用Interface Builder是一件非常纠结的事情，尤其对于那些具有Visual Studio背景的开发人员更是如此；它具有很多与Visual Studio内的设计器类似的内容，但是其工作方式和控件的设置方式却又完全不同。

使用Interface Builder完全是可选的，所有的控件都可以直接通过代码来使用。但是对于创建布局而言，它是一个有用的工具。 

Interface Builder直接集成到MonoDevelop中，双击任何.xib文件都可以自动基于选择的.xib文件打开Interface Builder。

在打开Interface Builder时，会出现几个不同的窗口，如图2-5所示。

图2-5

●     Library  这个窗口包含Objects、Classes和Media选项卡，其中包含着用户可以单击并拖到视图上的控件。

●     View  这个窗口是一个视图，可以单击不同的控件，并将其拖到该视图上。这使得我们可以按照所见即所得(WYSIWYG)的方式对用户界面进行布局。

●     Connections  在这个窗口中，可以设置控件之间的连接，使得我们能够通过程序对这些控件进行修改。如您所看到的一样，该窗口中还有另外3个选项卡。另外3个选项卡是Attributes、Size和Identity，通过这些选项卡，可以对控件细节进行修改。总体来讲，这个窗口就是所谓的查看器(Inspector)。

●     图2-5中的第4个窗口标题为Untitled，这是Interface Builder的主菜单，这个主菜单给出了视图中所有控件的分层视图。

后面几节将讨论可以使用的控件有哪些类型，包括通过Interface Builder使用的控件和仅通过代码使用的控件。

 

1  使用库中的控件

Library窗口包含大量可以在Interface Builder内使用的控件。这些控件也可以通过代码来调用；括号内的内容表示与该控件相对应的类。

●     控制器(UIViewController)  控制器是控制某种类型活动的控制器系列。

●     数据视图  数据视图通常用于向用户展示某种类型的信息。展示的控件有：

• 表视图(UITableView)  表视图以表列表的格式向用户展示数据。用户能够通过滚动栏浏览数据。通常，表视图中的一个单元格就是一整行(就是所谓的表视图单元格)。

• 表视图单元格(UITableViewCell)  对于表视图单元格，可以在表视图内对单元格定义和应用定制的外观、属性和行为。

• 图像视图(UIImageView)  图像视图向用户显示图像或动画。对于动画的情况，图像视图是作为一个UIImage数组而定义的。

•  Web视图(UIWebView)  Web视图在应用程序内向用户显示Web内容。

• 地图视图(MKMapView)  地图视图在应用程序内向用户显示地图内容。

• 文本视图(UITextView)  文本视图显示多行可编辑文本。

• 滚动视图(UIScrollView)  对于在单个窗口视图内无法完全显示的内容，滚动视图为显示这样的内容提供了一种方式。

• 拾取器视图(UIPickerView)  拾取器视图显示一个老*虎机样式的旋转轮。对于不熟悉MonoTouch的.NET开发人员来讲，这个控件在概念上类似于下拉列表框。

• 日期拾取器(UIDatePicker)  日期拾取器是一组旋转轮，通过它可以选择日期和时间。

●     输入对象与值对象(Inputs & Values)  Inputs & Values窗口提供了一组UI控件为用户提供输入方式。这些控件包括：

• 分段控件(UISegmentedControl)  分段控件可以看作是一个按钮，该按钮的不同部分表现为单独的控件。

• 文本标签(UILabel)  文本标签是显示文本的控件。

• 圆角矩形按钮(UIButton)  圆角矩形按钮控件实现了触摸事件。触摸事件类似于.NET中的“单击”事件。圆角矩形按钮等价于.NET中的按钮。

• 文本框(UITextField)  文本框控件允许用户通过虚拟键盘输入文本或数据。

• 开关(UISwitch)  开关控件允许用户切换用户界面上的值。从概念上讲，这个控件类似于复选框。

• 滑动栏(UISlider)  滑动栏控件允许用户输入一定范围值内的某个值。

• 进度视图(UIProgressView)  进度视图控件可以显示任务执行的进度。进度视图通常用于长时间执行的任务，向用户提供反馈。

• 活动指示器视图(UIActivityIndicatorView)  活动指示器视图控件提供任务当前运行的反馈。它并不显示任务的状态，只是显示任务正在运行。

• 页面控件(UIPageControl)  页面控件向用户提供应用程序中有其他页面的信息。

●     窗口、视图和栏  这些是Interface Builder和代码中可以使用的窗口、视图和栏。

• 窗口(UIWindow)  窗口包含多个视图，会首先在屏幕上显示。由于所有的视图都是在窗口中显示的，因此只能有一个窗口实例。

• 视图(UIView)  视图控件是一个矩形区域，可以放置控件和处理事件。

• 搜索栏(UISearchBar)  搜索栏控件是一个带有圆角边和搜索图标的文本框。其UI外观是为了向用户表明，这个字段可用于搜索。

• 搜索栏和搜索显示控制器(UISearchDisplayController)  搜索栏(Search Bar)和搜索显示控制器(Search Display Controller)是Search Bar控件、Bookmark按钮、Cancel按钮和显示搜索结果的表视图。

• 导航栏(UINavigationBar)  导航栏是支持按照分层进行内容导航的一个UI控件。

• 导航项(UINavigationItem)  导航项控件包含导航栏中导航项的相关信息。

• 工具栏(UIToolBar)  工具栏控件会在屏幕底部显示一个工具栏。工具栏控件支持工具栏内的工具栏项。

• 栏按钮项(UIBarButtonItem)  栏按钮项控件代表工具栏控件或导航栏内的一项。

• 灵活空间栏按钮(UIBarButtonItem)  灵活空间栏按钮控件代表工具栏内的空间量。

• 选项卡栏(UITabBar)  选项卡栏控件可以将选项卡栏显示在屏幕底部。选项卡栏控件可用于选项卡栏项的选择。

• 选项卡栏项(UITabBarItem)  选项卡栏项控件是选项卡栏控件内的一项。

2  设置插座变量 

为了能够使用拖到Interface Builder视图上的控件，需要为每个控件创建一个插座变量。在MonoTouch中，插座变量是一个类上的实例变量，该类分配给Interface Builder内定义的控件。该实例变量提供了一个接口，使得我们可以通过编程来访问该控件。为了说明这一点，您将使用一个基于iPhone窗口的项目，并在Interface Builder中打开MainWindows.xib文件。

在大多数情况下，您不会希望在窗口中直接使用控件，而是使用作为子视图加入到窗口中的视图来连接控件。这是因为在实际的应用程序中，您只是使用窗口来添加视图，而不是使用窗口来显示控件。

(1) 首先，从Library Objects选项卡中拖动一个圆角矩形按钮到窗口上。为了设置按钮的文本，可以在按钮中间双击，然后输入文本。结果看起来如图2-6所示。

图  2-6

 

(2) 即使按钮控件位于窗口上，如果没有为其创建插座变量，那么也不能使用这个控件。在库中，选择Classes选项卡，然后选择AppDelegate选项(这就是您需要用于访问新建按钮的类)。

(3) 在Library窗口的下方，现在有一个由4个选项卡组成的列表：Inheritance、Definitions、Outlets和Actions。现在，需要选择Outlets选项卡，单击+按钮加入一个新的插座变量。将该插座变量命名为myButton，按Enter键保存修改结果。可以选择输入一种类型，但是可以保留这个类型为“id”。得到的结果看起来应该如图2-7所示。

图  2-7

(4) 您可能已经注意到，还没有告诉这个插座变量哪个按钮将与之关联。为此，需要使用Inspector窗口(位于图2-8中靠右边的窗口)来创建从AppDelegate类插座变量到窗口中实际按钮的连接。首先从Interface Builder的主窗口(从左边开始数的第三个窗口)中选择AppDelegate。然后，选择Inspector窗口中的Connections选项卡(带有蓝色图标和白色箭头)。插座变量会在此显示；然后需要单击并将其从Inspector插座变量拖到窗口上的实际按钮(创建Inspector插座变量与实际按钮的连接)。图2-8显示了这个过程。

图  2-8

现在已经创建好这个连接，并且已经设置好这个插座变量，接下来可以在代码中使用它。

 

3  设置动作

动作是一条消息，当特定的事件发生时就会激活这条消息。这与.NET内事件的概念非常类似。MonoTouch所做的工作就是通过激活该事件的控件的强类型部分方法来公开这些动作。在下一节中可以了解到更多的相关知识。

 

设置动作的方式类似于设置插座变量，通过使用库类部分来创建一个新的动作，然后将这个动作连接到一个按钮的方法上。

 

(1) 与前面创建插座变量一样，创建一个新动作，并赋予它一个名称。

 

(2) 接着，与插座变量的情况一样，选择Actions选项卡，单击+按钮添加一个新动作。应该将这个动作取名为buttonPressed，从而与示例图像一致。Interface Builder会自动在该方法之后增加一个分号，用于表示这是Objective-C中的一个方法，但是，在使用Mono Touch时，保留这个分号并无妨碍。

 

(3) 您应该注意到，在AppDelegate Inspector Connections选项卡内，有一个名为Received Actions的新区域，其中包含着这个新动作。单击并将这个新动作拖到该按钮上。这一次，当释放鼠标左键后，应该注意到会出现该按钮可用的一系列动作。作为示例，请参见图2-9。

 

需要与按钮关联的动作可能是TouchUpInside方法。这意味着用户触摸了按钮，并刚刚移开光标。

图  2-9

这就是在Interface Builder中关联一个动作所需的所有工作。