使用TouchGFX开发STM32界面应用之入门篇（四）-- 定制控件-1

只看该作者 · 2020-6-23 19:02

【海东青电子原创**，转载请注明出处：https://www.jianshu.com/p/7c9a0533c600】
（实例代码下载地址：https://github.com/haidongqing/tgfx-customscroll）
如果你看过这个TouchGFX入门系列的前三篇**（1，2，3），是否有这种印象：TouchGFX似乎也不过如此嘛，图形界面很一般呀。其实，我们只是看到了冰山的一角，TouchGFX功能非常强大，必然十分复杂，实际上它是能做出非常酷炫的界面的，今天介绍一个用TouchGFX制作的“滚轮”控件，谈不上炫酷，只是稍有“姿色”，但代表了TouchGFX对用户定制控件的强大支持能力。同时，也以这个定制的控件作为本次TouchGFX入门篇系列的结束。

作者：海东青电子
链接：https://www.jianshu.com/p/7c9a0533c600
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

只看该作者 · 2020-6-23 19:04

本讲中，我们将制作一个可以上下滑动的菜单条，它可以像老式拨盘电话机一样沿着圆弧方向滑动：

只看该作者 · 2020-6-23 19:04

拨盘电话？暴露年龄了，长得像这个样子的东东：

只看该作者 · 2020-6-23 19:05

项目中要用到一些图标（图片），下载地址：https://pan.baidu.com/s/1658eTb2YThyvbGCcmRIc9Q，提取码：kkfh，文件名：《touchgfx入门4_图片.zip》。

只看该作者 · 2020-6-23 19:05

在 TouchGFX Designer 中，新建一个项目，选择 STM32F769I-DISCO 板子、空模板。将上面的“touchgfx入门4_图片.zip”文件解压到TouchGFX生成项目的images文件夹中：

只看该作者 · 2020-6-23 19:06

在Designer中会自动显示加入的图片：

只看该作者 · 2020-6-23 19:07

然后，点击下图左上角的 + 号，创建用户定制的控件：

只看该作者 · 2020-6-23 19:08

点击 icon00.png 那个电话图标，并修改属性如下图：

只看该作者 · 2020-6-23 19:08

再添加一个TextArea控件：

只看该作者 · 2020-6-23 19:09

并且如下图所示修改通配符：

只看该作者 · 2020-6-23 19:09

修改20号字体的通配符数字范围：

只看该作者 · 2020-6-23 19:10

Ctrl+S 保存，然后回到Screens面板，在控件栏的最下面可以看到用户刚刚创建的定制控件 MenuElement：

只看该作者 · 2020-6-23 19:10

先试试自己创建的控件好不好用。为了用全黑色背景衬托控件中的文字，先放置一个全黑的 Box With Border 控件，属性设置见上图。

只看该作者 · 2020-6-23 19:11

然后，鼠标点击 MenuElement 控件，控件显示如下（有点小酷的样子了吧^_^）：

只看该作者 · 2020-6-23 19:12

下面开始使用这个控件“组合”出一个滑动菜单界面，核心是使用TouchGFX自带的 Scroll Wheel 控件。先删除掉上图中为了测试放置的定制控件。为了美化界面，先放一个背景图：

只看该作者 · 2020-6-23 19:12

然后点击 Scroll Wheel 控件、并设置属性：

只看该作者 · 2020-6-23 19:13

关键一步：在 Item Template下拉框中，选择我们创建的 MenuElement、并修改2个参数，如下图：

只看该作者 · 2020-6-23 19:13

然后，再“盖上”一个前景图 overlay.png ，这个界面有点儿酷了吧：

只看该作者 · 2020-6-23 19:14

至此，界面工作完成，先用VC模拟器运行一下：

用鼠标上下拖动界面，菜单条会跟着滑动。

只看该作者 · 2020-6-23 19:15

有2个问题需要解决：1）界面上的20个 menu item 图标、文字都是相同的，实际应用中这些肯定都是不同的；2）上下滑动，menu items 是垂直运动，我们希望他们沿着圆弧运动。

这就要靠C++代码来实现了，请见下一节。