23、应用开发：自定义类使用与用户界面创建-优快云博客

本文链接：https://blog.youkuaiyun.com/c2d3e4f/article/details/155469465

应用开发：自定义类使用与用户界面创建

1. 自定义类的使用

在创建好自定义类并将其与模型中的实体关联后，就可以直接使用它们的属性和方法。以下是具体的代码示例：

album.title = @"Default";
}

return album;
}
// used by the list view.
- (NSImage*) image {
    return [NSImage imageNamed:NSImageNameFolder];
}
@end

NSManagedObjectContext* context = self.managedObjectContext;
CBPhoto* photo;
photo = [NSEntityDescription insertNewObjectForEntityForName: @"Photo"
                                      inManagedObjectContext: context];
photo.filePath = @"/Library/Desktop Pictures/Nature/Earth.jpg";
CBAlbum* album;
album = [NSEntityDescription insertNewObjectForEntityForName: @"Album"
                                      inManagedObjectContext: context];
album.title = @"Photos of Earth";
photo.album = album;
NSLog( @"photo title: %@", photo.filePath );
NSLog( @"album title: %@", album.title );
NSLog( @"Photos in '%@': %lu", album.title, album.photos.count );

运行上述代码后，控制台输出结果如下：

photo title: /Library/Desktop Pictures/Nature/Earth.jpg
album title: Photos of Earth
Photos in 'Photos of Earth': 1

2. 创建用户界面

创建好所有类后，接下来需要设置界面，主要有以下三个步骤：
1. 移除 Xcode 模板提供的默认窗口。因为已经添加了自己的窗口 XIB 和窗口控制器，所以不再需要默认窗口。
2. 设置主窗口的 UI。主窗口将承载存储在视图 XIB 中的每个自定义视图，但窗口本身也有一些控件。
3. 设置每个视图 XIB 的 UI。目前每个视图都是空的，需要在其中添加一些控件，使其变得有用。还需要将视图绑定到 NSManagedObjectContext 以从持久存储中加载数据。

2.1 移除默认窗口

这一步很简单，具体操作如下：
1. 在 Xcode 侧边栏中双击 MainMenu.xib ，在 Interface Builder 中打开它。
2. 选择窗口图标，然后按 Delete 键将其移除。

移除默认窗口后， MainMenu.xib 文件的外观会发生变化。

2.2 添加专辑菜单

在 MainMenu.xib 文件中还需要完成一项操作，具体步骤如下：
1. 双击主菜单图标打开它。
2. 在库中搜索“submenu”，将一个 NSMenuItem 拖到菜单中，放置在“View”菜单之后、“Window”菜单之前。
3. 双击该菜单并将其重命名为“Album”。
4. 单击“Album”菜单以显示其中的菜单项，双击菜单项并将其重命名为“New Album”。
5. 选择该菜单项，按 Command - 1 打开属性检查器，在“Key Equivalent”框中输入 Command - N，将该菜单命令绑定到该快捷键。
6. 点击“First Responder”，调出属性检查器，点击加号按钮添加一个新动作，输入 newAlbum: 作为动作名称。
7. 从“New Album”菜单项 Control - 拖动到“First Responder”，选择 newAlbum: 动作。

完成上述操作后，保存文件并关闭它，然后切换回 Xcode。

2.3 创建主窗口界面

