Interface Builder 3.0 简介

由于本文较长,所以在此先给出本文相应的 PDF 以供下载。

于去年 10 月 26 日上市的 Mac OS X 10.5 ( a.k.a Leopard )中加强了对 Ruby on Rails、Python、Perl 等 Scripting 语言的官方支持1、更新的 Scripting Bridge ( 这一项使得开发人员可以用上述编程语言编写原生 Mac 程序)以及丰富的全新或改进了的框架 ( AppleScript 2.0, Core Animation, PubSub, PDF Kit, ImageKit, QT Kit, Quartz 2D, Core Image, Core Data…the list will go on for about a couple of miles ! ^o^)。相信所有这些将会吸引越来越多的开发人员迁移至 Mac 平台,更何况 Apple 提供的开发工具是完全免费的,购买 Mac 随机附带的系统安装盘上就有。而这决不是猜测,大家只需查下去年 WWDC 上教主公布的 Apple Developer Connection 的注册会员数就知道了。将来这样的开发人员与 Interface Builder 打交道的机会决不会少。

鉴于国内有关 Mac 开发的文档不足,而且大多数人都认为开发人员的英语水平都还过得去,阅读技术文档不会有多少障碍。但我个人认为还是阅读用自己母语写的文档更容易,也更亲切。所以我决定自己动手丰衣足食。

Interface Builder 3 icon今天先从相对而言较简单的 Interface Builder,简而言之,开发人员将用此工具设计程序的图形用户界面的大部分。之所以说是大部分是因为图形用户界面还可用代码定义,在特殊情况下需要借助代码完成图形用户界面的设计。下面为该工具的图标,左侧为 Interface Builder 3.0 所采用的新图标,右侧为 3.0 以前版本所用图标。大家可以明显看到新图标更为细腻,通常 Apple 将这一点用于指示程序在较大程度上的改进。那 Interface Builder 为像你我一样的业余爱好者或是专业开发人员带来了哪些功能上的改进和新功能呢?Let’s find out, shall we ?!

Interface Builder 2 icon

首次打开 Interface Builder 3.0 将显示模板选择对话框,如右图所显。此处并无多大改变,只是图标的改进。

Default Application nib Document Window

下图显示的是选择 “应用程序” 模板所得结果。

nib Document Window Explained

这样新建的界面文件包含下列元素:

  • File’s Owner:该元素是载入 nib 文件时将提供的对象的替身。
  • First Responder:典型情况下,该元素为用户界面中用户通过鼠标或键盘选择或激活的元素。它通常是整个反应链中第一个接受事件或用户操作信息的元素。
  • Application:
  • MainMenu:程序菜单

Window:程序主窗口。通常的作法是将相关界面保存在同一文件中,相关度不大的界面放入另一文件中。比如,将 程序主窗口 和 使用偏好 的界面分别保存在两个文件中。这样作的好处在于仅在需要时才调用相关界面文件,提高程序性能。

如下两幅图展示的是界面文件窗口的另两种视图模式:
Document Window Hierarchy Mode

Document Window List Mode
(由于添加了新加入的 NSToolbar 元件,所以在主窗口,即 Window 的视图层次中可以看到 Toolbar。)

界面文件信息窗口如下图所示。它显示相关联项目名称、项目所在文件夹、界面文件格式、系统版本号、InterfaceBuilderKit 版本号,还可在此锁定界面文件(这一点在界面设计好后交付翻译人员时非常有用,可防止翻译人员意外地改变某些设置。)、目标系统版本设定,同时还会文件相关错误信息(例如:所设计界面中使用的元素为某一版本 Mac OS X 中添加的,而目标系统版本包括较早版本,这时此处即会给出提示)。

nib Document Info Window

检查器也几乎经历了一次大翻新。将不同部分间的切换方式由 Interface Builder 2.0 中的下拉菜单改为了常见的工具栏式。同时取消了 Sherlock 面板;新增加 Effects (动画效果)面板,用于所选对象的 Core Animation 或 Core Graphics 属性的相关设置;原有 Custom Class(自定义类)和 Accessibility(可访问性)两面板合并为 Identity 面板。

Attributes Attributes(属性)面板:

对 Cocoa 对象而言,这里设置的是选中界面元件的 类(Class)相关的属性。对 Carbon 对象而言,该面板所反映的是选中界面元件的 模糊类型组(Opaque Type Groupings)相关的属性。
Array Controller Attributes右图所示为一个 NSArrayController 相应的属性。其中 Object Controller 部分选择了 “类” 模式,并设置类名为 ToDo 。Controller 这类元件面向对象编程中的作用在于同步 View(视图,即图形用户界面)和 Modal(数据)。 Object Controller 部分的设置将被用于设置 Binding 5。有关 Cocoa Binding 的具体内容将在后续文章中介绍。

再展示一下 NSView 或其子类被选中时属性面板的样子。每个类相应的属性面板均不相同,大家可自行探索一下。

NSView Attributes

Effects Effects(动画效果)面板:

