Xamarin.Mac 中的情节提要 - 快速入门
在这个使用情节提要定义 Xamarin.Mac 应用用户界面的快速介绍中,我们先启动一个新 Xamarin.Mac 项目。 选择“Mac”>“App”>“Cocoa 应用”,然后单击“下一步”按钮:
使用 MacStoryboard
作为“应用名称”,然后单击“下一步”按钮:
使用默认的“项目名称”和“解决方案名称”,然后单击“创建”按钮:
在“解决方案资源管理器”中,双击 Main.storyboard
文件将其打开,以便在 Xcode 的 Interface Builder 中进行编辑:
如上所示,默认情节提要同时定义应用的菜单栏及其主窗口(包含“视图控制器”和“视图”)。 在我们的示例应用中,我们将创建一个 UI,该 UI 在两侧分别具有“主内容视图”和“检查器视图”。
为此,我们需要先移除情节提要附带的默认“视图控制器”和“视图”,方法是在 Interface Builder 中选将其选中,然后按 Delete 键:
接下来,在“筛选器”区域中键入 split
,选择“垂直拆分视图控制器”并将其拖动到 Design Surface 上:
请注意,控制器自动包含了两个子“视图控制器”(及其相关视图),并连接到拆分视图的左侧和右侧。 若要将拆分视图绑定到其父窗口,请按 Ctrl 键,单击“窗口控制器”(“窗口控制器”框架中的蓝色圆圈)并将线条拖动至“拆分视图控制器”。 从弹出窗口中选择“窗口内容”:
这会使用 Segue 将两个界面元素绑定在一起:
我们希望在“拆分视图”的左侧放置“文本视图”,并在调整“窗口”或“拆分视图”的大小时自动填充可用区域。 将“文本视图”拖动到附加至“拆分视图”的顶部“视图控制器”上,然后单击“单边锁定”自动布局约束(Design Surface 底部右侧的第二个图标)。
在这里,我们将单击约束弹出框顶部边界框周围的所有四个“I-Beam”图标,然后单击底部的“添加 4 个约束”按钮以添加所需约束。
如果我们返回到 Visual Studio for Mac 并运行项目,请注意,“文本视图”会自动调整大小,以在调整“窗口”或拆分的大小时填充“拆分视图”的左侧:
由于我们将使用拆分视图的右侧作为“检查器”区域,因此我们希望其大小更小且可折叠。 返回到 Xcode 并编辑右侧的视图,方法是在 Design Surface 中选择它,然后单击“大小检查器”。 在此处输入 250
作为“宽度”:
接下来,选择表示右侧的“拆分项”,设置更高的“保留优先级”,然后单击“用户可以折叠”复选框:
如果我们返回到 Visual Studio for Mac 并立即运行项目,请注意,右侧保持更小的大小,并且窗口大小已经过调整:
定义表示 Segue
我们将布置“拆分视图”的右侧,以充当所选文本属性的“检查器”。 我们将一些控件拖动到底部视图,以布置检查器的 UI。 对于最后一个控件,我们希望显示一个弹出框,以便用户可以从四个预设字符样式中进行选择。
我们将向“检查器”添加一个“按钮”,并向 Design Surface 添加一个“视图控制器”。 我们将调整“视图控制器”的大小,使其与“弹出框”的大小相同,并向其添加四个“按钮”。 接下来,我们在按住 Ctrl 键的同时单击“检查器视图”中的按钮,将其拖动到表示弹出框的“视图控制器”:
从弹出菜单中,我们将选择“弹出框”:
最后,我们选择 Design Surface 中的 Segue,并将“首选边”设置为“左”。 然后,我们将线条从“定位点视图”拖动到希望弹出框附加到的“按钮”:
如果我们返回到 Visual Studio for Mac,运行应用并单击“检查器”中的“无”按钮,将会显示弹出框:
创建应用首选项
大多数标准 macOS 应用都提供一个首选项对话框,用户可在其中定义多个选项来控制应用的各个方面,例如外观或用户帐户。
若要定义标准首选项对话框窗口,请先将“选项卡视图控制器”拖动到 Design Surface 上:
同样,这将自动附带两个附加的子“视图控制器”。 举例来说,我们将向每个视图添加一个居中显示的标签:
接下来,当用户选择“首选项...”菜单项时,我们希望显示“首选项”窗口。 从菜单栏中,选择“首选项”菜单项,按住 Ctrl 键的同时单击,将线条拖动至“选项卡视图控制器”:
从弹出窗口中,我们将选择“模式”,以便此窗口显示为“模式对话框”:
如果我们保存更改,返回到 Visual Studio for Mac,运行应用并选择“首选项...”菜单项,将会显示新的“首选项”对话框:
你可能会注意到,这看起来不像标准 macOS 应用首选项对话框窗口。 若要解决此问题,请在“解决方案资源管理器”的 Xamarin.Mac 应用的 Resources
文件夹中包含两个图像文件,并返回到 Xcode 的 Interface Builder。
选择“选项卡视图控制器”并将其“样式”切换为“工具栏”:
选择每个选项卡并为其指定一个“标签”,然后选择其中一个图像来表示它:
如果我们保存更改,返回到 Visual Studio for Mac,运行应用并选择“首选项...”菜单项,显示的对话框现在将类似于标准 macOS 应用: