Xamarin.Mac 中的情节提要 - 快速入门

在这个使用情节提要定义 Xamarin.Mac 应用用户界面的快速介绍中,我们先启动一个新 Xamarin.Mac 项目。 选择“Mac”>“App”>“Cocoa 应用”,然后单击“下一步”按钮:

Adding a new Cocoa App

使用 MacStoryboard 作为“应用名称”,然后单击“下一步”按钮

Setting the App Name

使用默认的“项目名称”和“解决方案名称”,然后单击“创建”按钮

The project and solution names

在“解决方案资源管理器”中,双击 Main.storyboard 文件将其打开,以便在 Xcode 的 Interface Builder 中进行编辑:

Editing the storyboard in Xcode Interface Builder.

如上所示,默认情节提要同时定义应用的菜单栏及其主窗口(包含“视图控制器”和“视图”)。 在我们的示例应用中,我们将创建一个 UI,该 UI 在两侧分别具有“主内容视图”和“检查器视图”

为此,我们需要先移除情节提要附带的默认“视图控制器”和“视图”,方法是在 Interface Builder 中选将其选中,然后按 Delete 键

Removing the default view controller

接下来,在“筛选器”区域中键入 split,选择“垂直拆分视图控制器”并将其拖动到 Design Surface 上

Searching for the split view controller

请注意,控制器自动包含了两个子“视图控制器”(及其相关视图),并连接到拆分视图的左侧和右侧。 若要将拆分视图绑定到其父窗口,请按 Ctrl 键,单击“窗口控制器”(“窗口控制器”框架中的蓝色圆圈)并将线条拖动至“拆分视图控制器”。 从弹出窗口中选择“窗口内容”

Setting the windows content view

这会使用 Segue 将两个界面元素绑定在一起:

The Segue between the window and the content

我们希望在“拆分视图”的左侧放置“文本视图”,并在调整“窗口”或“拆分视图”的大小时自动填充可用区域。 将“文本视图”拖动到附加至“拆分视图”的顶部“视图控制器”上,然后单击“单边锁定”自动布局约束(Design Surface 底部右侧的第二个图标)

Configuring the constraints

在这里,我们将单击约束弹出框顶部边界框周围的所有四个“I-Beam”图标,然后单击底部的“添加 4 个约束”按钮以添加所需约束

如果我们返回到 Visual Studio for Mac 并运行项目,请注意,“文本视图”会自动调整大小,以在调整“窗口”或拆分的大小时填充“拆分视图”的左侧:

An example of the app running, displaying text in the left pane of the Window.

由于我们将使用拆分视图的右侧作为“检查器”区域,因此我们希望其大小更小且可折叠。 返回到 Xcode 并编辑右侧的视图,方法是在 Design Surface 中选择它,然后单击“大小检查器”。 在此处输入 250 作为“宽度”

Setting the width

接下来,选择表示右侧的“拆分项”,设置更高的“保留优先级”,然后单击“用户可以折叠”复选框

Editing the holding priority

如果我们返回到 Visual Studio for Mac 并立即运行项目,请注意,右侧保持更小的大小,并且窗口大小已经过调整:

An example of the app running, displaying text in the larger left pane of the Window.

定义表示 Segue

我们将布置“拆分视图”的右侧,以充当所选文本属性的“检查器”。 我们将一些控件拖动到底部视图,以布置检查器的 UI。 对于最后一个控件,我们希望显示一个弹出框,以便用户可以从四个预设字符样式中进行选择。

我们将向“检查器”添加一个“按钮”,并向 Design Surface 添加一个“视图控制器”。 我们将调整“视图控制器”的大小,使其与“弹出框”的大小相同,并向其添加四个“按钮”。 接下来,我们在按住 Ctrl 键的同时单击“检查器视图”中的按钮,将其拖动到表示弹出框的“视图控制器”

Dragging to create a new segue in View Controller.

从弹出菜单中,我们将选择“弹出框”

Selecting the popover segue type from the View Controller.

最后,我们选择 Design Surface 中的 Segue,并将“首选边”设置为“左”。 然后,我们将线条从“定位点视图”拖动到希望弹出框附加到的“按钮”

Dragging to create a new segue by attaching the Anchor View to the Button.

如果我们返回到 Visual Studio for Mac,运行应用并单击“检查器”中的“无”按钮,将会显示弹出框

An example of the segue running, displaying the popover.

创建应用首选项

大多数标准 macOS 应用都提供一个首选项对话框,用户可在其中定义多个选项来控制应用的各个方面,例如外观或用户帐户

若要定义标准首选项对话框窗口,请先将“选项卡视图控制器”拖动到 Design Surface 上:

Editing the storyboard in Xcode by first dragging the Tab View Controller onto the Design Surface.

同样,这将自动附带两个附加的子“视图控制器”。 举例来说,我们将向每个视图添加一个居中显示的标签:

Setting the constraints

接下来,当用户选择“首选项...”菜单项时,我们希望显示“首选项”窗口。 从菜单栏中,选择“首选项”菜单项,按住 Ctrl 键的同时单击,将线条拖动至“选项卡视图控制器”

Dragging to create a segue

从弹出窗口中,我们将选择“模式”,以便此窗口显示为“模式对话框”

Selecting the modal segue type from the Action Segue menu.

如果我们保存更改,返回到 Visual Studio for Mac,运行应用并选择“首选项...”菜单项,将会显示新的“首选项”对话框

An example of the segue running, showing the new Preferences dialog box.

你可能会注意到,这看起来不像标准 macOS 应用首选项对话框窗口。 若要解决此问题,请在“解决方案资源管理器”的 Xamarin.Mac 应用的 Resources 文件夹中包含两个图像文件,并返回到 Xcode 的 Interface Builder

选择“选项卡视图控制器”并将其“样式”切换为“工具栏”

Setting the tab bar style

选择每个选项卡并为其指定一个“标签”,然后选择其中一个图像来表示它

Configuring each tab in Xcode

如果我们保存更改,返回到 Visual Studio for Mac,运行应用并选择“首选项...”菜单项,显示的对话框现在将类似于标准 macOS 应用

An example of the running preferences window

有关详细信息,请参阅使用图像菜单窗口对话框文档。