在 Xcode 侧边栏中双击 CBMainWindow.xib ，在 Interface Builder 中打开它，然后按以下步骤操作：
1. 设置文件所有者类 ：选择文档窗口中的“File’s Owner”图标，按 Command - 6 调出身份检查器，在“Class”字段中输入 CBMainWindow ，这样窗口控制器就可以管理这个 XIB。
2. 建立连接 ：从“File’s Owner” Control - 拖动连接到窗口图标，选择 window 输出口；再从窗口图标 Control - 拖动到“File’s Owner”，选择 delegate 输出口。
3. 设置窗口大小 ：
- 点击窗口图标，调出大小检查器（Command - 3），在“Minimum Size”部分点击“Use Current”，将窗口的当前大小设置为最小值。
- 如果需要设置窗口的初始大小和位置，可以将原型窗口放置在所需位置，调整到所需尺寸，然后在“Content Frame”部分点击“Use Current”，保存文件以应用更改。
- 从“Content Border”弹出菜单中选择“Large Bottom Border”，在窗口底部添加一个可拖动的控制表面。
- 按 Command - 1 切换到属性检查器，将窗口重命名为“Gallery”。
4. 添加控件 ：
- 按 Command - Shift - L 打开库窗口，搜索“segment”，将一个 NSSegmentedControl 实例拖到窗口右下角，位于之前添加的内容边框内。
- 选中该控件，调出大小检查器，在“Autosizing”部分禁用顶部和左侧支柱，启用底部和右侧支柱，使控件固定在窗口右下角。
- 切换到属性检查器，从“Style”弹出菜单中选择“Textured Rounded”。
- 在属性检查器中，从分段弹出菜单中选择“Segment 0”，在“Image”组合框中输入（或选择） NSIconViewTemplate ；选择“Segment 1”，输入 NSQuickLookTemplate 作为图像名称；切换到“Segment 2”，在“Image”字段中输入 NSListView Template 。
- 再次打开库窗口，搜索“label”，将一个名为“Label”的 NSTextField 实例拖到窗口左下角。在大小检查器中，从“Size”弹出菜单中选择“Small”，在“Autosizing”部分禁用顶部支柱，启用底部支柱，使标签固定在窗口左下角。
5. 设置绑定 ：
- 在库中搜索“array controller”，将一个 NSArrayController 实例拖到 XIB 文档窗口，选中该数组控制器，单击其名称并将其更改为“Photos”。
- 按 Command - 1 切换到属性检查器，从“Mode”弹出菜单中选择“Entity”，在“Entity Name”字段中输入“Photo”，启用“Prepares Content”复选框。
- 按 Command - 4 打开绑定检查器，在“Parameters”部分，将“Managed Object Context”绑定到“Application”，模型键路径为 delegate.managedObjectContext 。
- 选择窗口左下角的文本字段标签，打开绑定检查器，在“Value With Pattern”部分，打开“Display Pattern Value1”，将其绑定到“Photos”，控制器键为 arrangedObjects ，模型键路径为 @count ，在“Display Pattern”字段中输入 %{value1}@ photos 。
6. 连接输出口和动作 ：
- 右键单击“File’s Owner”调出其 HUD 窗口，将 viewSelectionControl 输出口连接到窗口右下角的分段控件。
- 从分段控件 Control - 拖动到“File’s Owner”，选择 -viewSelectionDidChange: 动作。

完成上述操作后，保存并关闭 XIB 文件，然后切换回 Xcode。

2.4 创建浏览器界面

