用InterfaceBuilder设计用户界面

《用InterfaceBuilder设计用户界面》由会员分享，可在线阅读，更多相关《用InterfaceBuilder设计用户界面（25页珍藏版）》请在装配图网上搜索。

1、iOS 参考库 Apple Developer 搜索窗体顶端搜索 iOS 参考库 窗体底端Xcode 快速入门Companion File PDF § 目录 §This document set is best viewed in a browser that supports iFrames.下页上页 教程：用 Interface Builder 设计用户界面Interface Builder 是一个集成在 Xcode 中可视化的界面编辑器。您可以使用 Interface Builder 为 iOS 和 Mac OS X 下的应用程序设计界面。通过 Interface B

2、uilder 的图形化环境，您可以把窗口，视图，控制器，菜单以及其他可视化元素组合到一起。您可以排列这些元素，设置属性，建立它们之间连接关系，然后保存在一个叫作 nib 的资源文件里。Nib 文件保存您的对象，包括它们的配置和布局信息。这些内容在运行时被加载用来在您的程序中生成实际的对象。在本教程中，您将使用 Interface Builder 为一个简单的 Mac OS X 应用程序设计界面，这个应用程序的名字叫做 QCDemo，它的功能是查看 Quartz Composer compositions。Quartz Composer 是一个开发工具，能够处理和渲染图形数据。它的图形化编程环境

3、能帮您开发图形处理模块，也就是 compositions，您甚至不需要写一行关于图形的代码就能做到。注意：要动手完成这个教程，必须安装 Mac OS X v10.6.6 或以上版本以及 Xcode 4.0 或以上版本。使用 Interface Builder 创建用户界面当您完成这个教程时, QCDemo 窗口会如图2-1所示。这个窗口包含一个用来显示 composition 的视图，一个用来加载新 composition 的按钮，和一个用来切换播放/暂停的按钮。图 2-1  QCDemo 窗口 创建这个界面的过程中，您会接触到 Interface Builder 里一些经

4、常用到的功能。让我们一步步开始吧。创建查看器要做的第一件事是创建一个 Quartz Composer 查看器。1. 选择工程模板。a. 打开 Xcode，依次点击菜单 File > New > New Project。b. Mac OS X 下选择 Application。c. 选择 Cocoa Application 模板。d. 点击下一步。2. 设定新工程的一些选项。a. 将产品命名为 QCDemo。b. 指定公司标识 (或接受默认标识)。c. 确认没有设置其他选项。d. 点击下一步。3. 创建工程。a. 为新工程选择一个文件夹的位置。b. 确认 Source Control

5、未被设定。c. 选择创建。4. 添加 Quartz 框架到工程目标中。a. 在工程浏览器选择工程 QCDemo。b. 在工程编辑器中选择 Targets 下的 QCDemo。c. 在 Summary 面板，在 Linked Frameworks and Libraries 下点击 Add (+) 按钮。 d. 在列表中选择 Quartz.framework 并点击 Add 按钮。 (提示：在文本框中输入 quartz 可滤选列表。)5. 在代码中引入 Quartz 框架的头文件。a. 在工程浏览器中选中文件 QCDemoAppDelegate.h。b. 在代码编辑器中找到行 #import &

6、lt;Cocoa/Cocoa.h>。c. 在这一行后面增加一行 #import <Quartz/Quartz.h>。 在该教程的后面您还会不断地修改这个文件。6. 打开 Interface Builder 文件。a. 在工程浏览器中找到 nib 文件 MainMenu.xib。b. 点击 MainMenu.xib, 使它在 Interface Builder 编辑面板里打开。c. 依次点击 Xcode 的菜单栏 View > Navigators > Hide Navigator 使我们更加专注于 Interface Builder。d. 如果 Interface

