步骤 1 - 为从右到左的区域设置准备应用程序。

在本教程的这一步骤中,您将学习如何为从右向左书写地区准备已本地化的应用程序。在接下来的步骤中,您将设置布局,并使用 Kanzi Engine API 根据所选地区实例化正确的预设。

获取教程

要获取该教程,请在 Kanzi Studio 的 Quick Start 窗口中点击 Projects 并选择 Tutorials 选项卡。在 Localization RTL 教程旁点击 下载。

Kanzi Studio 会将教程下载到 <KanziWorkspace>/Tutorials 目录。您可以找到:

  • 位于 <KanziWorkspace>/Tutorials/Localization RTL/Assets 目录中的教程资产:

    • Fonts 目录包含包括 Arabic 和 Hebrew 字形的字体。

    • Images 目录包含您用于从右到左语言环境的图像。

    • Text 目录包含 po 文件,这些文件包含起始点项目的翻译文本内容。

  • 位于 <KanziWorkspace>/Tutorials/Localization RTL/Completed 目录中的已完成教程。

起始项目的内容

本教程的起点是 <KanziWorkspace>/Tutorials/Localization/Completed/Tool_project/Localization.proj.kzm Kanzi Studio 工程。

起点工程包含您完成本教程所需的内容:

  • Grid Layout 2D 节点名为 IVI Grid,负责定位应用程序用户界面元素。当您为从右到左的区域调整布局时,IVI Grid 中的网格布局使您能够在行和列之间平滑移动元素,同时保持其绝对位置。

    ../../_images/ivi-grid-node.png
    • Grid Layout 2D 节点名为 LocationInformation,包含并定位应用程序内容。

      ../../_images/locationinformation-node.png
    • 名为 Apps 的 Grid Layout 2D 节点包含并定位显示在应用程序用户界面底部的应用程序名称。

      ../../_images/apps-node.png
    • 名为 Locales 的 Toggle Button Group 2D 节点包含用于更改语言环境的按钮节点。

      ../../_images/locales-node.png
      • Stack Layout 2D 节点名为 LocaleSelector,包含在 Kanzi Studio 中创建的区域设置的按钮。

        ../../_images/localeselector-node.png
  • Toggle Button 2D 预设名为 LocaleButton,表示在 Kanzi Studio 中创建的每个区域按钮实例,以及使用 Kanzi Engine API 加载的其他区域。

    ../../_images/localebutton-node.png

为从左向右和从右向左布局创建预设件

在本节中,您将从 LocaleSelector 和 IVI Grid 节点创建预设。您使用 LocaleSelector 预设来定位语言环境按钮,并使用 IVI Grid 预设来为所选语言环境设置正确的布局。在下一步中,您将更改这些预设,以便它们能够正确定位从左到右或从右到左语言环境的应用程序用户界面元素。

要为从左向右和从右向左布局创建预设件:

  1. 在 Kanzi Studio 的 Quick Start 窗口中,点击 Projects 并选择 Tutorials 选项卡。在 Localization 教程旁,点击 Open 并选择 Completed project。

    本教程的起点是 <KanziWorkspace>/Tutorials/Localization/Completed/Tool_project/Localization.proj.kzm Kanzi Studio 工程。

  2. 准备 LocaleSelector 节点,将其用作预设以定位本地按钮:

    1. 从 Node Tree > IVI Grid > Locales 将 LocaleSelector 节点拖到 Prefabs 以创建一个预设。

      当您将节点拖放到 Prefabs 窗口时,Kanzi Studio 会从该节点创建一个预设模板,并用该预设的实例替换原始节点。

      ../../_images/drag-localeselector-to-prefabs.png
    2. 在 Node Tree > IVI Grid > Locales 中删除 LocaleSelector 节点。

      ../../_images/delete-localeselector-node.png
    3. 在 Node Tree 中选择 Screen,并在 Dictionaries 中删除 LocaleSelector 别名。

      您不再需要此别名,因为您使用 Kanzi Engine API 为每个区域设置布局。

      ../../_images/select-screen1.png ../../_images/delete-localeselector-alias.png
  3. 为从左向右和从右向左书写地区布局创建预设件:

    1. 从 Node Tree 拖动 IVI Grid 节点到 Prefabs,并将其命名为 IVI Grid LeftToRight。

      您使用 IVI Grid LeftToRight 预设用于从左到右的区域设置。

      ../../_images/drag-the-duplicate-to-prefabs.png
    2. 在 Prefabs 中选择 IVI Grid LeftToRight 节点,按 Ctrl D 以复制该节点并将其重命名为 IVI Grid RightToLeft。

      您使用 IVI Grid RightToLeft 预设用于从右到左的区域设置。

      ../../_images/duplicate-ivi-grid-node.png
  4. 在 Node Tree > RootNode 中删除 IVI Grid 节点。

    ../../_images/delete-ivi-grid.png
  5. 在 Node Tree 中 按 Alt 并右键单击 RootNode,创建一个 Prefab View 2D 节点,并将其命名为 IVI Grid。

    您使用 Prefab View 2D 节点为这些区域设置实例化 IVI Grid LeftToRight 和 IVI Grid RightToLeft 预设。

    ../../_images/create-prefab-view.png ../../_images/ivi-grid-in-project.png
  6. 选择 IVI Grid Prefab View 2D 节点,并在 Properties 中添加并设置 Prefab Template 属性为 IVI Grid LeftToRight。

    当您实例化具有 Prefab View 节点的预设时,Kanzi 读取 Prefab Template 属性的值,并将该属性指向的预设作为 Prefab View 节点的子节点添加。

    ../../_images/displayed-prefab.png
  7. 在 Prefabs 中,将 LocaleSelector 预设拖到 IVI Grid LeftToRight > Locales 节点以创建一个预设占位符。

    您使用 LocaleSelector 预设占位符来实例化用于从左到右和从右到左区域设置的 LocaleSelector。

    ../../_images/localeselector-in-ivi-grid-lefttoright.png
  8. 对 IVI Grid RightToLeft 节点重复上一步,以为 LocaleSelector 节点创建一个预设占位符。

    ../../_images/localeselector-in-ivi-grid-righttoleft.png