在 Xcode 侧边栏中双击 CBBrowserView.xib ，在 Interface Builder 中打开它，按以下步骤操作：
1. 设置文件所有者类 ：选择文档窗口中的“File’s Owner”图标，按 Command - 6 调出身份检查器，在“Class”字段中输入 CBBrowserView ，使视图控制器能够管理这个 XIB。
2. 建立连接 ：从“File’s Owner” Control - 拖动连接到自定义视图图标，选择 view 输出口。
3. 设置专辑表格 ：
- 从库中拖出一个 NSTableView 并放置到视图上，调整其大小，使其填满窗口的整个高度和大约三分之一的宽度。
- 确保选中表格的封闭滚动视图，通过确认属性检查器的标题为“Scroll View Attributes”来验证，如果不是，则按 Control - Command - Shift - 点击表格，选择“Bordered Scroll View”。
- 选中滚动视图，切换到大小检查器，启用顶部、左侧和底部支柱，启用垂直弹簧，使视图的高度随窗口调整，宽度保持不变并固定在窗口左侧。
- 选择滚动视图内的表格视图，调出属性检查器，从“Highlight”弹出菜单中选择“Source List”，使用列步进控制器确保表格有两列。
- 选择表格标题视图，拖动列分隔线调整左侧列的宽度，使其刚好能容纳一个较小的图标。
- 在库窗口中搜索“image cell”，将一个 NSImageCell 实例拖到表格的第一列。
- 重新选择表格本身，切换到属性检查器，取消选中“Headers”复选框以隐藏表格列，选择右侧列中的文本字段单元格，打开大小检查器，从“Size”弹出菜单中选择“Small”。
4. 设置图像浏览器 ：
- 在库窗口中搜索“image browser”，将一个 IKImageBrowserView 实例拖到自定义视图上，选择“Layout → Embed Objects In → Scroll View”。
- 打开属性检查器，启用“Automatically Hide Scrollers”复选框。
- 切换到大小检查器，启用所有弹簧和支柱，使图像浏览器随窗口在两个维度上调整大小，将浏览器视图放置在表格视图的右侧边缘，并调整其大小以填充自定义视图的剩余空间。
5. 设置绑定 ：
- 向 XIB 文档窗口添加两个 NSArrayController 对象，选择其中一个，单击其标题进行编辑，将其命名为“Albums”，用同样的方法将另一个数组控制器重命名为“Photos”。
- 选择“Albums”数组控制器，打开属性检查器，从“Mode”弹出菜单中选择“Entity”，在“Entity Name”字段中输入“Album”，启用“Prepares Content”复选框。
- 按 Command - 4 切换到绑定检查器，在“Parameters”部分，将“Managed Object Context”绑定到“Application”，模型键路径为 delegate.managedObjectContext 。
- 选择“Photos”数组控制器，按 Command - 1 打开属性检查器，从“Mode”弹出菜单中选择“Entity”，在“Entity Name”字段中输入“Photo”，启用“Prepares Content”复选框。
- 按 Command - 4 切换到绑定检查器，在“Controller Content”部分，将“Content Set”绑定到“Albums”（确保绑定的是“Content Set”，而不是“Content”或“Content Array”），控制器键为 selection ，模型键路径为 photos 。
- 在“Controller Content Parameters”部分，将“Sort Descriptors”绑定到“File’s Owner”，模型键路径为 imagesSortDescriptors 。
- 在“Parameters”部分，将“Managed Object Context”绑定到“Application”，模型键路径为 delegate.managedObjectContext 。
- 在自定义视图中，选择左侧的图像表格列，打开绑定检查器，将“Value”绑定到“Albums”，控制器键为 arrangedObjects ，模型键路径为 image 。
- 选择右侧的文本表格列，将“Value”绑定到“Albums”，控制器键为 arrangedObjects ，模型键路径为 title 。
- 选择图像浏览器视图，打开绑定检查器，将“Content”绑定到“Photos”，控制器键为 arrangedObjects 。
6. 连接输出口 ：
- 右键单击“File’s Owner”图标，将 albumsArrayController 和 imagesArrayController 输出口分别连接到“Albums”和“Photos”数组控制器。
- 将 albumsTable 输出口连接到表格视图，将 imageBrowser 输出口连接到图像浏览器视图。

完成上述操作后，保存并关闭 XIB 文件，然后切换回 Xcode。

以下是创建用户界面的流程图：

graph TD;
    A[创建用户界面] --> B[移除默认窗口];
    A --> C[添加专辑菜单];
    A --> D[创建主窗口界面];
    A --> E[创建浏览器界面];
    B --> B1[打开MainMenu.xib];
    B --> B2[选择窗口图标并删除];
    C --> C1[打开主菜单];
    C --> C2[添加NSMenuItem];
    C --> C3[重命名菜单和菜单项];
    C --> C4[设置快捷键和动作];
    D --> D1[设置文件所有者类];
    D --> D2[建立连接];
    D --> D3[设置窗口大小];
    D --> D4[添加控件];
    D --> D5[设置绑定];
    D --> D6[连接输出口和动作];
    E --> E1[设置文件所有者类];
    E --> E2[建立连接];
    E --> E3[设置专辑表格];
    E --> E4[设置图像浏览器];
    E --> E5[设置绑定];
    E --> E6[连接输出口];

3. 创建编辑器视图界面

