步骤 2 - 定义适用于从右到左语言环境的应用程序布局。

在此步骤中,您定义一个布局,用于定位从右到左语言环境的内容。您从 LocaleButton 创建另一个预设,占位符节点,该节点设置从右到左语言环境按钮的对齐方式。

定义从右向左书写地区的应用程序布局

在本节中,您定义从右到左语言环境的布局。您反转 Columns 属性的大小设置,以便在网格布局节点中定位元素,并将文本和纹理内容对齐到右侧。

要定义从右向左书写地区的应用程序布局:

  1. 将应用程序用户界面地区改为其中一个从右向左书写地区:

    • 在 Node Tree 中选择 IVI Grid 节点,并在 Properties 中将 Prefab Template 设置为 IVI Grid RightToLeft。

      ../../_images/ivi-grid-righttoleft-properties.png
    • 在 Screen 中,将 Locale 设置为 ar-AR 以用于 Arabic 或将 he-HE 用于 Hebrew。

      ../../_images/node-tree-ivi-grid-righttoleft.png ../../_images/screen-locale-ar.png
  2. 在 Prefabs 中选择 IVI Grid RightToLeft,并在 Properties 中的 Columns 属性中反转列大小的顺序。

    在此处更改包含工程中所有元素的列的大小,以反转应用程序用户界面的布局。

    ../../_images/ivi-grid-righttoleft.png ../../_images/ivi-grid-rtl-columns.png
  3. 在 Prefabs > IVI Grid RightToLeft 中选择 LocationInformation 节点,并在 Properties 中设置:

    • Column 到 1

    • 将 Row 设置为 0。

    在这里,您将节点从应用程序用户界面的左侧定位到右侧的 LocationInformation 中。

    ../../_images/locationinformation-selected.png ../../_images/locationinformation-column-property.png
  4. 在 Prefabs > IVI Grid RightToLeft 中选择 Locales 节点,并在 Properties 中将 Column 属性设置为 0。

    在这里,您将 Locales 节点(其中包含用于更改区域设置的区域按钮)定位到用户界面的左侧。

    ../../_images/locales-selected.png ../../_images/locales-column-property.png ../../_images/columns-set-in-application.png
  5. 在 Prefabs > IVI Grid RightToLeft 中选择 LocationInformation 节点,并在 Properties 中反转列大小的顺序,以将文本块节点和图像定位在 LocationInformation 的应用程序用户界面的右侧:

    • #0 为 486

    • #1 到 930

    • #2 到 140

    ../../_images/locationinformation-selected.png ../../_images/locationinformation-columns.png
  6. 在 Prefabs > IVI Grid RightToLeft > LocationInformation 中选择 Image 节点,并在 Properties 中将 Column 设置为 0。

    在这里将图像移到 LocationInformation 网格布局中的最左列。

    ../../_images/image-selected.png ../../_images/image-node-column-property.png ../../_images/image-column-set-in-application.png
  7. 在 Prefabs > IVI Grid RightToLeft 中,选择 Apps 节点,并在 Properties 中的 Columns 属性中反转列大小的顺序,以便将 Text Block 2D 节点定位在 Apps Grid Layout 节点中:

    • #0 到 450

    • #1 到 405

    • #2 到 270

    • #3 到 300

    • #4 到 345

    • #5 到 280

    ../../_images/apps-node-selected.png ../../_images/apps-columns-property.png
  8. 在 Prefabs > IVI Grid RightToLeft 中选择 Apps 节点,在 Properties 中添加 Column Span 属性,并将其设置为 2。

    Column Span 属性设置网格布局中单元格跨越的列数。当您将 Apps 网格布局节点的 Column Span 属性设置为 2 时,它将跨越 IVI Grid RightToLeft 节点的所有列。

    ../../_images/apps-node-selected.png ../../_images/apps-column-span.png
  9. 在 Prefabs > IVI Grid RightToLeft 中,选择 LocationInformation、Apps、Locales 节点,以及其中的所有节点(LocaleSelector 节点除外),在 Properties 中添加 Horizontal Alignment 属性,并将其设置为 Right。

    您需要添加 Horizontal Alignment 属性,因为该属性的默认值是 Left。

    ../../_images/multi-select-nodes.png ../../_images/localebutton-horizontal-alignment.png ../../_images/alignment-set-to-right.png
  10. 选择 Apps 节点,并在 Properties 中将 Horizontal Margin 属性的 Left 属性字段设置为 0,将 Right 属性字段设置为 130。

    将从右向左书写地区的边距移到右侧。

    ../../_images/apps-node-selected.png ../../_images/apps-node-horizontal-margin.png ../../_images/apps-aligned.png
  11. 在 Prefabs > IVI Grid RightToLeft > LocationInformation 中,选择 Destination 节点,并将 Horizontal Margin 属性 Right 属性字段设置为 150,将 Left 属性字段设置为 0。

    ../../_images/destination-node-selected.png ../../_images/destination-horizontal-margin.png

