Lay out user interfaces - Add device-specific variations

制定用户界面 - 添加特定于设备的变化x0a1、使用不同设备配置查看用户界面x0a2、为不同设备配置创建用户界面变化x0a3、使用检查器编辑属性值基于变化的特征...

翻翻小说 弹一弹钢琴

顺手回几封电子信

View the user interface using different device configurations

使用不同设备配置查看用户界面

In Interface Builder, use the device configuration pane to view the layout using different device configurations. For example, the layout of an iOS app can be different on an iPhone and iPad and using portrait or landscape orientation. The user interface of a tvOS app may be different using a light or dark interface style. The first time you open a user interface file, pick the device you expect most users of your app to use, and then create variations of the user interface for other devices as needed.

在界面构建器，使用设备配置面板查看不同设备配置的布局。例如，iOS应用程序的布局在iPhone和iPad和使用不同方向（横向或纵向）上都是不同的。tvOS应用程序的用户使用亮和黑界面样式时界面也可能不同。首先你打开用户界面文件，选择你期望大多数使用你应用程序的用户的设备，然后创建其他所需设备的用户界面变化。

To open the device configuration pane, click the “View as” button in the layout bar below the canvas.

要打开设备配置面板，点击画布下方的布局栏上的“视图作为”按钮。Select a device: In the Device area, select a device. The device family you select appears next to “View as” in the layout bar. For iOS apps, select an iOS device family, and for watchOS apps, select a Apple Watch size.

选择一个设备：在设备区域，选择一个设备。所有可选的设备会出现在布局栏“视图作为”的旁边。例如iOS应用程序，选择一个iOS设备，watchOS应用程序，选择一个Apple Watch尺寸。



Select an orientation: In the Orientation area, select the portrait or landscape icon.

选择一个方向：在方向区域，选择横向或纵向图标。Select an adaptation: In the Adaptation area, select an adaptation, a variation in the amount of screen space available to your app—for example, select a split view for an iPad device.

选择一个适配器：在适配器区域，选择一个适配器，对你的应用程序可用的屏幕空间进行变化——例如，给iPad设备选择一个拆分视图。Select an interface style: In the Interface Style area, select an interface style that affects the visual appearance—for example, the light or dark interface style on tvOS.

选择一个界面样式：在界面样式区域，选择一个界面样式作用于可视化外观——例如，在tvOS上的亮和黑界面样式。

SEE ALSO

Create user interface variations for different device configurations

Edit trait-based variations of property values using the inspector

Create user interface variations for different device configurations

为不同设备配置创建用户界面变化

In Interface Builder, you can add, remove, and edit variations of the user interface for different device configurations using the device configuration pane. Before you create a variation, choose a device configuration that you want to vary.

在界面构建器，你可以使用设备配置面板增加、删除和编辑不同设备配置的用户界面变化。在你创建变化之前，选择一个你想要的产生差异的设备配置。1. In the devices configuration pane, click the “Vary for” button.

1、在设备配置面板，点击“差异为”按钮。

The device configuration pane shows all of the affected devices for this configuration.

设备配置面板显示所有此设置受影响的设备。2. For iOS apps, in the popover that appears, select the size class (width, height, or both).

2、对于iOS应用程序，在弹出菜单出现，选择尺寸类（宽、高或两者）。

The size class traits define an abstract or real screen size on an iOS device. After selecting traits, dismiss the popover by clicking anywhere in Interface Builder.

尺寸类特征在iOS设备上定义一个抽象的或真实的屏幕尺寸。选择特征后，通过点击界面构建器的任意位置来让弹出菜单消失。The device configurations pane shows the affected devices.

设备配置面板显示受影响的设备3. Make the changes for this device configuration in Interface Builder.

3、在界面构建器对设备配置进行修改。

While in the variation mode, any changes to the canvas, create a variation for the current device configuration or update an existing variation.

当处于变化模式时，任意对画布上进行修改，对当前设备配置建立变化或更新已存在的变化。

4. Click the “Done Varying” button.

4、点击“完成变化”按钮。

Interface Builder stops adding variations to view attributes and constraints on the canvas.

界面构建器在画布上停止对视图属性和约束增加变化。

SEE ALSO

View the user interface using different device configurations

Edit trait-based variations of property values using the inspector

Auto Layout Guide

Edit trait-based variations of property values using the inspector

使用检查器编辑属性值基于变化的特征

You can customize the property values of objects for different device traits using the Attributes inspector and Size inspector. Consequently, you create variations of the user interface similar to using the device configuration pane.

你可以为不同设备特征使用属性检查器和尺寸检查器自定义对象的属性值。因此，你可以使用设备配置面板创建用户界面相似的变化。Add a trait-based property value


增加一个基于属性值的特征

1. In Interface Builder, select an object on the canvas.

1、在界面构建器，在画布上选择一个对象。

2. Choose the inspector containing the desired property.

2、选择包含想要属性的检查器。

3. Click the Add Customization button (+) next to the property control.

3、点击属性控件旁边的增加自定义按钮。

4. In the pop-up, choose a device configuration.

4、在弹出菜单，选择一个设备配置。

For watchOS apps, choose an Apple Watch device and for tvOS apps, choose an interface style. For iOS apps, choose a device configuration represented as a size class and a color gamut from the pop-up.

对于watchOS应用程序，选择一个Apple Watch设备，对于tvOS应用程序，选择一个界面样式。对于iOS应用程序，从弹出菜单选择一个设备配置表示类的大小和颜色范围。After choosing a device configuration, a device configuration-specific control appears below the property control.

选择一个设备配置后，指定设备配置控件会在属性控件下方显示。

5. Change the device configuration-specific property value.

5、修改指定设备配置的属性值。

The change applies only to that device configuration.

这个改变只在设备配置上使用。

Remove a trait-based property value

移除基于属性值的特征

1. In Interface Builder, select an object on the canvas.

1、在界面构建器，在画布上选择一个对象。

2. Choose the inspector containing the desired property.

2、选择包含想要属性的检查器。

3. Click the Remove Customization button (x) next to the device configuration-specific control.

3、点击特定控件设备配置旁边的移除自定义按钮。The customization is removed from the property.

从属性中移除自定义。

SEE ALSO

View the user interface using different device configurations

Create user interface variations for different device configurations

Auto Layout Guide

本文英文及图片部分全部出自Apple官方文档

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

    关注 爱上Xcode