實(shí)戰(zhàn)經(jīng)驗(yàn) | STM32GUI TouchGFX 屏幕切換功能簡(jiǎn)介

TouchGFX 是專(zhuān)用于 STM32 的圖形界面設(shè)計(jì)軟件，可基于低成本開(kāi)發(fā)優(yōu)秀的圖形界面，而且它已變的越來(lái)越流行。為了幫助客戶(hù)更加深入地理解和使用 TouchGFX ，本文針對(duì)TouchGFX 屏幕切換的實(shí)現(xiàn)方式進(jìn)行了介紹。通過(guò)簡(jiǎn)析基本例程“Transition Example”的源碼，剖析其中切屏實(shí)現(xiàn)的流程；并簡(jiǎn)介了如何使用 TouchGFX Designer 快捷地修改屏幕切換模式，希望能幫助客戶(hù)更好地使用 TouchGFX 切屏特色與功能。

2.1. TouchGFX Transition 類(lèi)介紹

TouchGFX 框架中關(guān)于屏幕切換功能，實(shí)現(xiàn)了一個(gè) Transition 基類(lèi)和五個(gè)派生類(lèi)，其關(guān)系如下圖圖 1 所示。其中，Transition 是切屏的抽象基類(lèi)，定義了屏幕切換期間發(fā)生的基本事務(wù)。虛函數(shù)主要包括：Init（初始化）、tearDown（銷(xiāo)毀，切屏完成需要的清理過(guò)程）、handleTickEvent（Tick 事件處理函數(shù)，主要用于完成切屏的動(dòng)畫(huà)效果）、invalidate（失效，用于重繪）等。五個(gè)派生類(lèi)，其中 NoTransition 是最基本的派生類(lèi)，它沒(méi)有任何視覺(jué)效果，當(dāng)前屏幕會(huì)直接被新屏內(nèi)容替換。另外四個(gè)派生類(lèi)則具有動(dòng)畫(huà)效果：BlockTransition、CoverTransition、SlideTransition 和 WipeTransition。

圖1.TouchGFX Transition 類(lèi)繼承關(guān)系

BlockTransition 將屏幕分成 8x6 份塊，在屏幕切換時(shí)會(huì)每次隨機(jī)重繪其中的 2 個(gè)塊，比較節(jié)省 MCU 資源，適合性能不高的 MCU；CoverTransition 的動(dòng)畫(huà)效果是“新屏畫(huà)面從一個(gè)方向移動(dòng)過(guò)來(lái)，直至完全覆蓋原屏幕內(nèi)容”；SlideTransition 的動(dòng)畫(huà)效果是“新屏與原屏拼接在一起，（原屏在前，新屏在后）從指定的方向滑過(guò)來(lái)”；WipeTransition 的動(dòng)畫(huà)效果是“新屏內(nèi)容從一個(gè)方向展開(kāi)（有一種擦除原屏，露出新屏的效果）”。BlockTransition、CoverTransition、SlideTransition 和 WipeTransition 均在 handleTickEvent 函數(shù)中實(shí)現(xiàn)各自風(fēng)格的動(dòng)畫(huà)效果，tearDown 函數(shù)中則銷(xiāo)毀切屏過(guò)程中創(chuàng)建的用于動(dòng)畫(huà)的臨時(shí)快照控件等。下面我們首先生成Transition 例程，并對(duì)例程源碼相關(guān)部分做進(jìn)一步的分析。

2.2. TouchGFX Transition 例程

運(yùn)行 TouchGFX Designer，選擇 Examples；通過(guò) Select Board Setup 選擇 STM32H735G DK 板（也可以是 TouchGFX 適用的其它板件）；從眾多例程中選擇“Transition Example”例程；將 Application name 改為 Transition_Example，如下圖圖 2 所示，然后點(diǎn)擊 Create 創(chuàng)建工程。

圖2.TouchGFX Designer 生成 Transition Example 例程

進(jìn)入 TouchGFX Designer 主界面后，會(huì)看到畫(huà)布上有四個(gè)方向按鈕和一個(gè)背景圖片，如下 圖圖 3 所示。我們對(duì)界面不做更改，直接選擇 Designer 右下角 (Run Target)在目標(biāo)板上運(yùn)行。該操作將會(huì)復(fù)制 TouchGFX 框架文件，生成配置文件、makefile、代碼及資源文件（images、fonts、texts），然后編譯鏈接、燒錄目標(biāo)板并運(yùn)行。程序運(yùn)行起來(lái)后，您可以熟悉一下該例程應(yīng)用，該應(yīng)用有 5 個(gè)屏幕畫(huà)面，一個(gè)主屏及上下左右 4 個(gè)屏幕。點(diǎn)擊方向按鈕會(huì)進(jìn)行相關(guān)方向的切屏。例程中切屏方式是 SlideTransition 模式。下面我們解讀一下相關(guān)代碼，再對(duì)Transition 模式進(jìn)行修改。

圖3.TouchGFX Designer Transition Example 設(shè)計(jì)界面

2.3. 例程代碼解讀與切屏模式修改

2.3.1. 關(guān)鍵代碼流程