为从右到左的区域设置创建一个 LocaleButton 预设。

在本节中,您为从右到左的区域设置创建一个 LocaleButton 预设,以设置从右到左的区域按钮中区域名称的对齐方式。您在预设中使用 Horizontal Alignment 属性来定位 Arabic 和 Hebrew 区域的区域按钮,并使用原始预设用于从左到右的区域。

  1. 在 Prefabs 中选择 LocaleButton 预设,按 Ctrl D 进行复制,将新预设命名为 LocaleButton RightToLeft,并将原始预设重命名为 LocaleButton LeftToRight。

    ../../_images/create-new-localebutton-prefab.png
  2. 选择 LocaleButton RightToLeft > Text Block 2D 和 SelectionBar 节点,并在 Properties 中添加 Horizontal Alignment 属性,并将其设置为 Right。

    ../../_images/localebutton-righttoleft-text-block-selected.png ../../_images/localebutton-horizontal-alignment.png

本地化从左向右和从右向左书写地区的预设件

在本节中,您将 Prefab View 2D 节点 IVI Grid 作为资源添加到本地化表中,并设置每个区域使用的预设。

要本地化从左向右和从右向左书写地区的预设件

  1. 在 Node Tree > RootNode 中右键单击 IVI Grid 节点,并选择 Add Resources to a Localization Table,将该节点添加到本地化表中。

    ../../_images/add-ivi-grid-resource.png
  2. 在 Localization Table 中,选择 image1 以显示所选节点中的资源,选择 Prefab Template 并点击 Add。

    Kanzi 从 IVI Grid 节点创建一个 Resource ID,并将该节点的 Prefab Template 属性设置为使用该 Resource ID。

    ../../_images/select-displayed-prefab.png
  3. 在 Library > Localization 中,双击 Localization Table (Main) 本地化表以在 Localization Editor 中打开该表,在 Localization Editor 中将 IVI Grid.PrefabViewConcept.Prefab Resource ID 重命名为 IVI Grid,并在 Kanzi 提示是否要更新 Resource ID 的用法时单击 Yes。

    ../../_images/update-usages.png ../../_images/rename-ivi-grid-resource.png
  4. 在 Localization Editor 中,在每个区域设置的列中选择您要用于该区域设置的预设。确保将预设的 Default Value 设置为 Prefabs/IVI Grid LeftToRight。

    Kanzi 在您实例化从左到右和从右到左的区域设置的布局时使用预设资源。

    ../../_images/set-prefabs-in-localization-table.png

导出 kzb 文件

要导出 kzb 文件:

  1. 在 Node Tree 中选择 Screen 节点,并在 Properties 中将 Locale 属性设置为 Invariant Language (Invariant Country) ()。

    这样可将地区设为默认地区。

    构建应用程序时,默认语言设为 English,并加载正确的布局。

  2. 在 Library > Localization 中,双击 Localization Table (Main) 本地化表,然后单击 image2,位于 Arabic 和 Hebrew 语言环境的语言环境名称旁边。

    这样您可以标记要为其创建地区包 kzb 文件的地区,文件仅包含该地区使用的资源。Kanzi Studio 不会将本地化表中标记为地区包的地区的资源导出到主 kzb 文件中。

    ../../_images/export-locales-in-localization-editor.png
  3. 在 Kanzi Studio 中,选择 File > Export > Export KZB。此命令:

    • 为您在本地化表中标记为语言环境包的每个语言环境创建一个 kzb 文件。当 Kanzi Studio 导出语言环境包时,它会根据所包含资源的语言环境命名 kzb 文件。每个语言环境包文件仅包含该语言环境使用的资源。

    • 创建包含整个 Kanzi Studio 项目的主 kzb 文件,但不包括您在本地化表中标记为语言环境包的语言环境资源。

    • 将语言环境包 kzb 文件存储在 <ProjectName>/Application/bin/Locale_packs 目录中,或存储在您在 Project > Properties 中指定位置的 Locale_packs 目录中,在 Binary Export Directory 属性中。

    ../../_images/export-kzb-binary.png

另请参阅

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

本地化应用程序

使用 styles

使用节点预设