您的位置: 首页  >  文章  >  touchGFX手环滚动菜单的实现（一）

touchGFX手环滚动菜单的实现（一）

分类: 文章 • 2024-12-27 09:10:16

touchGFX手环滚动菜单的实现（一）

文章目录

前言

本系列文章由萧萧宵小([email protected])编写，转载请注明出处。

文章链接：https://blog.****.net/qq_33350808/article/details/108326251

本文涉及到的软件为touchGFX Designer 4.13.0。本文学习如何实现手环中滚动菜单，希望在具体实例中学习各种控件的使用，在学习过程中会涉及到图片控件、文字控件、自定义容器、滚动控件、动作事件等等。内容过多，分几次发布。

首先学习图片控件、文字控件、自定义容器和滚动控件的使用，完成滚动菜单的UI设计。

1.图片控件的使用

touchGFX的图片控件一共有五种，如下图所示：
touchGFX手环滚动菜单的实现（一）
分别为

  1. Image：普通图片

  2. Scalable Image：可拉伸的图片

  3. Tiled Image：平铺图片，可以理解为花纹图片

  4. Animated Image：动画图片，即用一系列图片帧实现简易的动画播放

  5. Texture Mapper：三维图片，可以让图片调整三个维度的数值，实现3D效果。

大家可以试试将图片控件拖到主屏幕，并观察有哪些参数可以修改。

这里简单讲一下图片导入的注意事项：

  1. 图片导入可以直接将可以使用的图片复制到项目目录下的"TouchGFX\assets\images"中
  2. 图片的名字使用英文，图片的格式为PNG
  3. 导入图片之前应该依据UI界面的大小调整其尺寸，千万不要想着用可拉伸的图片控件在项目中再修改图片尺寸，因为项目在编译时会将原大小的图片作为图片资源保存到项目。如果将一个150*150的图片放入资源库，结果只用了50*50的尺寸，就会造成内存的巨大浪费，毕竟嵌入式中flash空间有限。
  4. 图片参数中的图片名应该像撰写代码变量名一样规范，因为在之后的逻辑代码编写中就是直接引用图片名。

2.文字控件的使用

文字控件很简单，就在混合控件中的Text Area。但是要使用文字控件还需要配合文字资源设置。
touchGFX手环滚动菜单的实现（一）
先尝试将其拖入主区域，选中控件，并将其内容改为"Hello World！"，具体属性如下所示：
touchGFX手环滚动菜单的实现（一）

依次说明：

  1. 控件名：最好按照代码变量规范来命名

  2. 调整位置以及大小

  3. 选择单次使用还是多次使用

  4. 显示的内容，所见即所得

  5. 通配符功能（这个之后会讲）

  6. 选择文字的字体（之后文字资源那里有设置）

  7. 排版就是左对齐、居中、右对齐

  8. 文字的颜色

  9. 文字的透明度

  10. 文字翻转的角度

接下来观察文字资源管理设置：
touchGFX手环滚动菜单的实现（一）

如图所示的是单个文字的资源配置，大部分都能理解，不需要额外讲解了，可以看到多出一个添加语言的功能。没错，如你所想，touchGFX的UI中可以设置多个国家的语言，让产品在出口到国外时没有任何障碍。如何使用这个功能我之后会讲。

接下来是多次使用文字资源的配置：
touchGFX手环滚动菜单的实现（一）
和上一个配置参数相比多了添加资源、引用次数和资源ID，很好理解，需要注意的是资源ID同样需要用代码变量的命名规范，以便之后代码的编写。

接下来是字体设置：
touchGFX手环滚动菜单的实现（一）
内容较多，分别写一下:

  1. 字体设置选项

  2. 添加新的字体

  3. 被引用的次数

  4. 字体的名称，这个设置完之后会在字体控件的字体选择里面找到

  5. 选用的字体，会应用当前电脑存有的字体配置，不过在显示比如宋体之类的中文字体选项时有点bug

  6. 字体的大小，touchGFX的字体大小没有办法在文字控件里面设置，只能统一在字体设置中

  7. 像素深度，有1、2、4

  8. 缺省值字符，这个是用于通配符无法找到时显示的默认值的，之后的选项全部是有关通配符。

  9. 通配符字符，可以写单个要使用的通配符

  10. 控件通配符字符，同上

  11. 通配符的范围，比如设置"0-9"，就可以在通配符中显示数字了。如果输入范围外的字符，就会显示之前设置的缺省值了。

  12. 省略字符，暂时不知道用处

这里引出一个touchGFX中文字管理的重要内容：通配符(Wildcard)。因为在UI中不可能总是显示预定好的字符，也存在从外界获得的额外字符（比如温度传感器的数值，手机传过来的通知等等），这时候就需要额外的点阵图来显示未知的字符。touchGFX为了严格管理字符点阵图的内存大小，也不可能将所有的字符的点阵图存储进去，所以需要在这里指定可能用到的字符的范围。

3.自定义容器的使用

由于touchGFX自带的控件并不多，想实现额外的功能只能使用自定义容器，它可以将单个的控件组合起来形成一个复合的控件来使用，这样也有利于批量控件的整理。

上面已经学会了图片和文字控件的使用，这里制成一个简单的自定义容器供滚动菜单使用。

首先建立一个新项目，项目模版选择PC纯仿真（如果你有ST的官方开发板，也可以选择自己的，这样就可以欣赏实际效果了），UI模版选择空，由于手环很小，大小就选240*240。进入项目，首先配置好要用的图片资源和文字资源，网上随便找找即可,大家可以根据自己喜好来选择。下面是我自己插入的图片资源。
touchGFX手环滚动菜单的实现（一）
touchGFX手环滚动菜单的实现（一）
步骤：

  1. 将准备好的图片复制到项目目录下的"TouchGFX\assets\images"中，确保图片的路径不含中文，同时图片格式要适当，我这里用的是64*64的PNG格式图片。
  2. 在文字字体配置界面新建一个中文字体，字体大小设为20，我这里使用的字体格式是youyuan（幼圆）
  3. 在文字资源配置界面新建一些字符，要和图标一一对应

需要注意的是红框框出来的地方，有些会在之后的编程中用到，中文字体的选择需要先在字体资源配置中添加一个新的字体。不同语言我只添加了中文和英文，之后会用到。

完成图片和文字资源的配置之后，点开自定义容器并新建一个，拖动一个图片控件和一个文字控件并调整好位置。
touchGFX手环滚动菜单的实现（一）
步骤：

  1. 新建一个文字控件拖到自定义容器中，NAME属性改为iconText，文字选用TEXT Resource中的内容。
  2. 新建一个图片控件拖到自定义容器中，NAME熟悉改为icon，IMAGE选用之前导入的图片。
  3. 修改自定义容器的大小和所有控件的位置，将NAME改为StartMenu。

其中文件控件选择刚才创建的文字资源，图片同理。注意红框中各个控件的名称，这些在之后的编程中也会用到（可以根据个人喜好修改）。

4.滚动控件的使用

接下来添加一个主界面，再将ScrollWhell控件和Box控件拖入其中，其中Box控件放在下面，填充整个界面当作背景。
touchGFX手环滚动菜单的实现（一）
步骤：

  1. 添加新的界面
  2. 拖入Box控件，修改大小填充整个界面，颜色改为白色充当背景。
  3. 拖入scrollWhell控件，修改Item Template为之前定义的自定义容器，修改滚动菜单的个数和导入图片个数匹配，勾选Circle（循环滚动）。

ScrollWhell控件的设置如上图所示，同样注意红框中控件的名称，编程需要用到。

后记

至此滚动菜单显示的UI已经制作完成，下一章完成后台的逻辑控制。

本系列文章总目录：touchGFX学习记录

相关推荐