Core Animation 是 Leopard 中为开发人员提供了增强程序图形界面动态效果的便利。借助 Core Animation,开发人员将能为用户提供更为丰富让操作反馈。而且使用 Core Animation 的程序的性能几乎不会影响,因为 Core Animation 已考虑到双核处理器的优势,程序中调用它的那部分会在不同于主程序的处理器上运行。

Inspector Effects section Upper Half

Inspector Effects section Bottom Half

可供选用的设置包括不透明度、投影、Core Image Filter、转场效果(某一视图进入或退出界面的动态效果,包括立方体翻转、波纹、翻页等)。

Transition Effects Menu

下左图为选择预置动态效果时 Transition 部分的状态,而下右图为选择 Custom 时的状态。这部分大家也可自行探索一下。另外,此面板只对 Cocoa 有效。

Transition Preset Bars Swipe Selected

Effects Transition Custom

Identity Identity(元件身份)面板:

由以下两幅截图可见, Identity(元件身份)面板是用于设置元件所属“类”、与 Cocoa Binding 相关的 Action ( 元件在用户完成某项操作后应被触发的反应 ) 和 Outlet (元件上可接收来自与其相关联的元件所发出信息的端口 ) 7、以及 Accessibility (可访问性)相关的设置。这些设置的作用在于:在设计阶段或程序运行时识别特定对象。

Inspector Identity section Upper Half

Inspector Identity section Lower Half

其中的 Tool Tip 即为鼠标停留在程序界面某一元素上时显示的淡黄色背景的简短文字描述。有些时候程序界面中的图形不足以解释其作用,这时就要借助 Tool Tip 向用户说明之。

Size Size(尺寸)面板:

该面板用于设置界面元件的尺寸及其与上级元件的位置关系、缩放时的尺寸变化方式。Autosizing 部分设置的即是上级元件缩放时的尺寸变化方式:直线表示缩放时尺寸或边界距离不变;弹簧状线条表示尺寸或边界距离随缩放而变化。其余的设置基本无须解释。

Inspector Size section

Bindings Binding 面板:

所有设置均与 Cocoa Binding 相关。Cocoa Binding 是面向对象编程中 Modal-View-Controller 这一原理的进一步实现。

Connections Connection 面板:

用于设置所选界面元件的 Outlet 和 Action 与其它元件的连接关系。

Interface Builder 3.0 中所作出的最大的改变之一就是:现在用右键点击界面元件后会出现一黑色半透明面板,面板显示所点击元件的可用 Outlet、Action 以及 Accessibility 设置。

Inspector Connection sectionConnection PanelConnection Panel With View Hierarchy

用鼠标左击某 Outlet、Action 以及 Accessibility 设置右端的圆圈并拖拽时,鼠标将拖出一条很漂亮的蓝色线条,这时鼠标停留处的元件将被高亮显示,提示你如果在此处松开鼠标,该元件将被关联。关联后,相应 Connection 右端圆圈由空心变为实心, 相应 Connection 的显示也分为两部分 ── Connection 名称和被关联的元件名称。同时,左半部分的左端显示一叉状图形,点击它即可取消关联;若是某一 Connection 关联了多个元件,则显示一个三角形,点击后可看到所有关联元件的名称。左右两部分间有一细线相连。

Connection Panel With Connection Line

接下来再介绍一下 Interface Builder 3.0 中加入的资源库:

Objects Library Default View

首次打开时显示的是 Objects(元件库),显而易见的是新的设计比先前的面板式设计,在新界面中查找想要用的元件更方便。所有元件均按功能及相关 API 分类、分组。你可用底部的搜索栏进行过滤。将分组列表和元件视图间的分隔栏向上拖动至某一位置时,分组列表将被显示为下拉菜单的形式。

Objects Library group menu

右图显示的是点击左下角按钮后出现的关联菜单。最上方的三项用于设置元件显示方式,分别为 仅图标、图标及名称、图标加描述。下方三幅截图从左到右依次对应这三种显示方式。第四项为 Show Group Banner(显示分组横幅)。3.0 中,你可自定义分组,将自己常用的元件集中到一起。最后四项随你所选或所在分组的性质而处于可用、不可用两种状态,因为预置的分组是不允许更改的。

Library View Options

Objects Library Icon Without Group Banner

Objects Library Icon Label Without Group Banner

Objects Library Icon Description Without Group Banner

Objects Library Icon Description View With Group Banner

在你用搜索栏进行过滤、或是在不同分组间切换时、亦或是在不同元件显示方式间切换时,你可注意到平滑过度效果:Fade Out 和 Fade In 。这是用 Core Animation 实现的。

此外,你还可将常用的自定义元件放入元件库以备后用。

Add Custom Objects Sheet

另一边是 Media(媒体库),提供了一些系统预置的图片和音频文件。由下左图可见在 Xcode Project 中添加的图片和音频文件也将显示于此,方便你在设计界面时调用。

Media Sources

System Media In Icon View

Posted in Apple, Develope, Leopard at January 29th, 2008. Trackback URI: trackback
Tags: , , , , , ,

No Responses to “Interface Builder 3.0 简介”

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>