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

最新推荐文章于 2022-09-26 09:35:39 发布

萧萧宵小

最新推荐文章于 2022-09-26 09:35:39 发布

阅读量2k

点赞数 1

分类专栏： touchGFX 文章标签：嵌入式 gui 可视化

本文链接：https://blog.csdn.net/qq_33350808/article/details/108326251

版权

touchGFX 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

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

文章目录

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

前言

本系列文章由萧萧宵小(wurendikunn@outlook.com)编写，转载请注明出处。

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

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

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

1.图片控件的使用

touchGFX的图片控件一共有五种，如下图所示：

分别为

Image：普通图片
Scalable Image：可拉伸的图片
Tiled Image：平铺图片，可以理解为花纹图片
Animated Image：动画图片，即用一系列图片帧实现简易的动画播放
Texture Mapper：三维图片，可以让图片调整三个维度的数值，实现3D效果。

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

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

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

2.文字控件的使用

文字控件很简单，就在混合控件中的Text Area。但是要使用文字控件还需要配合文字资源设置。

先尝试将其拖入主区域，选中控件，并将其内容改为"Hello World！"，具体属性如下所示：
文字控件属性

依次说明：

控件名：最好按照代码变量规范来命名
调整位置以及大小
选择单次使用还是多次使用
显示的内容，所见即所得
通配符功能（这个之后会讲）
选择文字的字体（之后文字资源那里有设置）
排版就是左对齐、居中、右对齐
文字的颜色
文字的透明度
文字翻转的角度

接下来观察文字资源管理设置：
单个文字配置

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

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

接下来是字体设置：

内容较多，分别写一下:

字体设置选项
添加新的字体
被引用的次数
字体的名称，这个设置完之后会在字体控件的字体选择里面找到
选用的字体，会应用当前电脑存有的字体配置，不过在显示比如宋体之类的中文字体选项时有点bug
字体的大小，touchGFX的字体大小没有办法在文字控件里面设置，只能统一在字体设置中
像素深度，有1、2、4
缺省值字符，这个是用于通配符无法找到时显示的默认值的，之后的选项全部是有关通配符。
通配符字符，可以写单个要使用的通配符
控件通配符字符，同上
通配符的范围，比如设置"0-9"，就可以在通配符中显示数字了。如果输入范围外的字符，就会显示之前设置的缺省值了。
省略字符，暂时不知道用处

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

3.自定义容器的使用

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

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

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

步骤：

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

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

完成图片和文字资源的配置之后，点开自定义容器并新建一个，拖动一个图片控件和一个文字控件并调整好位置。
自定义容器设置
步骤：