Xamarin 中的情节提要简介Introduction to Storyboards in Xamarin.Mac

本文介绍了如何在 Xamarin 应用程序中使用情节提要。其中介绍了如何使用情节提要和 Xcode 的 Interface Builder 创建和维护应用的 UI。This article provides an introduction to working with Storyboards in a Xamarin.Mac app. It covers creating and maintaining the app's UI using storyboards and Xcode's Interface Builder.

利用情节提要,你可以为 Xamarin 应用程序开发一个用户界面,该用户界面不仅包括窗口定义和控件,而且还包含不同窗口(通过 segue)和视图状态之间的链接。Storyboards allow you to develop a User Interface for your Xamarin.Mac app that not only includes the window definitions and controls, but also contains the links between different windows (via segues) and view states.

本文将介绍如何使用情节提要定义 Xamarin 应用程序的用户界面。This article will provide an introduction to using Storyboards to define a Xamarin.Mac app's user Interface.

什么是情节提要?What are Storyboards?

通过使用情节提要,可以在单个位置定义 Xamarin 应用程序的所有 UI,并在其各个元素和用户界面之间进行所有导航。By using Storyboards, all of a Xamarin.Mac app's UI can be defined in a single location with all of the navigation between its individual elements and user interfaces. Xamarin 的情节提要,工作方式与 Xamarin 的情节提要的工作方式非常类似。Storyboards for Xamarin.Mac, work in a very similar fashion to Storyboards for Xamarin.iOS. 但是,它们包含不同的_Segue 类型_集,因为不同的接口惯例。However, they contain a different set of Segue Types because of the different interface idioms.

使用场景Working with Scenes

如上所述,情节提要将给定应用的所有 UI 定义为细分为其_视图控制器_的功能概述。As stated above, a Storyboard defines all of the UI for a given app broken down into a functional overview of its View Controllers. 在 Xcode 的 Interface Builder 中,其中每个控制器都位于其自身的_场景_中。In Xcode's Interface Builder, each of these controllers lives in its own Scene.

每个场景表示给定的视图和视图控制器对,其中包含一组用于连接 UI 中的每个场景的线条(称为 Segue),从而显示其关系。Each Scene represents a given View and View Controller Pair with a set of lines (called Segues) that connect each Scene in the UI, thus showing their relationships. 某些 Segue 定义了一个视图控制器如何包含一个或多个子视图或视图控制器。Some Segues define how one View Controller contains one or more child Views or View Controllers. 其他 Segue,定义视图控制器之间的转换(例如显示 segue 或对话框)。Other Segues, define transitions between View Controller (such as displaying a popover or dialog box).

要注意的最重要的一点是,每个 Segue 表示应用 UI 的给定元素之间某种形式的数据流。The most important thing to note is that each Segue represents the flow of some form of data between the given element of the app's UI.

使用视图控制器Working with View Controllers

视图控制器定义 Mac 应用内的给定信息视图与提供该信息的数据模型之间的关系。View Controllers define the relationships between a given View of information within a Mac app and the data model that provides that information. 情节提要中的每个顶层场景都代表 Xamarin 应用程序代码中的一个视图控制器。Each top level scene in the Storyboard represents one View Controller in the Xamarin.Mac app's code.

通过这种方式,每个视图控制器都是一种独立的、可重复使用的信息的可视化表示形式(视图)和逻辑,用于显示和控制该信息。In this way, each View Controller is a self-contained, reusable pairing of both the information's visual representation (View) and the logic to present and control that information.

在给定场景中,您可以执行通常由单个 .xib 文件处理的所有操作:Within a given Scene, you can do all of the things that would normally have been handled by individual .xib files:

  • 放置子视图和控件(如按钮和文本框)。Place subviews and controls (such as buttons and text boxes).
  • 定义元素位置和自动布局约束。Define element positions and auto layout constraints.
  • 用于向代码公开 UI 元素的连线操作和插座。Wire-up Actions and Outlets to expose UI elements to code.

使用 SegueWorking with Segues

如上所述,Segue 提供了定义应用 UI 的所有场景之间的关系。As stated above, Segues provide the relationships between all of the Scenes that define your app's UI. 如果你熟悉 iOS 中的情节提要,你会知道 Segue for iOS 通常定义全屏视图之间的转换。If you are familiar with working in Storyboards in iOS, you know that Segues for iOS usually define transitions between full screen views. 这不同于 macOS,Segue 通常定义 "包含" (其中一个场景是父场景的子级)。This differs from macOS, when Segues usually define "containment" (where one Scene is the child of a parent Scene).

