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

发表于 2020-6-23 19:17

海东青电子原创**，转载请注明出处：https://www.jianshu.com/p/d7a0d4b2ba63】
（实例代码下载地址：https://github.com/haidongqing/tgfx-customscroll）
上一节完成了界面设计工作，遗留了2个问题：修改menu items的图标及文字、并且沿圆弧滑动。在VC中打开项目工程，需要针对用户定制的控件 MenuElement 添加代码实现修改图标等功能。描述MenuElement控件的是 MenuElement.hpp 和 MenuElement.cpp 这2个文件。

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

发表于 2020-6-23 19:17

当滑动ScrollWhell控件时，TouchGFX框架会在View中调用一个虚函数：scrollWheelUpdateItem()，在这个函数中加入代码设置每个menu item的图标等即可。

发表于 2020-6-23 19:18

为了方便，在MenuElement.hpp的类中创建一个名为 setNumber() 的函数完成修改图标，然后在scrollWheelUpdateItem() 中调用 setNumber() ：

发表于 2020-6-23 19:18

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

发表于 2020-6-23 19:20

然后，在scrollWheelUpdateItem() 中调用 setNumber() ：

发表于 2020-6-23 19:20

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

发表于 2020-6-23 19:21

VC模拟器运行结果如下：

发表于 2020-6-23 19:22

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

发表于 2020-6-23 19:23

模拟器运行结果：

发表于 2020-6-23 19:23

最后，在IAR中编译生成目标文件（如何正确配置IAR来下载TouchGFX目标文件，戳这里https://www.jianshu.com/p/c317a54b0e32），下载到目标板上运行：

发表于 2020-6-23 19:24

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

发表于 2020-6-23 19:25

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

发表于 2020-6-23 19:25

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

发表于 2020-7-2 22:19

TouchGFX怎么样呢

发表于 2020-7-3 22:13

TouchGFX开发STM32界面收费吗

发表于 2020-7-10 14:20

非常感谢楼主分享

发表于 2020-7-10 14:23

非常不错的资料

发表于 2020-7-10 14:24

这个控件是免费的吗

发表于 2020-7-10 14:24

真的很漂亮

发表于 2020-7-10 14:24

心向往之啊

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

相关帖子

浏览过的版块

技术新星奖章

沉静之湖泊

突出贡献奖章

常驻人口

无冕之王奖章

奔腾之江水

经常做客

涓涓之细流