【海东青电子原创文章,转载请注明出处: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工程。