7、 Builder 左侧未能像下图一样显示，点击左下角的铵钮切换到大纲视图。7. 设置 QCDemo 窗口的大小。a. 依次点击 Xcode 菜单 View > Utilities > Size Inspector。b. 在 Interface Builder 编辑器左边的大纲视图里，选择 QCDemo 的窗口。未被选中前，它不会出现在 Interface Builder 编辑器的画板里。c. 在 Size 查看器里, 设置窗口宽度为 480 高为 420。 输入完高度按一下回车键。d. 勾上 Minimum Size 选项。 e. 确认最小尺寸也设置为 480 x 420。8. 添

8、加一个 Quartz Composer 视图到 QCDemo 窗口。a. 确认 Object library 在 Size 查看器下方是可见的，否则点击菜单 View > Utilities > Object Library 让它出现。b. 在库下方的搜索框里输入 quartz composer。c. 从库里将 Quartz Composer 视图拖拽到 QCDemo 窗口。 9. 设置 Quartz Composer 视图的大小。a. 确认 Quartz Composer 视图处在选中状态 (Window QCDemo > View > View in the out

9、line view)。在 Interface Builder 有多种途径选中一个对象。如果它内嵌在另一个对象中，要选中它可以通过大纲视图，跳转条，或者在面板里直接点击。跳转条位于编辑面板的上方。b. 在 Size 查看器里，确认原点位于左下角，如图中所示。c. 确认 Show 设置为 Frame Rectangle。d. 设置视图的 X 位置为 0，Y 位置为 60。e. 设置视图宽为 480，高为 360。输完高度别忘记按回车。f. 设置视图的 autosizing control 为下图中所示。通过点击 autosizing behavior 中箭头和线，使它们都从点状线变为实线。10.

10、给 Quartz Composer 视图选择一个起初的 composition。a. 依次点击 Xcode 菜单 View > Utilities > Attributes Inspector.b. 在 Attributes 查看器中，点击 Load Compostion 按钮。c. 从 Systerm 文件夹中加载如下地址的 Quartz Composer composition：/System/Library/Screen Savers/Shell.qtzd. 该 composition 是 System Preferences 中的一个屏保。e. 勾选上 Start Play

11、ing Automatically。11. 模拟运行 QCDemo 的用户界面。Interface Builder 包含一个独立的程序，叫 Cocoa 模拟器。可以用它来模拟运行您的用户界面。 a. 点击菜单 Editor > Simulate Document 开启模拟器以显示composition。b. 试试放大 QCDemo 窗口观察一下 composition 会发生什么。随着您缩放 Quartz Composer 的视图 composition 会自动改变大小。 c. 按下 Command-Q 退出模拟器。 12. 编译运行 QCDemo。 a. 点击 Xcode 工具栏最左边

12、的Run按钮。b. 如果在编译前弹出是否保存文件的提示框，确认保存。c. 移动或改变窗口大小，确认程序运行正确。d. 按下 Command-Q 或者停止按钮，退出程序。添加暂停/播放按钮下一步是添加一个按钮，使得 Quartz Composer 视图能在暂停和播放状态来回切换。 1. 在界面上添加一个 push 按钮。 a. 确认 Object library 在 Size 查看器下方是可见的，否则点击菜单 View > Utilities > Object Library 让它出现.b. 在库下方的搜索框里输入 button。c. 从库中拖拽一个 push 按钮放到 QCDemo

13、 窗口下方的空白处。d. 利用横向和纵向的辅助线把按钮放置在窗口的右下角。2. 设置按钮属性。 a. 确认按钮处于选中状态，即两端各有一个小圆点。如果是按钮里面而不是按钮本身被选中了，圆点是不会出现的。这时要想选中按钮，先点击按钮外面任一地方，再选按钮。b. 依次点击菜单 View > Utilities > Attributes Inspector。c. 在属性查看器里，把按钮设置成 Toggle 类型。 d. 设置按钮两种状态下标题分别为 Play 和 Pause。别忘记最后按下回车。3. 设置按钮的自动缩放。a. 依次点击菜单 View > Utilities >