切屏操作是由點(diǎn)擊按鈕觸發(fā)的，我們以右向按鈕 為例，一步步查看調(diào)用過(guò)程。首先我們可以確定當(dāng)前屏幕是 MainView 類(lèi)，MainView 繼承自 MainViewBase，該 MainViewBase 由Designer 自動(dòng)生成。它已經(jīng)包含了四個(gè)按鈕、一個(gè)背景框和一個(gè)背景圖片。按鈕點(diǎn)擊的處理函數(shù)為 buttonCallbackHandler。詳細(xì)代碼如下：

我們?cè)賮?lái)看該按鈕處理函數(shù)，這里右向按鈕調(diào)用了 application 對(duì)象的gotoRightScreenSlideTransitionEast 函數(shù)：

在 FrontendApplicationBase 中，gotoRightScreenSlideTransitionEast 接口通過(guò)transitionCallback 跳轉(zhuǎn)到 gotoRightScreenSlideTransitionEastImpl 函數(shù)。具體過(guò)程，首先application 事務(wù)處理過(guò)程中會(huì)調(diào)用 handlePendingScreenTransition，再轉(zhuǎn)至函數(shù)evaluatePendingScreenTransition，經(jīng) transitionCallback 完成對(duì)函數(shù)gotoRightScreenSlideTransitionEastImpl 的調(diào)用（更多的關(guān)于 Callback 的介紹請(qǐng)參閱相關(guān)文檔或 LAT）。如下圖圖 4 所示：

圖4.Transition Callback 的應(yīng)用過(guò)程

具體代碼如下：

函數(shù) gotoRightScreenSlideTransitionEastImpl 中調(diào)用了屏幕切換的關(guān)鍵模板函數(shù)makeTransition。

2.3.2. 模板函數(shù) makeTransition

下面我們來(lái)看一看實(shí)現(xiàn)屏幕切換功能的關(guān)鍵模板函數(shù) makeTransition。該函數(shù)在MVPApplication.hpp 中，源碼如下：

我們知道 TouchGFX 應(yīng)用架構(gòu)是 MVP 架構(gòu)（這里不做過(guò)多介紹，需要了解的客戶(hù)請(qǐng)參考相關(guān)文檔），這里的 makeTransition 函數(shù)將 TouchGFX 應(yīng)用中的 View&Presenter 和 model 綁定，并與 transition 聯(lián)系在一起，進(jìn)而實(shí)現(xiàn)切屏功能。具體來(lái)說(shuō)，首先 prepareTransition 函數(shù)對(duì)當(dāng)前的 View/Presenter/Transition 進(jìn)行銷(xiāo)毀；然后以模板參數(shù) touchgfx::SlideTransition（用戶(hù)指定的方向）創(chuàng)建 Transition 派生類(lèi)對(duì)象；以模板參數(shù) ScreenType 類(lèi)進(jìn)行新 View 的創(chuàng)建（這里是 RighView）；再以模板參數(shù) PresenterType 類(lèi)創(chuàng)建新的 Presenter（這里是RightPresenter）。將 Presenter 與 Model 綁定并將 View 與 Presenter 綁定（以保證可以正常調(diào)用各自接口，實(shí)現(xiàn) MVP 架構(gòu)功能）；最后調(diào)用 finalizeTransition 函數(shù)，在 finalizeTransition 中進(jìn)行新 View 的 SetupScreen，綁定新 Transition, 并激活新 Transition。

2.3.3. Transition 動(dòng)畫(huà)效果的實(shí)現(xiàn)

具體的 Transition 動(dòng)畫(huà)效果是在 Transition 派生類(lèi)的 handleTickEvent 中實(shí)現(xiàn)的。我們例程中是 SlideTransition，其 handleTickEvent 中實(shí)現(xiàn)了滑動(dòng)的效果。將原有屏幕的快照，在滑動(dòng)方向的來(lái)向上與新 View 的快照連接，一起沿滑動(dòng)方向移動(dòng)，實(shí)現(xiàn)動(dòng)畫(huà)效果。具體請(qǐng)見(jiàn)下面handleTickEvent 函數(shù)源碼：

2.3.4. Transition 風(fēng)格的修改

模板配合 C++編程給予了 TouchGFX 框架極大的簡(jiǎn)潔性和適配的便利性，對(duì)于切屏風(fēng)格的增加或修改也是非常的簡(jiǎn)便?？蛻?hù)甚至不需要理解前面介紹的 Transition 具體原理，也能夠非常方便地修改切屏模式。使用 TouchGFX Designer，僅需點(diǎn)擊幾下鼠標(biāo)即可實(shí)現(xiàn)。如下圖圖 5 所示，這里我們?cè)陉P(guān)聯(lián)右向按鈕的 Interaction 中，將 Transition 模式改為了 Wipe 模式，編譯運(yùn)行即可查看效果。

圖5.TouchGFX Designer Transition 模式的修改

TouchGFX 是針對(duì) STM32 產(chǎn)品的專(zhuān)用優(yōu)秀界面設(shè)計(jì)工具，功能強(qiáng)大易用。本文對(duì)屏幕切換功能進(jìn)行了簡(jiǎn)介，從基本示例“Transition Example”出發(fā)，對(duì)切屏部分的源代碼進(jìn)行了淺析，并介紹了如何使用 TouchGFX Designer 實(shí)現(xiàn)切屏模式的修改。希望本文能夠幫助客戶(hù)更深入地理解 STM32 TouchGFX。