【海東青電子原創(chuàng)文章认轨，轉(zhuǎn)載請注明出處：http://www.reibang.com/p/7c9a0533c600】
（實例代碼下載地址：https://github.com/haidongqing/tgfx-customscroll）
如果你看過這個TouchGFX入門系列的前三篇文章（1材蹬，2算色，3），是否有這種印象：TouchGFX似乎也不過如此嘛期虾，圖形界面很一般呀。其實，我們只是看到了冰山的一角撵孤，TouchGFX功能非常強大，必然十分復(fù)雜竭望，實際上它是能做出非承奥耄酷炫的界面的，今天介紹一個用TouchGFX制作的“滾輪”控件咬清，談不上炫酷闭专，只是稍有“姿色”，但代表了TouchGFX對用戶定制控件的強大支持能力旧烧。同時影钉，也以這個定制的控件作為本次TouchGFX入門篇系列的結(jié)束。
本講中掘剪，我們將制作一個可以上下滑動的菜單條平委，它可以像老式撥盤電話機一樣沿著圓弧方向滑動：
撥盤電話廉赔？暴露年齡了，長得像這個樣子的東東：
項目中要用到一些圖標(biāo)（圖片）匾鸥，下載地址：https://pan.baidu.com/s/1658eTb2YThyvbGCcmRIc9Q蜡塌，提取碼：kkfh，文件名：《touchgfx入門4_圖片.zip》勿负。
在 TouchGFX Designer 中馏艾，新建一個項目，選擇 STM32F769I-DISCO 板子奴愉、空模板琅摩。將上面的“touchgfx入門4_圖片.zip”文件解壓到TouchGFX生成項目的images文件夾中：
在Designer中會自動顯示加入的圖片：
然后，點擊下圖左上角的 + 號锭硼，創(chuàng)建用戶定制的控件：
點擊 icon00.png 那個電話圖標(biāo)房资，并修改屬性如下圖：
再添加一個TextArea控件：
并且如下圖所示修改通配符：
修改20號字體的通配符數(shù)字范圍：
Ctrl+S 保存，然后回到Screens面板账忘，在控件欄的最下面可以看到用戶剛剛創(chuàng)建的定制控件 MenuElement：
先試試自己創(chuàng)建的控件好不好用志膀。為了用全黑色背景襯托控件中的文字熙宇，先放置一個全黑的 Box With Border 控件，屬性設(shè)置見上圖溉浙。
然后烫止，鼠標(biāo)點擊 MenuElement 控件，控件顯示如下（有點小酷的樣子了吧^_^）：
下面開始使用這個控件“組合”出一個滑動菜單界面戳稽，核心是使用TouchGFX自帶的 Scroll Wheel 控件馆蠕。先刪除掉上圖中為了測試放置的定制控件。為了美化界面惊奇，先放一個背景圖：
然后點擊 Scroll Wheel 控件互躬、并設(shè)置屬性：
關(guān)鍵一步：在 Item Template下拉框中，選擇我們創(chuàng)建的 MenuElement颂郎、并修改2個參數(shù)吼渡，如下圖：
然后，再“蓋上”一個前景圖 overlay.png 乓序，這個界面有點兒酷了吧：
至此寺酪，界面工作完成，先用VC模擬器運行一下：
用鼠標(biāo)上下拖動界面替劈，菜單條會跟著滑動寄雀。
有2個問題需要解決：1）界面上的20個 menu item 圖標(biāo)、文字都是相同的陨献，實際應(yīng)用中這些肯定都是不同的盒犹；2）上下滑動，menu items 是垂直運動眨业，我們希望他們沿著圓弧運動急膀。
這就要靠C++代碼來實現(xiàn)了，請見下一節(jié)坛猪。
