Lay out user interfaces - Edit storyboards

制定用户界面 - 编辑故事板x0a1、关于故事板、场景和连接x0a2、增加场景和视图x0a3、增加一个 seguex0a4、配置一个 seguex0a5、增加一个故事板引用...

我用最真的歌曲想留下永远

可你的回应却是冷冷的表现

About storyboards, scenes, and connections

关于故事板、场景和连接

Use one or more storyboards to graphically lay out the user’s path through your app. Most new project templates include a storyboard for the main user interface of the app.

使用一个或多个故事板图形化制定你的应用程序用户路径。许多新的项目为应用程序主用户界面模板包含了故事板。

A storyboard is a type of user interface file that you edit using Interface Builder. The components a storyboard are:

一个故事板是一个用户界面文件类型，你可以编辑使用的界面构建器。故事板组件包括：

Scenes ／ 场景

Container and content view controllers ／ 容器和内容视图控制器

Relationship connections between a container and its children ／ 容器和它的孩子之间的连接关系

Segue connections between content scenes ／ Segue连接和内容场景之间

Control views used to trigger the segues ／ 用于出发segues的控件视图SEE ALSO

Add files and folders to a project

Add scenes and views

增加场景和视图

To add a new scene to your user interface, add a view controller to the storyboard and create connections to other scenes.

要增加一个新的场景到你的用户界面，增加一个视图控制器到故事板并创建其他场景到连接。

If a view is not part of the main view hierarchy—such as a pop-up menu—add the view to the scene dock. In a running app, the system adds and removes these kind of views from the view hierarchy when they are opened and closed.

如果一个视图你是主界面层次结构的一部——例如一个弹出菜单——增加场景栏给视图。在运行中的应用程序，当它们打开或关闭时，系统从层次结构增加和移除这些视图。

Add a scene

增加一个场景

1. In Interface Builder, open the Object library.

1、在界面构建器，打开对象资源库。

2. Drag a view controller from the Object library to the canvas.

2、从对象资源库拖拽视图控制器到画布。

Select a view controller that best suits your needs. For example:

选择一个视图控制器以最适合你的需要。例如：

Create a scene divided into multiple parts: Select Split View Controller.

创建一个场景分为多个部分：选择拆分视图控制器。

For iOS, divide your app into two or more distinct modes of operation: Select Tab Bar Controller.

对于iOS，将应用程序分成两个或两个以上的不同操作方式：选择选标签选项卡栏控制器。

For macOS, open your scene in a new window: Select Window Controller.

对于macOS，在新窗口打开你的场景：选择窗口控制器。

3. Connect the scene to an existing scene by adding a segue or relationship connection between them.

3、通过增加一个segue或关系连接来在场景和一个已存在的场景之间建立连接。

SEE ALSO

Add an object to the user interface

Add a storyboard reference

Add a segue

Add a sugue

增加一个segue

Use segues to graphically layout the different paths through your user interface. Segues specify a transition from one scene to another and are triggered by a user touching a user interface element or by 3D Touch gestures. Each segue type results in a different transition.

使用segues来图形化布局你用户界面的不同路径。Segues从一个场景转换到另一个场景并通过用户点击触摸用户界面元素或通过3D Touch手势进行触发。每一个sugue类型在不同的转换过渡中都有不一样的效果。

Add a segue between scenes

在场景之间增加segue

1. On the storyboard, Control-drag from an object (such as a button, a table view cell, or a tab view item) in the first scene to the target scene.

1、在故事板，从第一个场景按下Control键拖拽一个对象（例如一个按钮，一个表格视图行或一个标签视图选项）到目标场景。2. In the menu that appears, choose the style for the segue.

2、在出现的菜单，为segue选择一个样式。

Add a segue between storyboards

在故事板间增加一个segue

1. If the storyboard that will originate the segue does not already have a reference to the destination storyboard, add a reference. See Add a storyboard reference.

1、如果故事板是一个segue的起始故事板，但是没有引用目标故事板，增加一个引用。查看增加故事板引用。

2. On the storyboard, Control-drag from an object (such as a button, a table view cell, or a tab view item) in the first scene to the desired storyboard reference.

2、在故事板，在第一个场景按下Control键从一个对象（例如一个按钮，一个表格视图行或者一个标签视图行）拖拽到想要使用的故事板引用。

