iOS 设计器基础知识iOS Designer basics
01/31/2018
本文内容
本指南介绍 Xamarin Designer for iOS。它演示了如何使用 iOS 设计器以可视方式布局控件,如何在代码中访问这些控件,以及如何编辑属性。This guide introduces the Xamarin Designer for iOS. It demonstrates how to use the iOS Designer to visually lay out controls, how to access those controls in code, and how to edit properties.
警告
IOS 设计器将在 Visual Studio 2019 版本16.8 和 Visual Studio 2019 for Mac 版本8.8 中开始推出。The iOS Designer will start to be phased out in Visual Studio 2019 version 16.8 and Visual Studio 2019 for Mac version 8.8.
生成 iOS 用户界面的建议方法是直接在运行 Xcode 的 Mac 上运行。The recommended way to build iOS user interfaces is directly on a Mac running Xcode.
Xamarin Designer for iOS 是类似于 Xcode 的 Interface Builder 和 Android Designer 的可视化界面设计器。The Xamarin Designer for iOS is a visual interface designer similar to Xcode's Interface Builder and the Android Designer. 其中一些功能包括与 Visual Studio for Windows 和 Mac 的无缝集成、拖放编辑、用于设置事件处理程序的接口,以及用于呈现自定义控件的功能。Some of its many features include seamless integration with Visual Studio for Windows and Mac, drag-and-drop editing, an interface for setting up event handlers, and the ability to render custom controls.
要求Requirements
IOS 设计器可用于 Visual Studio for Mac 和 Visual Studio 2017 及更高版本的 Windows。The iOS Designer is available in Visual Studio for Mac and Visual Studio 2017 and later on Windows. 在 Visual Studio for Windows 中,iOS 设计器需要连接到正确配置的 Mac 生成主机,但 Xcode 无需运行。In Visual Studio for Windows, the iOS Designer requires a connection to a properly configured Mac build host, though Xcode need not be running.
本指南假定你熟悉 入门指南中所述的内容。This guide assumes a familiarity with the contents covered in the Getting Started guides.
IOS 设计器的工作方式How the iOS Designer works
本部分介绍 iOS 设计器如何帮助创建用户界面并将其连接到代码。This section describes how the iOS Designer facilitates creating a user interface and connecting it to code.
使用 iOS 设计器,开发人员可直观地设计应用程序的用户界面。The iOS Designer allows developers to visually design an application's user interface. 如情节提要指南 简介 中所述,情节提要介绍了构成应用的屏幕 (查看控制器) 、 (视图中的界面元素) 放置在这些视图控制器上以及应用的整个导航流。As outlined in the Introduction to Storyboards guide, a storyboard describes the screens (view controllers) that make up an app, the interface elements (views) placed on those view controllers, and the app's overall navigation flow.
视图控制器有两部分: iOS 设计器中的可视化表示形式和关联的 c # 类:A view controller has two parts: a visual representation in the iOS Designer and an associated C# class:
在默认状态下,视图控制器不提供任何功能;它必须用控件填充。In its default state, a view controller doesn't provide any functionality; it must be populated with controls. 这些控件放在视图控制器的视图中,其中包含所有屏幕内容的矩形区域。These controls are placed in the view controller's view, the rectangular area that contains all of the screen's content. 大多数视图控制器都包含常用控件(如按钮、标签和文本字段),如以下屏幕截图所示,其中显示了一个包含按钮的视图控制器:Most view controllers contain common controls such as buttons, labels, and text fields, as illustrated in the following screenshot, which shows a view controller containing a button:
某些控件(例如包含静态文本的标签)可以添加到视图控制器,并将其放在单独的控件中。Some controls, such as labels containing static text, can be added to the view controller and left alone. 但通常情况下,必须以编程方式自定义控件。However, more often than not, controls must be customized programmatically. 例如,上面添加的按钮应该在点击时执行某些操作,因此必须在代码中添加事件处理程序。For example, the button added above should do something when tapped, so an event handler must be added in code.
为了访问和操作代码中的按钮,该按钮必须具有唯一标识符。In order to access and manipulate the button in code, it must have a unique identifier. 通过选择按钮、打开 Properties Pad 并将其 " 名称 " 字段设置为一个值(如 "SubmitButton")来提供唯一标识符:Provide a unique identifier by selecting the button, opening the Properties Pad, and setting its Name field to a value such as "SubmitButton":
为了访问和操作代码中的按钮,该按钮必须具有唯一标识符。In order to access and manipulate the button in code, it must have a unique identifier. 通过选择按钮,打开 " 属性" 窗口,并将其 " 名称 " 字段设置为一个值(如 "SubmitButton")来提供唯一标识符:Provide a unique identifier by selecting the button, opening the Properties Window, and setting its Name field to a value such as "SubmitButton":
由于按钮具有名称,因此可以在代码中对其进行访问。Now that the button has a name, it can be accessed in code. 但这是如何工作的?But how does this work?
在 Solution Pad 中,导航到 " ViewController.cs ",然后单击泄露指示器会显示视图控制器的 ViewController 类定义跨两个文件,其中每个文件都包含一个 分部类 定义:In the Solution Pad, navigating to ViewController.cs and clicking on the disclosure indicator reveals that the view controller's ViewController class definition spans two files, each of which contains a partial class definition:
在 解决方案资源管理器 中,导航到 " ViewController.cs ",然后单击泄露指示器会显示视图控制器的 ViewController 类定义跨两个文件,其中每个文件都包含一个 分部类 定义:In the Solution Explorer, navigating to ViewController.cs and clicking on the disclosure indicator reveals that the view controller's ViewController class definition spans two files, each of which contains a partial class definition:
应在 ViewController.cs 中填充与类相关的自定义代码 ViewController 。ViewController.cs should be populated with custom code related to the ViewController class. 在此文件中, ViewController 类可以响应各种 iOS 视图控制器生命周期方法、自定义 UI 以及响应用户输入(如点击按钮)。In this file, the ViewController class can respond to various iOS view controller lifecycle methods, customize the UI, and respond to user input such as button taps.
ViewController.designer.cs 是一个生成的文件,由 IOS 设计器创建,以将可视化构造的接口映射到代码。ViewController.designer.cs is a generated file, created by the iOS Designer to map the visually-constructed interface to code. 由于对此文件所做的更改将被覆盖,因此不应进行修改。Since changes to this file will be overwritten, it should not be modified. 此文件中的属性声明使类中的代码可以 ViewController 按 名称 访问 iOS 设计器中设置的控件。Property declarations in this file make it possible for code in the ViewController class to access, by Name, controls set up in the iOS Designer. 打开 ViewController.designer.cs 会显示以下代码:Opening ViewController.designer.cs reveals the following code:
namespace Designer
{
[Register ("ViewController")]
partial class ViewController
{
[Outlet]
[GeneratedCode ("iOS Designer", "1.0")]
UIKit.UIButton SubmitButton { get; set; }
void ReleaseDesignerOutlets ()
{
if (SubmitButton != null) {
SubmitButton.Dispose ();
SubmitButton = null;
}
}
}
}
SubmitButton属性声明将整个 ViewController 类(而不仅仅是 ViewController.designer.cs 文件)连接到情节提要中定义的按钮。The SubmitButton property declaration connects the entire ViewController class - not just the ViewController.designer.cs file – to the button defined in the storyboard. 由于 ViewController.cs 定义了类的一部分 ViewController ,因此它有权访问 SubmitButton 。Since ViewController.cs defines part of the ViewController class, it has access to SubmitButton.
下面的屏幕截图说明,IntelliSense 现在可识别 SubmitButton ViewController.cs 中的引用:The following screenshot illustrates that IntelliSense now recognizes the SubmitButton reference in ViewController.cs:
本部分演示了如何在 iOS 设计器中创建一个按钮,以及如何在代码中访问该按钮。This section has demonstrated how create a button in the iOS Designer and access that button in code.
本文档的其余部分进一步概述了 iOS 设计器。The remainder of this document provides a further overview of the iOS Designer.
iOS 设计器基础知识iOS Designer basics
本部分介绍 iOS 设计器的各个部分,并提供其功能简介。This section introduces the parts of the iOS Designer and provides a tour of its features.
启动 iOS 设计器Launching the iOS Designer
使用 Visual Studio for Mac 创建的 Xamarin iOS 项目包含情节提要。Xamarin.iOS projects created with Visual Studio for Mac include a storyboard. 若要查看情节提要的内容,请双击 " Solution Pad 中的" storyboard "文件:To view the contents of a storyboard, double-click the .storyboard file in the Solution Pad:
使用 Visual Studio 创建的大多数 Xamarin 项目都包含情节提要。Most Xamarin.iOS projects created with Visual Studio include a storyboard. 若要查看情节提要的内容,请双击 " 解决方案资源管理器 中的" storyboard "文件:To view the contents of a storyboard, double-click the .storyboard file in the Solution Explorer:
iOS 设计器功能iOS Designer features
IOS 设计器有六个主要部分:The iOS Designer has six primary sections:
Design Surface – IOS 设计器的主工作区。Design Surface – The iOS Designer's primary workspace. 在文档区域中显示,它支持用户界面的直观构造。Shown in the document area, it enables the visual construction of user interfaces.
约束工具栏 -允许在框架编辑模式和约束编辑模式间切换,这两种不同的方法可以在用户界面中定位元素。Constraints Toolbar – Allows for switching between frame editing mode and constraint editing mode, two different ways to position elements in a user interface.
"工具箱 " –列出可拖放到设计图面并添加到用户界面的控制器、对象、控件、数据视图、笔势识别器、窗口和条。Toolbox – Lists the controllers, objects, controls, data views, gesture recognizers, windows, and bars that can be dragged onto the design surface and added to a user interface.
Properties Pad –显示选定控件的属性,包括标识、视觉样式、可访问性、布局和行为。Properties Pad – Shows properties for the selected control, including identity, visual styles, accessibility, layout, and behavior.
文档大纲 –显示构成所编辑接口的布局的控件树。Document Outline – Shows the tree of controls that compose the layout for the interface being edited. 单击树中的某一项将在 iOS 设计器中选择它,并在 Properties Pad 中显示其属性。Clicking on an item in the tree selects it in the iOS Designer and shows its properties in the Properties Pad. 这对于在深层嵌套的用户界面中选择特定控件非常方便。This is handy for selecting a specific control in a deeply-nested user interface.
底部工具栏 -包含用于更改 IOS 设计器如何显示 xib 文件的选项,包括设备、方向和缩放。Bottom Toolbar – Contains options for changing how the iOS Designer displays the .storyboard or .xib file, including device, orientation, and zoom.
Design Surface – IOS 设计器的主工作区。Design Surface – The iOS Designer's primary workspace. 在文档区域中显示,它支持用户界面的直观构造。Shown in the document area, it enables the visual construction of user interfaces.
约束工具栏 -允许在框架编辑模式和约束编辑模式间切换,这两种不同的方法可以在用户界面中定位元素。Constraints Toolbar – Allows for switching between frame editing mode and constraint editing mode, two different ways to position elements in a user interface.
"工具箱 " –列出可拖放到设计图面并添加到用户界面的控制器、对象、控件、数据视图、笔势识别器、窗口和条。Toolbox – Lists the controllers, objects, controls, data views, gesture recognizers, windows, and bars that can be dragged onto the design surface and added to a user interface.
"属性" 窗口–显示选定控件的属性,包括标识、视觉样式、可访问性、布局和行为。Properties Window – Shows properties for the selected control, including identity, visual styles, accessibility, layout, and behavior.
文档大纲 –显示构成所编辑接口的布局的控件树。Document Outline – Shows the tree of controls that compose the layout for the interface being edited. 单击树中的某一项将在 iOS 设计器中选择该项,然后在 " 属性" 窗口 中显示其属性。Clicking on an item in the tree selects it in the iOS Designer and shows its properties in the Properties Window. 这对于在深层嵌套的用户界面中选择特定控件非常方便。This is handy for selecting a specific control in a deeply-nested user interface.
底部工具栏 -包含用于更改 IOS 设计器如何显示 xib 文件的选项,包括设备、方向和缩放。Bottom Toolbar – Contains options for changing how the iOS Designer displays the .storyboard or .xib file, including device, orientation, and zoom.
设计工作流Design workflow
向接口添加控件Adding a control to the interface
若要将控件添加到接口,请将其从 " 工具箱 " 拖放到设计图面上。To add a control to an interface, drag it from the Toolbox and drop it on the design surface. 添加或定位控件时,垂直和水平指导原则突出显示了常用布局位置,如垂直居中、水平居中和边距:When adding or positioning a control, vertical and horizontal guidelines highlight commonly-used layout positions such as vertical center, horizontal center, and margins:
上面示例中的蓝色点线提供了水平居中视觉对象对齐准则,以帮助提供按钮位置。The blue dotted line in the example above provides a horizontal center visual alignment guideline to help with the button placement.
上下文菜单命令Context menu commands
在设计图面和 文档大纲 中,上下文菜单都可用。A context menu is available both on the design surface and in the Document Outline. 此菜单提供选定控件及其父控件的命令,这在使用嵌套层次结构中的视图时很有用:This menu provides commands for the selected control and its parent, which is helpful when working with views in a nested hierarchy:
约束工具栏Constraints toolbar
约束工具栏已更新,现在包含以下两个控件: "框架编辑模式/约束编辑模式切换" 和 "更新约束/更新帧" 按钮。The constraints toolbar has been updated and now consists of two controls: the frame editing mode / constraint editing mode toggle and the update constraints / update frames button.
帧编辑模式/约束编辑模式切换Frame editing mode / constraint editing mode toggle
在以前版本的 iOS 设计器中,单击设计图面上已经选定的视图在框架编辑模式和约束编辑模式间切换。In previous versions of the iOS Designer, clicking an already-selected view on the design surface toggled between frame editing mode and constraint editing mode. 现在,约束工具栏中的切换控件在这些编辑模式间切换。Now, a toggle control in the constraints toolbar switches between these editing modes.
帧编辑模式:Frame editing mode:
!["帧编辑模式" 按钮](introduction-images/12a-frameeditingmode-vsmac.png ""帧编辑模式" 按钮")
!["帧编辑模式" 按钮](introduction-images/12a-frameeditingmode-vs.png ""帧编辑模式" 按钮")
约束编辑模式:Constraint editing mode:
!["约束编辑模式" 按钮](introduction-images/12b-constrainteditingmode-vsmac.png ""约束编辑模式" 按钮")
!["约束编辑模式" 按钮](introduction-images/12b-constrainteditingmode-vs.png ""约束编辑模式" 按钮")
"更新约束/更新帧" 按钮Update constraints / update frames button
"更新约束/更新帧" 按钮位于 "帧编辑模式/约束编辑模式" 切换到右侧。The update constraints / update frames button sits to the right of the frame editing mode / constraint editing mode toggle.
在框架编辑模式下,单击此按钮可调整任何所选元素的帧,以匹配其约束。In frame editing mode, clicking this button adjusts the frames of any selected elements to match their constraints.
在 "约束编辑模式" 中,单击此按钮可调整任何所选元素的约束,使其与框架相匹配。In constraint editing mode, clicking this button adjusts the constraints of any selected elements to match their frames.
底部工具栏Bottom toolbar
底部工具栏提供了一种方法,用于选择用于在 iOS 设计器中查看情节提要或 xib 文件的设备、方向和缩放:The bottom toolbar provides a way to select the device, orientation, and zoom used to view a storyboard or .xib file in the iOS Designer:
设备和方向Device and orientation
展开后,底部工具栏将显示适用于当前文档的所有设备、方向和/或适应。When expanded, the bottom toolbar displays all devices, orientations, and/or adaptations applicable to the current document. 单击它们会更改设计图面上显示的视图。Clicking them changes the view displayed on the design surface.
请注意,选择设备和方向仅会更改 iOS 设计器预览设计的方式。Note that selecting a device and orientation changes only how the iOS Designer previews the design. 无论当前选择哪一项,新添加的约束都将应用于所有设备和方向,除非已使用 " 编辑特征 " 按钮进行指定。Regardless of the current selection, newly added constraints are applied across all devices and orientations unless the Edit Traits button has been used to specify otherwise.
启用 大小类后 enabled,展开的底部工具栏中将显示 "编辑特征" 按钮。When size classes are enabled, the Edit Traits button will appear in the expanded bottom toolbar. 单击 " 编辑特征 " 按钮将显示基于所选设备和方向所表示的大小类创建界面变体的选项。Clicking the Edit Traits button displays options for creating an interface variation based on the size class represented by the selected device and orientation. 请考虑以下示例:Consider the following examples:
如果选择了 iPhone SE / 纵向,segue 将提供用于为紧凑型宽度、常规高度大小类创建界面变体的选项。If iPhone SE / Portrait, is selected, the popover will provide options to create an interface variation for the compact width, regular height size class.
如果选择了 iPad Pro 9.7 " / 横向 / 全屏 显示,segue 将提供用于为常规宽度、常规高度大小类创建界面变体的选项。If iPad Pro 9.7" / Landscape / Full Screen is selected, the popover will provide options to create an interface variation for the regular width, regular height size class.
缩放控件Zoom controls
设计图面支持通过多个控件进行缩放:The design surface supports zooming via several controls:
这些控件包括:The controls include the following:
缩放到合适大小Zoom to fit
缩小Zoom out
放大Zoom in
实际大小 (1:1 像素大小)Actual size (1:1 pixel size)
这些控件在设计图面上调整缩放。These controls adjust the zoom on the design surface. 它们不会影响应用程序在运行时的用户界面。They do not affect the user interface of the application at runtime.
Properties PadProperties Pad
使用 Properties Pad 编辑控件的标识、视觉样式、可访问性和行为。Use the Properties Pad to edit the identity, visual styles, accessibility, and behavior of a control. 以下屏幕截图说明了按钮的 Properties Pad 选项:The following screenshot illustrates the Properties Pad options for a button:
Properties Pad 节Properties Pad sections
Properties Pad 包含三个部分:The Properties Pad contains three sections:
“属性”窗口Properties Window
使用 " 属性" 窗口 可以编辑控件的标识、视觉样式、可访问性和行为。Use the Properties Window to edit the identity, visual styles, accessibility, and behavior of a control. 以下屏幕截图说明了按钮的 " 属性" 窗口 选项:The following screenshot illustrates the Properties Window options for a button:
"属性" 窗口节Properties Window sections
" 属性" 窗口 包含三个部分:The Properties Window contains three sections:
小组件 –控件的主要属性,如名称、类、样式属性等。通常在此处放置用于管理控件内容的属性。Widget – The main properties of the control, such as name, class, style properties, etc. Properties for managing the control’s content are usually placed here.
布局 –跟踪控件位置和大小(包括限制和框架)的属性列在此处。Layout – Properties that keep track of the position and size of the control, including constraints and frames, are listed here.
事件 –事件和事件处理程序在此处指定。Events – Events and event handlers are specified here. 用于处理触控、点击、拖动等事件。事件也可以直接在代码中处理。Useful for handling events such as touch, tap, drag, etc. Events can also be handled directly in code.
编辑 Properties Pad 中的属性Editing properties in the Properties Pad
除了在设计图面上进行可视编辑之外,iOS 设计器还支持在 Properties Pad 中编辑属性。In addition to visual editing on the design surface, the iOS Designer supports editing properties in the Properties Pad. 可用属性因所选控件而变化,如以下屏幕截图所示:The available properties change based on the selected control, as illustrated by the screenshots below:
在 "属性" 窗口中编辑属性Editing properties in the Properties Window
除了在设计图面上进行可视编辑之外,iOS 设计器还支持在 " 属性" 窗口 中编辑属性。In addition to visual editing on the design surface, the iOS Designer supports editing properties in the Properties Window. 可用属性因所选控件而变化,如以下屏幕截图所示:The available properties change based on the selected control, as illustrated by the screenshots below:
重要
现在,Properties Pad 的 "标识" 部分显示一个 模块 字段。The Identity section of the Properties Pad now shows a Module field. 仅当与 Swift 类互操作时,才需要填写此部分。It is necessary to fill in this section only when interoperating with Swift classes. 使用它为 Swift 类输入模块名称,这些类为带命名空间。Use it to enter a module name for Swift classes, which are namespaced.
默认值Default values
Properties Pad 中的许多属性不显示值或默认值。Many properties in the Properties Pad show no value or a default value. 但是,应用程序的代码可能仍会修改这些值。However, the application's code may still modify these values. Properties Pad 不显示在代码中设置的值。The Properties Pad does not show values set in code.
" 属性" 窗口 中的许多属性不显示值或默认值。Many properties in the Properties Window show no value or a default value. 但是,应用程序的代码可能仍会修改这些值。However, the application's code may still modify these values. " 属性" 窗口 不会显示在代码中设置的值。The Properties Window does not show values set in code.
事件处理程序Event handlers
若要为各种事件指定自定义事件处理程序,请使用 Properties Pad 的 事件 选项卡。To specify custom event handlers for various events, use the Events tab of the Properties Pad. 例如,在下面的屏幕截图中, HandleClick 方法处理按钮在事件 内的触摸 :For example, in the screenshot below, a HandleClick method handles the button's Touch Up Inside event:
若要为各种事件指定自定义事件处理程序,请使用 "属性" 窗口 的 "事件" 选项卡。To specify custom event handlers for various events, use the Events tab of the Properties Window. 例如,在下面的屏幕截图中, HandleClick 方法处理按钮在事件 内的触摸 :For example, in the screenshot below, a HandleClick method handles the button's Touch Up Inside event:
指定事件处理程序后,必须将同名的方法添加到相应的视图控制器类中。Once an event handler has been specified, a method of the same name must be added to the corresponding view controller class. 否则, unrecognized selector 在点击按钮时将发生异常:Otherwise, an unrecognized selector exception will occur when the button is tapped:
请注意,在 Properties Pad 中指定了事件处理程序后,IOS 设计器将立即打开相应的代码文件,并提供插入方法声明。Note that after an event handler has been specified in the Properties Pad, the iOS Designer will immediately open the corresponding code file and offer to insert the method declaration.
有关使用自定义事件处理程序的示例,请参阅 Hello,iOS 入门指南。For an example that uses custom event handlers, refer to the Hello, iOS Getting Started Guide.
大纲视图Outline view
IOS 设计器还可以以大纲形式显示接口的控件层次结构。The iOS Designer can also display an interface's hierarchy of controls as an outline. 可以通过选择 " 文档大纲 " 选项卡来获取大纲,如下所示:The outline is available by selecting the Document Outline tab, as shown below:
大纲视图中的所选控件与设计图面上的选定控件保持同步。The selected control in the outline view stays in sync with the selected control on the design surface. 此功能可用于从深度嵌套的接口层次结构中选择项。This feature is useful for selecting an item from a deeply nested interface hierarchy.
恢复到 XcodeRevert to Xcode
可以 Interface Builder 交换使用 iOS 设计器和 Xcode。It is possible to use the iOS Designer and Xcode Interface Builder interchangeably. 若要在 Xcode Interface Builder 中打开情节提要或 xib 文件,请右键单击该文件,然后选择 " 使用 > Xcode Interface Builder 打开",如下面的屏幕截图所示:To open a storyboard or a .xib file in Xcode Interface Builder, right-click on the file and select Open With > Xcode Interface Builder, as illustrated by the screenshot below:
在 Xcode Interface Builder 中进行编辑后,请保存文件并返回到 Visual Studio for Mac。After making edits in Xcode Interface Builder, save the file and return to Visual Studio for Mac. 更改将同步到 Xamarin iOS 项目。The changes will sync to the Xamarin.iOS project.
恢复到 XcodeRevert to Xcode
可以 Interface Builder 交换使用 iOS 设计器和 Xcode,但 Xcode Interface Builder 仅在 Mac 上可用。It is possible to use the iOS Designer and Xcode Interface Builder interchangeably, however Xcode Interface Builder is only available on Mac. 若要在 Mac 上的 Xcode Interface Builder 中打开情节提要或 xib 文件,请在 Visual Studio for Mac中打开包含 Xamarin iOS 项目的解决方案,右键单击该文件,然后选择 " 使用 > Xcode Interface Builder 打开",如下面的屏幕截图所示:To open a storyboard or .xib file in Xcode Interface Builder on a Mac, open the solution containing the Xamarin.iOS project in Visual Studio for Mac, right-click on the file and select Open With > Xcode Interface Builder, as illustrated by the screenshot below:
在 Xcode Interface Builder 中进行编辑后,请保存文件并返回到 Visual Studio for Mac。After making edits in Xcode Interface Builder, save the file and return to Visual Studio for Mac. 更改将同步到 Xamarin iOS 项目。The changes will sync to the Xamarin.iOS project.
。 xib 支持.xib support
IOS 设计器支持创建、编辑和管理 xib 文件。The iOS Designer supports creating, editing, and managing .xib files. 这些是 XML 文件,表示可以添加到应用程序的视图层次结构中的单个自定义视图。These are XML files that respresent single, custom views which can be added to an application's view hierarchy. Xib 文件通常表示应用程序中单个视图或屏幕的接口,而情节提要表示多个屏幕和它们之间的转换。A .xib file generally represents the interface for a single view or screen in an application, whereas a storyboard represents many screens and the transitions between them.
有很多关于解决方案的 xib 文件、演示图板或代码的看法,最适用于创建和维护用户界面。There are many opinions about which solution – .xib files, storyboards, or code – works best for creating and maintaining a user interface. 事实上,没有完美的解决方案,并且始终需要考虑到手头的工作的最佳工具。In reality, there is no perfect solution, and it's always worth considering the best tool for the job at hand. 也就是说,xib 文件通常最适用于在应用中的多个位置表示需要的自定义视图,例如自定义表视图单元。That said, .xib files are generally most powerful when used to represent a custom view needed in multiple places in an app, such as a custom table view cell.
以下食谱介绍了有关使用 xib 文件的更多文档:More documentation about using .xib files can be found in the following recipes:
有关使用情节提要的详细信息,请参阅 情节提要简介。For more information regarding the use of storyboards, refer to the Introduction to Storyboards.
此和其他与 iOS 设计器相关的指南介绍了如何使用情节提要作为构建用户界面的标准方法,因为大多数 Xamarin 新项目模板默认提供情节提要。This and other iOS Designer-related guides refer to the use of storyboards as the standard approach for building user interfaces, since most Xamarin.iOS new project templates provide a storyboard by default.
总结Summary
本指南提供了 iOS 设计器简介,描述了其功能并概述了用于设计精美用户界面的工具。This guide provided an introduction to the iOS Designer, describing its features and outlining the tools it offers for designing beautiful user interfaces.
相关链接Related Links