跳转到主要内容

第1部分——字体排印和语言

在教程6的第一部分中，我们将首先了解如何创建新的字体排印，然后了解如何变更应用程序的语言。

第1步：设置屏幕​

对于本教程，我们将使用一个简单的屏幕来显示一些文本。 要在语言之间进行切换，我们要使用一个按钮控件。 我们还需要另一个按钮来“调整”一下文本：变更内容、颜色、行距和缩进。

Let us begin with a 800*480 dimensioned new blank canvas (compatible for STM32F469I DISCO B-07 discovery kit for example). 插入控件并更新属性，如下列表格所示。

控件属性
Box
  • 名称：backgroundBox
  • 位置:
    • X: 0, Y: 0
    • W: 800, H: 480
  • 外观:
    • 颜色： #FFFFFF
TextArea
  • 名称：descriptionTextArea
  • 位置:
    • X: 110, Y: 85
    • W: 580, H: 70
  • 文本:
    • Translation: In this tutorial, you will learn
      how to use and configure a TextArea
  • 外观:
    • 颜色：#FF0000
TextArea
  • 名称：informationTextArea
  • 位置:
    • X: 190, Y: 180
    • W: 420, H: 30
  • 文本:
    • 翻译：行距为<>，颜色为<>
    • 通配符: 1
      • 使用通配符缓冲区：有
      • 初始值： 0
      • 缓存大小：10
    • 通配符 2：
      • 使用通配符缓冲区：有
      • 初始值：红色
      • 缓存大小：10
带标签的按钮
  • 名称：languageButton
  • 位置:
    • X: 110, Y: 300
  • 文本:
    • 翻译：语言
带标签的按钮
  • 名称：appearanceButton
  • 位置:
    • X: 450, Y: 300
  • 文本:
    • 翻译：外观

应用程序的画布目前应该是这样的：

应用程序画布

第2步：创建新字体排印​

这一步中，我们将创建两个新的字体排印，之前创建的TextAreas和Button（按钮）将会用到这些字体排印。

创建字体排印​

创建新字体排印

在TouchGFX 设计器中，进入Text（文本）选项卡，然后进入屏幕顶部的Typography（字体排印）部分。 点击“+”图标创建新字体排印。

正如您在右侧看到的，使用新字体排印之前，有多个设置需要配置：

  • 字体排印id：为您的字体排印命名。
  • 字体：您可以在Windows中所有已安装的字体间进行选择，也可以导入您选择的字体（具体操作见本教程的下一步）。
  • 大小：字体排印的字体大小。
  • Bpp：位/像素。 每个像素用来代表字体的位数。
  • Direction（方向）：如果应用程序从左向右或从右向左写，则可根据应用程序中使用的语言选择方向。 默认设置为“从左到右”。
  • Fallback Characters（回退字符）：如果TouchGFX需要渲染字符，但字形不可用，则使用指定的字符。
  • Wildcard Characters（通配符）：可以在TextArea的通配符内显示的字符列表。
  • Widget Wildcard Characters（控件通配符）：某些控件需要的字符。 例如，数字时钟控需要以下字符才能正常工作：
  • Wildcard Ranges（通配符范围）：和Wildcard Characters类似，但可指定范围。
  • Ellipsis Characters（省略号字符）：此字符用于截断文本区域中的长文本。

现在添加以下字体排印：

字体排印Id语言设置
informationTypography
  • 字体：Times New Roman
  • Size: 20
    • Wildcard 范围：a-z,0-9,A-Z
    descriptionTypography
    • 字体：Comic Sans MS
    • Size: 26

      变更控件字体排印​

      创建字体排印后，我们可以变更控件字体排印：

      变更informationTextArea的字体排印

      返回Canvas（画布）选项卡并选择informationTextArea。 在右侧面板的文本类别中，可以修改字体排印。 将其变更为informationTypography。

      然后对其它控件执行同样的操作：

      控件字体排印
      descriptionTextAreadescriptionTypography
      appearanceButtoninformationTypography
      languageButtoninformationTypography

      现在画布应如下所示：

      应用程序画布

      第3步：变更语言​

      在本节中，我们将了解如何向应用程序添加多种语言。

      TouchGFX支持Unicode基本多文种平面的大多数语言。 事实上，支持从左到右或从右到左的书写系统（垂直书写不支持），因此包括阿拉伯语、英语、繁体中文和简体中文等语言。 如果您想了解更多支持的语言，请参阅：语言和字符|TouchGFX文档

      创建新语言​

      本例中，我们决定添加中文和韩语，以了解TouchGFX 设计器在处理中文字符时的行为。

      创建新语言

      选择左侧面板上的Texts（文本），选择 Unsorted（未排序），然后单击“+”，如上图所示。 将出现一个小窗口来添加新语言。 为韩语创建名为KO的语言，为汉语创建名为CH的语言。

      添加新语言后，我们将手动输入该应用程序每个文本的所有翻译。 请注意，我们希望一些文本仍为英语，所以要做的只是不翻译语言并将其以英语表示。

      为两种语言指定以下翻译：

      GBKOCH
      红色红色红色
      000
      外观外观外观
      语言语言语言
      行距为<>，颜色为<>行距为<>，颜色为<>行距为<>，颜色为<>
      本教程中，您将学习如何使用
      并配置TextArea      		이 자습서에서는 만드는 방법을 배웁니다
      텍스트 영역 및 사용 방법      		在本教程中 您将学习如何创建
      文本区域以及如何使用它们

      添加语言和翻译后，文本选项卡应如下所示：

      所有翻译

      按F4生成代码：向代码中添加这两种语言（TextKeysAndLanguages.hpp文件）。

      generated/texts/include/texts/TextKeysAndLanguages.hpp
      /* DO NOT EDIT THIS FILE */
      /* This file is autogenerated by the text-database code generator */

      #ifndef TOUCHGFX_TEXTKEYSANDLANGUAGES_HPP
      #define TOUCHGFX_TEXTKEYSANDLANGUAGES_HPP

      enum LANGUAGES
      {
          GB,
          KO,
          CH,
          NUMBER_OF_LANGUAGES
      };

      enum TEXTS 
      {
          T___SINGLEUSE_RCBO,
          T___SINGLEUSE_VMX0,
          T___SINGLEUSE_V3A0,
          T___SINGLEUSE_WECC,
          T___SINGLEUSE_2RJI,
          T___SINGLEUSE_E2TO,
          NUMBER_OF_TEXT_KEYS
      };

      #endif // TOUCHGFX_TEXTKEYSANDLANGUAGES_HPP

      变更语言​

      要使用TouchGFX 设计器变更应用程序使用的默认语言，请进入屏幕左下方的Config。 单击所选语言并将语言变更为“KO”。 如果现在返回画布选项卡，将看到语言已变更。 变更语言如果您“运行模拟器”，会发现TouchGFX 设计器无法显示韩语字符。

      运行模拟器

      事实上，为descriptionTextArea（“Comic sans MS”）选择的字体不支持韩文或中文字符。 您需要确保所使用的字体支持要显示的字符。

      我们选择的字体中，没有一种支持中文和韩语这样的特殊字符。 因此，我们现在要导入两种能处理此类语言的字体。

      Note
      TouchGFX 设计器上已有的字体并非我们所有。 您需要确保您拥有这些字体的许可证，以便将其用于商业目的。

      添加字体​

      下载支持韩文或中文字符的两种字体。 本例中，我们使用了以下免费使用的Google开源字体：

      接下来，在assets\fonts目录中添加字体。 添加两种字体后，关闭TouchGFX 设计器，然后重新打开。

      变更一种语言的字体

      如果您返回TouchGFX 设计器并单击描述descriptionTypography的字体列表，您将看到刚才导入的字体。 如果您单击默认值旁边的“+”按钮，将显示一个带有语言的菜单。 您可以选择语言并为其添加特定字体。

      添加“KO”并将韩语字体变更为“Noto Sans KR Thin”。 中文的操作相同，添加“CH”并将字体变更为“Noto Sans SC Thin”。 仅适用于descriptionTypography。

      如果您再次单击“运行模拟器”，您可以看到这次TouchGFX 设计器支持韩语字符：

      运行模拟器

      与之前一样，您可以将语言（Config（配置）>General（常规）>Selected Language（所选语言）并将其变更为“CH”）变更为中文，并查看其是否能正常工作。

      用代码变更语言​

      现在添加一些交互并编写一些代码。 在本部分中，我们将看到如何在单击语言按钮时变更应用程序的语言。

      首先，创建以下交互：

      交互属性
      ChangeLanguage
      • 触发条件：点击按钮
      • 点击源：语言按钮
      • 操作：调用新的虚函数
      • 函数名称：changeLanguage

      按“Generate Code（生成代码）”或“Run Simulator（运行模拟器）”，TouchGFX 设计器将生成指定的虚函数。

      我们首先整合按钮的函数。 添加以下代码：

      TouchGFX/gui/include/gui/screen1_screen/Screen1View.hpp
      class Screen1View : public Screen1ViewBase
      {
      public:
          ...
          virtual void changeLanguage();
      protected:
          ...
      };

      并在TouchGFX/gui/src/screen1_screen/Screen1View.cpp中添加以下代码以实现该功能：

      TouchGFX/gui/src/screen1_screen/Screen1View.cpp
      void Screen1View::changeLanguage()
      {
          int idLanguage = Texts::getLanguage()+1;
          if (idLanguage == NUMBER_OF_LANGUAGES){
              idLanguage = 0;
          }
          Texts::setLanguage(idLanguage);
          Screen1View::invalidate();
      }

      记得添加所需的include，以便使用getLanguage()函数：

      #include <texts/TextKeysAndLanguages.hpp>

      Texts::getLanguage()用于获取语言id，并返回枚举值。 所以在这里，如果函数返回1，它对应英语，2对应韩语，3对应汉语。 它是TextKeysAndLanguages.hpp文件中的LANGUAGE枚举的值。

      NUMBER_OF_LANGUAGES返回可用语言总数。

      我们创建了一个名为idLanguage的计数器，在每次单击语言按钮时变更语言，并在达到最后一种语言（“if”条件）时对其进行循环。

      完成Texts::setLanguage(idLanguage)；用于分配新语言。

      现在，如果您单击“Run Simulator（运行模拟器）”并按下语言按钮，文本的语言将变更

      Note
      请注意，在TouchGFX 设计器中，您不能只变更特定文本的语言。 通过TouchGFX 设计器和代码设置语言将修改所有包含文本的控件语言。 然而，我们希望一些文本明确保留为英语。 这就是我们没有翻译步骤3中所有文本的原因。

      教程6的第一部分到此结束。 我们邀请您继续本教程的第二部分，您可以学习如何实现“外观”按钮。 您还将了解如何使用informationTextArea的通配符。