第 3 步 - 创建用户界面结构

在本步骤中，您将学习如何为 Kanzi 应用程序创建用户界面结构，并向应用程序添加现成的内容。

创建用户界面结构

使用 Activity 和 Activity Host 节点在应用程序中创建不同的屏幕和用户界面部分。这些节点可以包含应用程序的一部分，甚至可以在您的应用程序中包含完整的应用程序。

使用 Activity Browser 来创建和检查活动和活动主机，并模拟活动的激活。Activity Browser 显示应用程序中活动的所有可能的 UI 状态。

您可以在 Preview 窗口下方找到 Activity Browser 窗口。

要创建用户界面结构：

1. 在 Activity Browser 中，点击 并选择 Create Root Parallel Activity Host 2D。

   Kanzi Studio 在 Node Tree 中的 Screen 节点下创建一个 Parallel Activity Host 节点。在 Activity Browser 中，并行活动主机是紫色的。

   Activity Host 定义了其子活动何时处于活动状态的规则。Parallel Activity Host 可以同时激活多个子活动。此功能通常使其成为应用程序顶级节点的最合适的活动宿主类型。

   

2. 在 Activity Browser 窗口中，在 Root Parallel Activity Host 下方点击 ，选择 Create Exclusive Activity Host，并将该 Activity Host 命名为 Application Screens。

   使用此 Exclusive Activity Host 显示应用程序的屏幕。

   一个独占活动主机一次只能激活其一个子活动。在 Activity Browser 中，独占活动主机是青色的。

   

3. 在 Activity Browser 窗口中，在 Application Screens 下方点击 ，选择 Create Activity，并将活动及其预设件命名为 Home。

   

   Activity Browser 显示 Activity Host 节点与 Activity 节点之间的关系。Prefabs 窗口显示这些活动处于活动状态时可以实例化的预设件。

   

4. 重复上一步，创建 Settings 和 Media 活动。

   

   小技巧

   要在 Activity Browser 窗口中平移和缩放：

   动作	快捷键
   平移	点击鼠标中键并拖动。 按下 Space 键，然后单击并拖动鼠标左键。
   缩放	滚动鼠标滚轮。 按下 Shift 和 Alt 键，然后单击并拖动鼠标左键。

向活动添加内容

Kanzi Studio 附带可添加到应用程序中的 2D 和 3D 资源。此工厂内容非常适合用于创建原型，而无需花费时间创建资源来展示您的想法。

向活动添加内容：

1. 在 Asset Packages 窗口中，选择 Factory Content 资产源。

   您可以在 Preview 窗口下方找到 Asset Packages 窗口。

   

2. 向 Settings 活动添加内容：

   1. 从 Asset Packages 窗口将 Car 资产拖到 Prefabs 窗口。

      当您将内容放到 Prefabs 窗口时，Kanzi Studio 会将该内容作为预设件添加到您的工程中。

      

   2. 在 Prefabs 中，拖动 Car 预设件并将其放到 Settings 预设件上。

      这样您就在 Settings 活动预设件中实例化了 Car 预设件。

      

3. 重复上一步，但向工程添加 Cover Flow 资产，并将其添加到 Media 活动。

   

4. 从 Node Tree 将 RootNode 拖到 Prefabs，并将其放到 Home 活动预设件上。

   这样您就将内容从节点树移到了 Home 活动预设件中，并且该内容在 Home 活动处于活动状态时可见。

   

5. 在 Prefabs 窗口中，选择 Image 节点并按下 Ctrl H 键以显示 Image 节点。

   

6. 在 Activity Browser 窗口中，选择 Home 活动。在侧面板中，将 InitiallyActive 属性设置为启用。

   通过这种方式，当活动主机处于活动状态时，您可以将活动设置为活动状态。为了表示这一点，Activity Browser 会为所有此类活动显示 图标。

   

Activity Browser 模拟应用程序中活动的激活。要在 Preview 中查看活动的内容，可以在 Activity Browser 中激活一个活动。在您要激活的活动中，点击 。

在 Activity Browser 中，活动的活动标记为 ，其边框为蓝色。

默认情况下，Kanzi 在 Activity 节点之间使用即时迁移。不过，您可以添加并定义自己的迁移。

在本教程的下一步中，您将创建用于在 Activity 节点之间切换的按钮。

导入内容

在本节中，您将学习如何将使用其他工具创建的内容导入到 Kanzi Studio 工程，并在 Kanzi 应用程序中使用该内容。

将内容导入到工程时，Kanzi Studio 会将导入的内容复制到工程目录，并根据需要在 Library 窗口中从该内容创建可在工程中使用的 Kanzi 资源。例如，导入 PNG 图像时，Kanzi Studio 会创建一个 Single Texture 资源，以便您在工程中使用该图像。

您可以通过以下方式将内容导入工程并查看：

• 在位于 Preview 窗口下方的 Assets 窗口中

• 在主菜单中，选择 File > Import，然后选择要导入的内容类型

要导入内容：

1. 在 Assets 窗口中，点击 Import Assets，选择您要导入的内容，然后点击 Open。

   例如，转到 <KanziWorkspace>/Tutorials/Getting started/Assets 并导入所有内容。

   Kanzi Studio 会将导入的内容复制到工程目录。您可以在 Library 窗口的 Resource Files 中访问该内容。Kanzi Studio 会在 Library 窗口中从该内容创建 Kanzi 资源，以便您在工程中使用导入的内容。

   

2. 在 Activity Browser 窗口中，激活 Home 活动，以在 Preview 中显示该活动。

   

3. 在 Prefabs 窗口中，选择 Home > RootNode > Image 节点。在 Properties 窗口中，将 Image 属性设置为 Road 纹理。

   

4. 在 Properties 窗口中，添加并设置这些属性：

   • Horizontal Alignment 到 Stretch

   • Vertical Alignment 到 Stretch

   • Content Stretch 到 Uniform to fill

     使用 Content Stretch 属性来设置节点如何在不改变节点大小的情况下拉伸此节点中的内容。

   

在 Activity Browser 中激活活动时，Preview 会显示当前处于激活状态的活动的内容。

上一步 下一步

另请参阅

要了解有关 Kanzi Studio 工厂内容的更多信息，请参阅 Factory Content 资源。

要了解有关将资产导入到 Kanzi Studio 的更多信息，请参阅 导入。