使用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坐标：