14、 Size Inspector。b. 在 Size 查看器，设置自动缩放属性，如下图所示。提示：如果您没看到自动缩放控件，请确认您是选中按钮本身而不是它的里面。4. 把按钮和 Quartz Composer 视图的 play:动作关联起来。这个动作是在 QCView 这个类中实现的。想了解更多这个类的信息，可以查看 QCView Class Reference。a. 在大纲视图里选择 Quartz Composer。 b. 点击菜单 View > Utilities > Connections Inspector。 c. 在 Connections 查看器，找到 Received

15、Actions 下的 play:动作。 d. 拖拽 play: 动作右边的小圆圈，把它和 Pause/Play 按钮连接起来，然后松开鼠标。 5. 测试运行 QCDemo 的界面。a. 点击 Editor > Simulate Document 开始测试。 b. 点击几下 Pause/Play 按钮，看看是不是按期望的方式起作用了。 c. 放大窗口，确认按钮的位置还在原来的角上。 d. 按下 Command-Q 退出测试。添加 Load 按钮下一步是添加一个按钮，使得用户可以选择加载另一个 composition。1. 在界面上添加另外一个 push 按钮。 a. 从库面板拖拽一个 pu

16、sh 按钮到 QCDemo 窗口下方空白的地方。 b. 利用横向和纵向辅助线把按钮放置在窗口的左下角。2. 设置按钮的属性。a. 确认窗口左下角的按钮被选中。b. 在属性查看器中，确认按钮的类型是 Momentary Push In。 c. 设置按钮的标题为 Load。3. 在 Size 查看器中，按照下图设置它的自动缩放属性。4. 测试运行 QCDemo 的用户界面。a. 点击 Editor > Simulate Document 开始测试。 b. 放大窗口，确认 Load 按钮的位置还在原来的角上。c. 点击 Load 按钮，看点击时是否高亮。 d. 按下 Command-Q 退出模

17、拟。连接动作和插座变量用户界面上的元素需要互相通讯，还要和代码连接起来用来和用户交互。您可以利用 Interface Builder 建立连接来指明消息怎么被发送和接收。 您在前面的步骤中已经把 Pause/Play 按钮和 Quartz Composer 视图中的 play: 方法连接在一起了。nib 文件也已经把主窗口通过插座变量连接到类 QCDemoAppDelegate 上。下一步需要做的就是把其它两个用户界面元素也和类 QCDemoAppDelegate 关联起来。 您需要把 Load 按钮连接到一个能加载 compostions 的动作方法上，您还需要把 Quartz Compos

18、er 视图连接到一个插座变量上，从而前面的动作方法可以利用该变量来完成工作。 当您直接往控制器的源代码建立连接的时候，Interface Builder 会自动往类中增加代码来支持这个连接。您要做的就是实现这些方法。 1. 设置工作区窗口。a. 点击 View > Utilities > Hide Utilities。 b. 点击 View > Editor > Assistant 打开辅助编辑器。如果编辑器出现在画板的下方，点击 View > Assistant Layout > Assistant Editors on Right。 c. 确认辅助编辑器

19、打开了文件 QCDemoAppDelegate.h。如果没有的话，利用编辑器的跳转条来显示这个文件。2. 从 Quartz Composer 视图建立一个插座变量连接到类 QCDemoAppDelegate。a. 按下 Control 键，从 Quartz Composer 视图往文件 QCDemoAppDelegate.h 属性声明位置的下方拖。 b. 在弹出的对话框中，指定 outlet 的名称为 qcView，类型为 QCView。c. 点击连接按钮，Interface Builder 会创建连接并往类 QCDemoAppDelegate 插入代码。下面这行代码会插入到 QCDemoAp

20、pDelegate.h 中：property (assign) IBOutlet QCView *qcView;d. 运行时，这个属性会被设置成视图 Quartz Composer 的地址。在这个教程的后面，您将在 QCDemoAppDelegate.m 添加的代码中用到这个属性。e. 按下 Control 键，再点击视图 Quartz Composer，它的连接窗口就会显示出来。这个窗口在外观和功能上和连接查看器很相似。 f. 确认在 Referencing Outlets 这一项里， 有 qcView 这个插座变量连接。 g. 点击关闭连接窗口。 3. 添加 Load 按钮到类 QCDem

21、oAppDelegate 的动作连接。a. 按下 Control 键，拖拽 Load 按钮到文件 QCDemoAppDelegate.h 中属性声明位置的下方。b. 设置连接类型为 Action，并指定名称为 loadComposition，类型为 id。 c. 点击连接按钮，Interface Builder 会创建连接并往类 QCDemoAppDelegate 插入代码。例如，Interface Builder 会在 QCDemoAppDelegate.h 中声明一个新的动作方法：- (IBAction)loadComposition:(id)sender;d. 另外，Interface

22、Builder 会在 QCDemoAppDelegate.m 中增加一个空的方法实现。您会在下一节添加必要的代码完成这个方法。e. 按下 Control 键点击 Load 按钮，显示它的连接窗口。f. 确认在 Sent Actions 这一项里， 有loadComposition: 这个动作连接。 g. 点击关闭连接窗口。 添加实现代码来完成应用您已经搭建好用户界面。为了让它工作，您只需要实现加载 composition 的方法即可。检查 Interface Builder 添加的代码 这一步的任务是检查一下 Interface Builder 在您创建连接中自动添加的代码。 1. 设置工作区

23、窗口。 a. 击 View > Editor > Standard。 b. 点击 View > Navigators > Project。 2. 在工程浏览器中选择文件 QCDemoAppDelegate.h。它应该如表单2-1显示的那样： 表单2-1  QCDemoAppDelegate 的头文件#import <Cocoa/Cocoa.h>#import <Quartz/Quartz.h> interface QCDemoAppDelegate : NSObject <NSApplicationDelegate>

24、; private NSWindow *window; QCView *qcView; property (assign) IBOutlet NSWindow *window;property (assign) IBOutlet QCView *qcView;- (IBAction)loadComposition:(id)sender; end3. 再选择文件 QCDemoAppDelegate.m，应该如表单2-2显示的那样： 表单2-2  QCDemoAppDelegate 的实现文件 #import "QCDemoAppDelegate.h" impleme

25、ntation QCDemoAppDelegate synthesize window;synthesize qcView; - (void)applicationDidFinishLaunching:(NSNotification *)aNotification / Insert code here to initialize your application - (IBAction)loadComposition:(id)sender end添加实现的代码最后一步就是添加加载 composition 的代码。 1. 在工程浏览器中，选择文件 QCDemoAppDelegate.m。 2.

26、在方法 loadComposition: 的大括号之间添加下面的代码： void (handler)(NSInteger); NSOpenPanel *panel = NSOpenPanel openPanel; panel setAllowed:NSArray arrayWithObjects: "qtz", nil; handler = (NSInteger result) if (result = NS) NSString * = panel URLs objectAtIndex:0 path; if (!qcView loadCompositionFrom) NSL

27、og("Could not load composition"); ; panel beginSheetModalForWindow:window completionHandler:handler; 测试 Load 按钮1. 编译运行 QCDemo 应用。 a. 点击运行。如果在编译前您被问到是否要保存文件，选择保存。 b. 点击 Load 按钮，会出现一个 Open 对话框。c. 在这个对话框里选择另外一个 Quartz Composer composition。比如，加载下面这个路径： /System/Library/Screen Savers/Arabesque.q

28、tz2. 按下 Command-Q 或点击 Stop 按钮来退出应用。下一步?现在您的工程已经完成了，是不是还有些意犹未尽呢？如果要想了解更多这里介绍的概念和任务，您可以阅读 Xcode 4 用户指南里关于设计用户界面的章节。下页上页 © 2011 Apple Inc. 保留所有权利。 （最后更新：2011-05-07）这篇文档对您有帮助吗？ 有 有一些不足 没有 访问 Apple 产品目录 (400-692-7753)，前往 Apple Store 零售店，或查找在你附近的 Apple 经销商 (800-810-2399)。§ 热点新闻 § 联系我们 Copyright © 2011 Apple Inc. 保留所有权利§ 使用条款 § 客户私隐政策 苹果开发者联盟 参考库 Xcode 快速入门25 / 25文档可自由编辑打印