编辑器视图界面相对简单，因为大部分工作由 ImageKit 完成。在 Xcode 侧边栏中双击 CBEditorView.xib ，在 Interface Builder 中打开它，按以下步骤操作：
1. 设置文件所有者类 ：选择文档窗口中的“File’s Owner”图标，按 Command - 6 调出身份检查器，在“Class”字段中输入 CBEditorView 。
2. 建立连接 ：右键单击“File’s Owner”图标调出其 HUD 窗口，将 view 输出口连接到自定义视图图标。
3. 添加图像视图 ：
- 在库中搜索“image view”，将一个 IKImageView 实例拖到自定义视图上，调整其大小以填充整个视图。
- 选中图像视图，调出大小检查器，激活所有弹簧和支柱，使视图随窗口调整大小。
4. 连接输出口 ：右键单击“File’s Owner”，将 imageView 输出口连接到添加的图像视图。

完成上述操作后，保存并关闭 XIB 文件，然后切换回 Xcode。

3.1 操作步骤总结

步骤	操作内容
1	设置文件所有者类为 `CBEditorView`
2	连接 `view` 输出口到自定义视图图标
3	添加 `IKImageView` 并调整大小，激活弹簧和支柱
4	连接 `imageView` 输出口到图像视图

4. 创建列表视图界面

在 Xcode 侧边栏中双击 CBListView.xib ，在 Interface Builder 中打开它，按以下步骤操作：
1. 设置文件所有者类 ：选择文档窗口中的“File’s Owner”图标，按 Command - 6 调出身份检查器，在“Class”字段中输入 CBListView 。
2. 建立连接 ：从“File’s Owner” Control - 拖动连接到自定义视图图标，选择 view 输出口。
3. 添加表格视图 ：
- 在库中搜索“table view”，将一个 NSTableView 拖到自定义视图上，暂不调整大小。
- 选择表格视图（在滚动视图内），打开属性检查器，将列数增加到 3。
- 重新定位并调整表格视图的大小，使其填充整个自定义视图。
4. 设置滚动视图 ：选择滚动视图图标，打开大小检查器，激活所有弹簧和支柱，使视图随窗口调整大小。
5. 重命名表格列 ：双击表格列，从左到右依次命名为“Image”、“Album”和“File Path”。
6. 添加图像单元格 ：在库中搜索“image cell”，将一个 NSImageCell 对象拖到第一列。
7. 设置绑定 ：
- 从库中拖出一个 NSArrayController 并放到 XIB 文档窗口，将其重命名为“Photos”。
- 选择数组控制器，打开属性检查器，从“Mode”弹出菜单中选择“Entity”，在“Entity Name”字段中输入“Photo”，启用“Prepares Content”复选框。
- 按 Command - 4 打开绑定检查器，在“Parameters”部分，将“Managed Object Context”绑定到“Application”，模型键路径为 delegate.managedObjectContext 。
- 在表格中选择最左侧的图像列，打开绑定检查器，将列的“Value”绑定到“Photos”，控制器键为 arrangedObjects ，模型键路径为 largeThumbnail 。

完成上述操作后，保存并关闭 XIB 文件，然后切换回 Xcode。

4.1 操作步骤表格

步骤	操作内容
1	设置文件所有者类为 `CBListView`
2	连接 `view` 输出口到自定义视图图标
3	添加 `NSTableView` 并调整列数和大小
4	设置滚动视图弹簧和支柱
5	重命名表格列
6	添加 `NSImageCell` 到第一列
7	添加并设置 `NSArrayController` 绑定

以下是创建编辑器视图和列表视图界面的流程图：

graph TD;
    F[创建编辑器视图界面] --> F1[设置文件所有者类];
    F --> F2[建立连接];
    F --> F3[添加图像视图];
    F --> F4[连接输出口];
    G[创建列表视图界面] --> G1[设置文件所有者类];
    G --> G2[建立连接];
    G --> G3[添加表格视图];
    G --> G4[设置滚动视图];
    G --> G5[重命名表格列];
    G --> G6[添加图像单元格];
    G --> G7[设置绑定];

综上所述，通过以上一系列步骤，完成了自定义类的使用以及用户界面的创建，包括移除默认窗口、添加专辑菜单、设置主窗口界面、创建浏览器界面、编辑器视图界面和列表视图界面等操作，每个步骤都有明确的操作内容和代码设置，按照这些步骤可以逐步构建出一个完整的应用程序界面。