Add peek and pop to a segue

增加peek和pop到segue

1. On the storyboard, select the desired segue.

1、在故事板，选择想要的segue。

2. In the utilities area, select the Attributes inspector for the segue.

2、在实用工具区域，为segue选择属性检查器。

The Attributes inspector for the selected segue is shown. Below is an example of the attributes for a show segue with an identifier of

EditLlamaInfoSegue

.

已选segue的属性检查器会显示出来。下方是一个EditLlamaInfoSegue标识的segue显示的属性例子。3. In the Attributes inspector for the segue, select the Peek & Pop checkbox.

3、在segue的属性检查器，选择 Peek & Pop复选框。

The Peek & Pop section of the storyboard segue attributes expands as shown below.

故事板segue属性扩展的Peek & Pop部分显示如下。On the storyboard, a dashed circle is added to the segue symbol. The figure below shows a push segue symbol with the dashed circle.

在故事板，一个虚线框是增加到segue的标识。下图显示的是一个推送segue的标识例子。To delete a segue, on the storyboard select the desired segue connection and press the Delete key.

要删除一个segue，在故事板上选择想要的segue连接然后按下删除键。

Configure a segue

配置一个segue

Configure segues to set a segue identifier, specify a custom class, change the kind of an existing segue, enable animation, and specify segue attributes.

配置segues设置为一个segue标识，指定其自定义类，改变已存在的segue，启用动画并指定segue属性。

Open the Attributes inspector for a segue

为一个segue打开属性检查器

1. On the storyboard, select the desired segue.

1、在故事板，选择想要的segue。

2. In the utilities area, select the Attributes inspector for the segue.

2、在实用工具区域，为segue选择属性检查器。

Configure show, show detail, and custom segue attributes

配置显示、显示详细信息并自定义segue属性

Use the Attributes inspector to configure the show, show detail, and custom segue attributes.

实用属性检查器来配置显示，显示详细信息并自定义segue属性。

Configure modal segue attributes

配置模态segue属性

Use the Attributes inspector to configure the modal segue attributes.

使用属性检查器来配置模态segue属性。

Configure popover segue attributes

配置弹出segue属性

Use the Attributes inspector to configure the popover segue attributes.

使用属性检查器来配置弹出segue属性。

Configure peek and pop segue attributes

配置 peek & pop segue属性

Use the Peek & Pop section of the Attributes inspector for the segue to configure the peek and pop segue attributes.

为segue使用属性检查器的Peek & Pop部分来配置peek & pop segue属性。

SEE ALSO

UIViewController

UIStoryboardSegue

UIModalPresentationStyle

UIModalTransitionStyle

UIPopoverPresentationController

Add a storyboard reference

增加一个故事板引用

Add a storyboard reference to connect to another storyboard, or organize your storyboard by adding a reference to a scene on the same storyboard.

增加一个故事板引用来连接另一个故事板，或通过增加一个引用到相似的故事板场景来组织你的故事板。

1. In Interface Builder, open the Object library.

1、在界面构建器，打开对象资源库。

2. Drag the Storyboard Reference object from the library to the canvas.

2、从资源库拖拽故事板引用对象到画布。

3. If necessary, choose View > Utilities > Show Attributes Inspector to open the inspector.

3、如果需要，选择 视图 > 实用工具 > 显示属性检查器 来打开检查器。

In the utilities area, the reference attributes appear under the Storyboard Reference heading.

在实用工具区域，引用属性显示在故事板引用标题下方。

4. From the Storyboard pop-up menu, choose the storyboard file containing the scene for the reference from the Storyboard pop-up menu.

4、从故事板弹出菜单，从故事板弹出菜单选择为引用包含场景到故事板文件。5. In the Referenced ID field, enter the storyboard ID of the referenced scene. The default is the initial controller of the referenced storyboard.

5、在引用ID字段，输入引用场景的故事板ID。默认是引用故事板的初始控制器。

6. In the Bundle field, enter the bundle containing the storyboard file.

6、在Bundle字段，输入bundle包含的故事板文件。本文英文及图片部分全部出自Apple官方文档

由于水平有限，翻译难免存在不妥之处，请读者指正

    关注 爱上Xcode