在 macOS 中,大多数应用都倾向于使用 UI 元素(如拆分视图和选项卡)在同一个窗口中将其视图组合在一起。In macOS, most apps tend to group their views together within the same window using UI elements such as Split Views and Tabs. 不同于 iOS,其中的视图需要在屏幕上转换,因为物理显示空间有限。Unlike iOS, where views need to be transitioned on and off screen, due to limited physical display space.

对于 macOS 的倾向,在某些情况下,使用_演示 segue_ ,如模式窗口、工作表视图和 Popovers。Given macOS's tendencies towards containment, there are situations where Presentation Segues are used, such as Modal Windows, Sheet Views and Popovers.

使用 Presentation Segue 时,可以重写父视图控制器的 PrepareForSegue 方法以进行演示,以便初始化和变量并向所提供的视图控制器提供任何数据。When using Presentation Segues, you can override the PrepareForSegue method of the parent View Controller for presentation to initialize and variables and provide any data to the View Controller being presented.

设计和运行时间Design and Run Times

在设计时(在 Xcode 的 Interface Builder 中布局 UI 时),应用 UI 的每个元素将细分为其构成项:At Design time (when layout out the UI in Xcode's Interface Builder), each element of the app's UI is broken down into it's constituent items:

  • 场景-由以下内容组成:Scenes - Which are composed of:
    • 查看控制器-定义视图与支持它们的数据之间的关系。View Controller - That define the relationships between Views and the data that support them.
    • 视图和子视图-组成用户界面的实际元素。Views and Subviews - The actual elements that make up the user interface.
    • 包含 segue -定义场景之间的父子关系。Containment Segues - That define the parent-child relationships between Scenes.
  • 表示 segue -定义单独的演示模式。Presentation Segues - That define individual presentation modes.

通过以这种方式定义每个元素,它只允许在运行时中需要的每个元素的延迟加载。By defining each element in this way, it allows for the lazy-loading of each element only as it is needed during runtime. 在 macOS 中,整个过程旨在使开发人员能够创建复杂、灵活的用户界面,该界面需要最少的支持代码来使其正常工作,同时尽可能提高系统资源的效率。In macOS, the entire process was designed to allow the developer to create complex, flexible User Interfaces that require a bare minimum of backing code to make them work, all while being as efficient with system resources as possible.

情节提要快速入门Storyboard Quick Start

情节提要快速入门指南中,我们将创建一个简单的 Xamarin 应用程序,它介绍了使用情节提要创建用户界面的关键概念。In the Storyboard Quick Start guide, we'll create a simple Xamarin.Mac app that introduces the key concepts of working with storyboards to create a User Interface. 该示例应用包含一个包含_内容区域_和_检查器区域_的分割视图,它将显示一个简单的首选项对话框窗口。The sample app will consist of a Spilt View containing a Content Area and an Inspector Area and it will present a simple Preferences Dialog window. 我们将使用 Segue 将所有用户界面元素绑定在一起。We'll be using Segues to tie all of the User Interface elements together.

使用情节提要Working with Storyboards

本部分介绍如何在 Xamarin 应用程序中使用情节提要的详细信息。This section covers the in-depth details of Working with Storyboards in a Xamarin.Mac app. 我们深入了解了幕后,并介绍了它们如何由视图控制器和视图组成。We take an in-depth look at Scenes and how they are composed of View Controllers and View. 接下来,我们将介绍如何将场景与 Segue 相关联。Then, we'll take a look at how Scenes are tied together with Segues. 最后,我们将介绍如何使用自定义 Segue 类型。Finally, we'll take a look at working with custom Segue types.

复杂情节提要示例Complex Storyboard Example

有关在 Xamarin 应用程序中使用情节提要的复杂示例示例,请参阅SourceWriter 示例应用For an example of a complex example of working with Storyboards in a Xamarin.Mac app, please see the SourceWriter Sample App. SourceWriter 是一个非常简单的源代码编辑器,提供代码补全和简单语法突出显示支持。SourceWriter is a simple source code editor that provides support for code completion and simple syntax highlighting.

SourceWriter 代码已经完全注释,且在可用时,提供了相关链接,链接涵盖了从关键技术或方法到 Xamarin.Mac 指南文档中的相关信息。The SourceWriter code has been fully commented and, where available, links have be provided from key technologies or methods to relevant information in the Xamarin.Mac Guides Documentation.


本文大致介绍了如何在 Xamarin 应用程序中使用情节提要。This article has taken a quick look at working with Storyboards in a Xamarin.Mac app. 我们了解到如何使用情节提要创建新的应用程序,以及如何定义用户界面。We saw how to create a new app using storyboards and how to define a user interface. 我们还了解了如何使用 segue 在不同窗口和视图状态之间导航。We also saw how to navigate between different windows and view states using segues.