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

【海东青电子原创文章，转载请注明出处：https://www.jianshu.com/p/d7a0d4b2ba63】

（实例代码下载地址：https://github.com/haidongqing/tgfx-customscroll）

上一节完成了界面设计工作，遗留了2个问题：修改menu items的图标及文字、并且沿圆弧滑动。在VC中打开项目工程，需要针对用户定制的控件 MenuElement 添加代码实现修改图标等功能。描述MenuElement控件的是 MenuElement.hpp 和 MenuElement.cpp 这2个文件。

图一

图二

当滑动ScrollWhell控件时，TouchGFX框架会在View中调用一个虚函数：scrollWheelUpdateItem()，在这个函数中加入代码设置每个menu item的图标等即可。为了方便，在MenuElement.hpp的类中创建一个名为 setNumber() 的函数完成修改图标，然后在scrollWheelUpdateItem() 中调用  setNumber() ：

图三

其中的传入参数 no 是menu item 的下标编号（自动从0编号到19），通过 itoa() 转换成字符、附加在每一个item的文字串之后。因为我们只准备了7个图标，no % 7 就是轮换着用的意思了。然后，在scrollWheelUpdateItem() 中调用  setNumber() ：

图四

这里的重点是参数 itemIndex ，它表示当前需要update（就是显示在视野里的）的item的index，setNumber() 根据itemIndex的值动态地更改item的图标和文字。VC模拟器运行结果如下：

图五

还剩最后一步：让items沿着圆弧方向滑动！这就需要动态地修改item的图标、文字的水平位置坐标。当item滑动时，垂直位置会改变，框架会调用一个叫做 setY() 的函数，在其中修改item的水平坐标：先利用勾股定理计算出水平坐标x，再调用一个用户函数 offset(x) 来重新设置item的x坐标：

图六

模拟器运行结果：

图七

最后，在IAR中编译生成目标文件（如何正确配置IAR来下载TouchGFX目标文件，戳这里），下载到目标板上运行：

图八

沿着圆弧方向滑动手指，想象一下在拨盘电话机上拨动的感觉吧（这有点扯了，^_^）。

《使用TouchGFX开发STM32界面应用之入门篇》到此告一段落了，感谢在这些日子里大家的陪伴。下一篇，我们将进入开发TouchGFX的正题：如何在STM32CUBEMX中创建TouchGFX工程。