【海东青电子原创文章，转载请注明出处：https://www.jianshu.com/p/7c9a0533c600】
（实例代码下载地址：https://github.com/haidongqing/tgfx-customscroll）
如果你看过这个TouchGFX入门系列的前三篇文章（1，2，3），是否有这种印象：TouchGFX似乎也不过如此嘛，图形界面很一般呀。其实，我们只是看到了冰山的一角，TouchGFX功能非常强大，必然十分复杂，实际上它是能做出非常酷炫的界面的，今天介绍一个用TouchGFX制作的“滚轮”控件，谈不上炫酷，只是稍有“姿色”，但代表了TouchGFX对用户定制控件的强大支持能力。同时，也以这个定制的控件作为本次TouchGFX入门篇系列的结束。
本讲中，我们将制作一个可以上下滑动的菜单条，它可以像老式拨盘电话机一样沿着圆弧方向滑动：
图一 鼠标点击这个图，可以看到放大的、清晰的
拨盘电话？暴露年龄了，长得像这个样子的东东：
图二
项目中要用到一些图标（图片），下载地址：https://pan.baidu.com/s/1658eTb2YThyvbGCcmRIc9Q，提取码：kkfh，文件名：《touchgfx入门4_图片.zip》。
在 TouchGFX Designer 中，新建一个项目，选择 STM32F769I-DISCO 板子、空模板。将上面的“touchgfx入门4_图片.zip”文件解压到TouchGFX生成项目的images文件夹中：
图三
在Designer中会自动显示加入的图片：
图四
然后，点击下图左上角的 + 号，创建用户定制的控件：
图五
点击 icon00.png 那个电话图标，并修改属性如下图：
图六
再添加一个TextArea控件：
图七
并且如下图所示修改通配符：
图八
修改20号字体的通配符数字范围：
图九
Ctrl+S 保存，然后回到Screens面板，在控件栏的最下面可以看到用户刚刚创建的定制控件 MenuElement：
图十
先试试自己创建的控件好不好用。为了用全黑色背景衬托控件中的文字，先放置一个全黑的 Box With Border 控件，属性设置见上图。
然后，鼠标点击 MenuElement 控件，控件显示如下（有点小酷的样子了吧^_^）：
图十一
下面开始使用这个控件“组合”出一个滑动菜单界面，核心是使用TouchGFX自带的 Scroll Wheel 控件。先删除掉上图中为了测试放置的定制控件。为了美化界面，先放一个背景图：
图十二
然后点击 Scroll Wheel 控件、并设置属性：
图十三
关键一步：在 Item Template下拉框中，选择我们创建的 MenuElement、并修改2个参数，如下图：
图十四
然后，再“盖上”一个前景图 overlay.png ，这个界面有点儿酷了吧：
图十五
至此，界面工作完成，先用VC模拟器运行一下：
图十六
用鼠标上下拖动界面，菜单条会跟着滑动。
有2个问题需要解决：1）界面上的20个 menu item 图标、文字都是相同的，实际应用中这些肯定都是不同的；2）上下滑动，menu items 是垂直运动，我们希望他们沿着圆弧运动。
这就要靠C++代码来实现了，请见下一节。
网友评论