【海東青電子原創(chuàng)文章，轉(zhuǎn)載請注明出處：http://www.itdecent.cn/p/d7a0d4b2ba63】

（實例代碼下載地址：https://github.com/haidongqing/tgfx-customscroll）

上一節(jié)完成了界面設計工作，遺留了2個問題：修改menu items的圖標及文字、并且沿圓弧滑動。在VC中打開項目工程，需要針對用戶定制的控件 MenuElement 添加代碼實現(xiàn)修改圖標等功能。描述MenuElement控件的是 MenuElement.hpp 和 MenuElement.cpp 這2個文件。

圖一

圖二

當滑動ScrollWhell控件時，TouchGFX框架會在View中調(diào)用一個虛函數(shù)：scrollWheelUpdateItem()，在這個函數(shù)中加入代碼設置每個menu item的圖標等即可。為了方便，在MenuElement.hpp的類中創(chuàng)建一個名為 setNumber() 的函數(shù)完成修改圖標，然后在scrollWheelUpdateItem() 中調(diào)用??setNumber() ：

圖三

其中的傳入?yún)?shù) no 是menu item 的下標編號（自動從0編號到19），通過 itoa() 轉(zhuǎn)換成字符、附加在每一個item的文字串之后。因為我們只準備了7個圖標，no % 7 就是輪換著用的意思了。然后，在scrollWheelUpdateItem() 中調(diào)用??setNumber() ：

圖四

這里的重點是參數(shù) itemIndex ，它表示當前需要update（就是顯示在視野里的）的item的index，setNumber() 根據(jù)itemIndex的值動態(tài)地更改item的圖標和文字。VC模擬器運行結(jié)果如下：

圖五

還剩最后一步：讓items沿著圓弧方向滑動！這就需要動態(tài)地修改item的圖標、文字的水平位置坐標。當item滑動時，垂直位置會改變，框架會調(diào)用一個叫做 setY() 的函數(shù)，在其中修改item的水平坐標：先利用勾股定理計算出水平坐標x，再調(diào)用一個用戶函數(shù) offset(x) 來重新設置item的x坐標：

圖六

模擬器運行結(jié)果：

圖七

最后，在IAR中編譯生成目標文件（如何正確配置IAR來下載TouchGFX目標文件，戳這里），下載到目標板上運行：

圖八

沿著圓弧方向滑動手指，想象一下在撥盤電話機上撥動的感覺吧（這有點扯了，^_^）。

《使用TouchGFX開發(fā)STM32界面應用之入門篇》到此告一段落了，感謝在這些日子里大家的陪伴。下一篇，我們將進入開發(fā)TouchGFX的正題：如何在STM32CUBEMX中創(chuàng)建TouchGFX工程。