构建VillainTracker应用的GUI组件

# 构建VillainTracker应用的GUI组件 ## 1. 添加图像视图 在VillainTracker应用中，展示反派的面容是必不可少的。我们将使用`NSImageView`类的实例来显示反派图片，并通过Mac的拖放机制接收图片输入。具体操作步骤如下： 1. 回到对象库面板，在搜索字段中输入“image”。搜索结果中会有一个“Image Well”，它实际上就是`NSImageView`的实例。将其拖到窗口中，放置在之前添加的单选按钮矩阵的右侧。 2. 初始的图像视图尺寸较小，需要调整大小。打开尺寸检查器（快捷键⌥⌘5），可以看到图像视图的宽度和高度均为48，将它们都修改为96，窗口中的控件大小会随之改变。 3. 为了让用户能够将图像拖入该视图，需要打开属性检查器（快捷键⌥⌘4），勾选“Editable”复选框。 4. 拖动图像视图，调整其位置。此时会出现蓝色的参考线，确保该控件与左侧的单选按钮矩阵具有相同的垂直高度。将它们并排排列，然后复制一个标签，放置在图像视图的左上方，并将其标题改为“Appearance:”。 ## 2. 添加矩阵复选框 为了让用户勾选反派的能力和技能，我们将添加一系列复选框。同样使用矩阵来组织这些复选框，具体操作如下： 1. 再次打开对象库，在搜索字段中输入“check”，将搜索结果中的“Check Box”拖到窗口中。此时窗口中会出现一个配置为复选框的`NSButton`。 2. 我们需要四个这样的复选框并排列成矩阵。在Interface Builder模式下，有一个便捷的快捷方式：选择该复选框，然后在菜单中选择“Editor ➤ Embed In ➤ Matrix”，复选框就会被包裹在矩阵中。 3. 按住Option键，点击矩阵底部中心的调整大小手柄，向下拖动直到出现四个复选框。 4. 选择矩阵本身（而不是矩阵内的复选框），打开属性检查器（快捷键⌥⌘4）。确保在检查器顶部显示的名称为“Matrix”，而不是“Button Cell”。将“Mode”弹出按钮设置为“Highlight”。 5. 在复选框中填入以下能力列表：“Evil Genius”、“Mind Reader”、“Nigh - invulnerable”、“Weather Control”。在设置这些值时，可能会不小心勾选或取消勾选复选框，不用担心，这些复选框的状态将在代码中设置。 6. 为了让按钮的完整文本可见，拖动矩阵右侧中心的调整大小手柄，直到所有文本都能显示出来。 7. 为每个复选框设置标签，就像为选择主要动机的单选按钮设置标签一样。选择“Evil Genius”单元格，打开属性检查器（快捷键⌥⌘4），将标签设置为0；选择“Mind Reader”单元格，将标签设置为1，以此类推，最后将“Weather Control”复选框的标签设置为3。 ## 3. 配置弹出按钮 使用弹出按钮让用户从预定义列表中选择反派的力量来源，具体步骤如下： 1. 再次打开对象库窗口，在搜索字段中输入“popup”，将搜索结果中的“Pop Up Button”拖到窗口中，放置在之前添加的复选框矩阵的下方。 2. 点击并双击新的弹出按钮，可以看到默认的可选值列表。双击第一个值，将其文本改为“Innate”，依次修改其他值为“Freak Accident”、“Superhero Action”和“Other”。由于默认的弹出按钮只有三个值，输入第三个值后，点击其中一个值，按下⌘D复制，然后输入最后一个值。 3. 复制一个标签，放置在弹出按钮的左侧，将其标题改为“Source of Powers:”。 ## 4. 插入文本视图 最后添加一个文本视图，用于编辑关于反派的自由格式笔记。操作步骤如下： 1. 在Interface Builder画布中，拖动窗口轮廓的调整大小手柄，向下拖动使窗口变大。调整后，可能需要重新定位一些字段。可以通过Shift键点击或拖动选择矩形来选择多个元素进行移动。 2. 有足够空间后，在对象库面板的搜索字段中输入“text view”，将搜索结果中的文本视图拖到窗口中，放置在其他元素的下方。调整其大小以填充大部分可用空间。 ## 5. 进行逻辑分组 目前所有控件都已布局在窗口中，但界面看起来比较杂乱，缺乏逻辑分组。我们可以使用`NSBox`类将相关控件分组，具体操作如下： 1. 选择窗口左上角的前五个控件及其所有标签。最简单的方法是点击窗口左上角，在窗口的关闭/最小化/最大化控件下方，拖动选择框选择所有需要的视图。然后在菜单中选择“Editor ➤ Embed In ➤ Box”，这些视图将被一个带有深色灰色背景和圆角的盒子包围。双击盒子顶部的文本标签，将其改为“Basic Information”。 2. 对于“Primary Motivation”部分，先删除现有的标签，然后选择单选按钮矩阵，再次选择“Editor ➤ Embed In ➤ Box”，将单选按钮包含在盒子中，并将盒子的标签改为“Primary Motivation”。 3. 对于头像部分，同样先删除现有标签，然后通过菜单创建盒子，并将盒子的标签改为“Appearance”。 4. 选择“Source of Powers”弹出按钮及其标签，以及能力复选框矩阵。可以通过点击窗口右上角附近的背景，向下和向左拖动选择框来选择这些元素。使用菜单将这些视图放入盒子中，并将盒子标题设置为“Powers and Abilities”。 5. 选择为反派笔记属性创建的文本视图，将其放入一个单独的盒子中，标题设置为“Notes”。 创建完这些盒子后，它们可能会重叠或位置不佳。可以利用Xcode的蓝色参考线来调整它们的位置： 1. 点击第一个盒子（“Basic Information”）的深色背景（但不要点击控件或标签），开始拖动整个盒子。移动时会出现蓝色参考线，帮助我们将盒子相对于其他盒子或窗口本身进行定位。 2. 将“Primary Motivation”盒子与上方盒子的左边缘对齐，并向下偏移几个像素。 3. 将“Appearance”盒子与“Primary Motivation”盒子垂直对齐，与“Basic Information”盒子的右边缘水平对齐。 4. 将“Powers and Abilities”盒子放置在已调整好的盒子的右侧，将“Notes”盒子放置在其他盒子的下方。如果在移动过程中空间不足或窗口过大，可以适当调整窗口大小。 ## 6. 窗口大小调整 虽然窗口布局看起来不错，但还需要处理用户调整窗口大小的情况。目前的窗口布局在垂直调整大小时，所有控件会保持原位，但垂直缩小到一定程度时，某些控件可能会不可见，并且无法水平调整窗口大小。为了简化操作，我们将使窗口不可调整大小，具体步骤如下： 1. 在Interface Builder Editor画布中，选中VillainTracker窗口，选择尺寸检查器（快捷键⌥⌘5）。确保当前大小、最小大小和最大大小的宽度和高度值相同。 2. 勾选“Minimum Size”和“Maximum Size”约束的复选框。 3. 将“Notes”盒子移动到右下角的空白处，调整其内部的`NSTextView`大小以适应新的边界和边距。如果需要，还可以微调其他盒子的大小，使它们整齐排列。最后，确保保存nib文件。 ## 7. 连接VillainTrackerAppDelegate类 在创建VillainTracker项目时，Xcode创建了一个名为`VillainTrackerAppDelegate`的类。我们将在这个类中添加代码，将其连接到用户界面控件，使其成为模型 - 视图 - 控制器意义上的“控制器”。主要通过添加出口（outlets）和动作（actions）来实现，具体如下： ### 7.1 出口和动作的概念 - 出口是一种特殊标记的属性或实例变量，用于控制器访问GUI中的对象，以便在需要时设置和检索视图对象中的值。 - 动作是任何符合特定签名的方法，接受一个类型为`id`的单个参数并返回`void`。在源代码中，动作的返回类型通常标记为`IBAction`，实际上`IBAction`与`void`是相同的。 ### 7.2 根据反派属性映射GUI类 假设我们有一份设计文档，指定了几个反派属性及其类型。根据这些类型和用途，我们可以将每个属性映射到合适的GUI类，如下表所示： | Attribute Name | Type | View Class | | --- | --- | --- | | Name | string (freeform) | NSTextField | | lastKnownLocation | string (freeform) | NSTextField | | lastSeenDate | date | NSDatePicker | | swornEnemy | string (freeform, but with list to choose from existing) | NSComboBox | | primaryMotivation | string (from predefined list) | NSMatrix (containing radio buttons) | | Powers | array of strings (from predefined list) | NSMatrix (containing checkboxes) | | powerSource | string (from predefined list) | NSPopUpButton | | Evilness | number (0–10) | NSLevelIndicator | | Mugshot | image | NSImageView | | Notes | string (perhaps lengthy) | NSTextView | ### 7.3 添加出口 为每个GUI控件添加一个出口，使用特定的命名约定：属性名加上后缀“View”。添加出口的步骤如下： 1. 点击主Xcode窗口工具栏右侧编辑器图标组中的“Assistant”按钮，将nib文件打开在Xcode的左侧，代码编辑器打开在右侧。如果需要，可以在“View ➤ Assistant Editor”中选择助手窗口的位置。打开`VillainTrackerAppDelegate.h`文件。 2. 点击标签为“Name:”旁边的文本字段，按住Control键拖动到助手编辑器中的代码区域，在现有属性“window”下方拖动出一条蓝色线。当到达正确位置时，会出现一个小标志，指示插入出口或动作。释放鼠标按钮，会出现一个小上下文窗口，在这里可以命名出口。按照命名约定，将该字段的出口命