在 Preview 中,当您点击语言环境按钮时,您还无法看到语言环境之间的切换。在本教程的最后一步运行应用程序时,您可以看到语言环境的切换。

导入用于从右到左语言环境的 po 文件。

在本节中,导入包含 Arabic 和 Hebrew 区域设置的翻译文本的 po 文件。

要为从右向左书写地区导入 po 文件:

  1. 在 Library > Localization 中,右键单击 Localization Table (Main) 本地化表,选择 Import Localization Table Manually,转到 <KanziWorkspace>/Tutorials/Localization RTL/Assets/Text,并导入包含 Arabic 和 Hebrew 语言环境文本字符串的 ar-AR.po 和 he-HE.po 文件。

    Kanzi Studio 创建 po 文件中指定的语言环境,并将 po 文件中的翻译添加到本地化表中。

    ../../_images/import-localization-table-manually.png
  2. 在 Library > Localization 中双击 Localization Table (Main),并在 Localization Editor 中设置 LocaleDisplayName:

    • 对于 Arabic 输入 العربية。

    • 对于 Hebrew 输入 עברית。

    LocaleDisplayName 是一个文本资源,用于设置在应用程序用户界面中显示的区域设置名称。

    ../../_images/set-localedisplayname.png

设置从右向左书写地区使用的图像

在本节中,您将为从右向左书写地区使用的应用程序背景图像创建纹理笔刷,并设置这些地区中使用的图像。

要设置从右向左书写地区使用的图像:

  1. 在 Assets 中,点击 Import Assets 并从 <KanziWorkspace>/Tutorials/Localization RTL/Assets/Images 导入所有图像。

    您导入用于 Arabic 和 Hebrew 区域设置的图像以及用于从右到左区域设置的应用程序背景图像。当您导入图像时,Kanzi Studio 会从导入的图像创建一个纹理。

    ../../_images/assets-import-assets.png
  2. 在 Library > Materials and Textures 按 Alt 并右键单击 Brushes 中,选择 Texture Brush,并将其命名为 Background RightToLeft。

    ../../_images/create-the-texture-brush.png ../../_images/name-the-background-brush.png
  3. 在 Library 中选择 Background RightToLeft 画笔,并在 Properties 中将 Brush Texture 设置为 Background RightToLeft 纹理。

    ../../_images/brush-texture.png
  4. 在 Prefabs 中选择 IVI Grid RightToLeft 预设,并在 Properties 中将 Background Brush 设置为 Background RightToLeft。

    Background RightToLeft 背景画刷为从右到左的区域设置应用背景图像。

    ../../_images/ivi-grid-righttoleft.png ../../_images/background-brush-rtl.png
  5. 在 Localization Editor 中,将 Arabic 区域设置的 Image 设置为 Image07,将 Hebrew 设置为 Image08。

    为 Arabic 和 Hebrew 区域设置应用程序用户界面中显示的图像。

    ../../_images/set-textures-in-localization-editor.png

为从右向左书写地区创建样式

在本节中,您将导入包含 Arabic 和 Hebrew 字形的字体,并创建为这些区域设置字体和文本对齐方式的样式。

要为从右向左书写地区创建样式:

  1. 选择 File > Import > Import Fonts,点击 Browse,进入 <KanziWorkspace>/Tutorials/Localization RTL/Assets/Fonts 目录,并导入包含 Arabic 和 Hebrew 字形的字体:

    • 对于 Arabic 使用 notonaskharabic-regular.ttf。

    • 对于 Hebrew 使用 notosanshebrew-regular.ttf。

    确保将您在 Kanzi 应用程序中要包含的文本的所有字形包含在使用的字体中。

    ../../_images/import-arabic-and-hebrew-fonts.png ../../_images/library-fonts.png
  2. 在 Library > Styles 中选择 LocaleStyle,按两次 Ctrl D 以复制两次,并根据使用每种样式的区域命名样式。

    例如,将样式命名为:

    • 对于 Arabic 区域设置 LocaleStyle-ar。

    • 对于 Hebrew 区域设置 LocaleStyle-he

    ../../_images/localestyles-ar-he.png
  3. 选择 LocaleStyle-ar,并在 Properties 中添加并设置:

    • Font Family 到 Noto Naskh Arabic

    • Text Concept > Text Horizontal Alignment 到 Right

    您使用此样式为 Arabic 区域设置正确的字体和文本对齐。

    ../../_images/localestyle-ar-properties.png
  4. 对 LocaleStyle-he 重复上一步,但将 Font Family 属性设置为 Noto Sans Hebrew。

    ../../_images/localestyle-he-properties.png
  5. 在 Localization Table 中,在您要应用所创建样式的每个区域设置的列中,双击 LocaleStyle 单元格并设置:

    • Arabic 设置 LocaleStyle-ar。

    • Hebrew 设置 LocaleStyle-he。

    ../../_images/all-locales-in-editor.png

另请参阅

教程:本地化您的应用程序

本地化应用程序

使用 styles

使用节点预设

导入字体