一、GUI设计
1、界面布局
; M$ t% h2 y3 D, n# r# M$ ~按照下图添加三个控件，分别是1、Button，2、Image，3、Animated Image。
其中Button添加不同相应状态的图片，Image 添加背景图片作为整个屏幕的背景，添加方法在上一节有介绍，在这就不做赘述。
" x/ z1 i9 s, n  T" w
三个控件的属性：
0 ]) ^0 K; A' M# E1、 Name：btn_start_stop
: M' n9 H0 ~! C       Location X:175 Y200
5 o- F1 W; ^+ k4 K8 v- X+ _3 j
2、 Name：background
       Location X:0 Y 0

" i+ R2 b- e* v# j: A& Z3、 Name：animation
       Location X:160 Y 20
, h) g) i, {7 t8 {
! Z" P2 R& S# }0 @

' s. ]3 u& h- R3 K! M1 E2 X2、添加Animated Image 图片
第一步：导入图片资源。按照下图所示添加。
# j. z3 h2 b+ H5 g- L5 w% [
9 l, U  B5 s! a1 O  u

第二步：给Animated控件指定动态图片的起始图片、以及下一张图片显示时间。
# D/ w+ e, ]& Q. V* X* M这里设置没一帧间隔30ms。不同间隔显示速度不同，有兴趣可以自己尝试下。

  V5 S- x3 S1 }- U0 Y
) d' }; }- w; b9 F, Y- A
3、添加按钮文本资源
/ H) x# O2 N5 p, ~3 g+ ^% j' I按照下图步骤依次更改，其中第5步 GB目录下面显示的是当选择ResourceID是分别对应的显示在Button上的字符。
1 ]/ q  L1 i2 F% m5 \( a

, Q8 D: g( Y' r$ J/ ~3 f
4、添加交互
3 @4 F, a+ b: Q! q0 G! e1、给Button添加Interactions
5 {4 L+ q+ t3 Q, p1 \# M4 b2 o其中Actions选择Execute C++ Code,，表示单机这个Button执行下面的C++代码
2 Z& D' [) E, D0 V
& u, q# X+ g# Z- N% U

% b/ g! r+ S# y- |$ r7 b; s5 R' BC++代码如下

. z' D4 E# @+ M  K/ u' v" }2 j' l; [

1. if (animation.isAnimatedImageRunning())
   
2. {
   
3.     animation.pauseAnimation();//暂停动画
   * W9 r; f! c7 a) k
4.     btn_start_stop.setLabelText(TypedText(T_START));//设置butto
   ' }" K  |' o5 C2 r" A* |
5.                                                                                                     //的文本为start
   + M+ T) ]' Y1 T0 H9 r9 p
6. }
   
7. else
   & W2 F9 J) F* C2 O$ z0 @
8. {
   
9.         //开始动画
   - J$ ]7 N+ \; B* b& h( F) o- B
10.     animation.startAnimation(animation.isReverse(), false, true);
    & I! }( i+ J# N( x1 \+ U' d
11.    //设置button文本为stop
    - _5 k8 @( l% J# i/ y1 n
12.     btn_start_stop.setLabelText(TypedText(T_STOP));
    
13. }
    9 [% Z4 V) \) W5 [( X$ z( @: j
14. 
    $ A( ~7 C' ~: @9 r8 A

复制代码

: B" i3 Q& o6 u) ~4 z, [. i为animated image 添加interactions
' H9 u; R# l( B; f! F3 x2 ^% A
$ p  Q; j( [; Z0 `' n& L8 e

同样也要执行C++代码
& i& r( ^" E, j
1 T& U1 J. e/ F2 V

1. //animation.isReverse() 判断是否是暂停状态
   
2. animation.startAnimation(!animation.isReverse(), false, true);
   

复制代码

二、仿真运行
MainViewBase.hpp 文件会生成两个回调函数：
1、void buttonCallbackHandler(const touchgfx::AbstractButton& src);
( q& s2 q- Z7 ~& u9 i) b/ H) F3 i2、void animationEndedCallbackHandler(const touchgfx::AnimatedImage& src);
' d1 L7 [2 W# a" d其具体实现方法在MainViewBase.cpp。可以看到我们在touchGFX添加的C++代码自动生成到这两个回调函数中。

. G, W! e# N4 m; \. l' r9 @) h

1. /*********************************************************************************/
   - b4 L* c) T; H7 Z, M* |" t, [
2. /********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
   
3. /*********************************************************************************/
   & w4 g* X) S/ I4 [1 @0 x& M9 s( l
4. #ifndef MAINVIEWBASE_HPP
   
5. #define MAINVIEWBASE_HPP
   5 l) `5 n! v( ?
6. 
   
7. #include <gui/common/FrontendApplication.hpp>
   3 W$ f3 l9 j' R3 j; q
8. #include <mvp/View.hpp>
   
9. #include <gui/main_screen/MainPresenter.hpp>
   
10. #include <touchgfx/widgets/Box.hpp>
      b5 e1 R  l# T5 r, U6 v  p
11. #include <touchgfx/widgets/Image.hpp>
    & k* F5 u5 ]: w- \/ a, t4 E; c
12. #include <touchgfx/widgets/AnimatedImage.hpp>
    4 z4 k! u/ q, q) K9 A7 |  ?- p
13. #include <touchgfx/widgets/ButtonWithLabel.hpp>
    
14. 
    
15. class MainViewBase : public touchgfx::View<MainPresenter>
    
16. {
    
17. public:
    
18.     MainViewBase();
    ! u5 s% Y7 o- H- d+ M/ D: x0 @
19.     virtual ~MainViewBase() {}
    
20.     virtual void setupScreen();
    
21. 
    9 w" |3 X1 w" N
22. protected:
    ' u7 Y$ c0 k# s- A2 B" n8 t  i
23.     FrontendApplication& application() {
    
24.         return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
    
25.     }
    
26. 
    
27.     /*
    8 E) Q0 @# \, u$ ]1 `$ ]
28.      * Member Declarations
    
29.      */
    3 m" \0 ^2 C; q) w
30.     touchgfx::Box __background;
    0 E! b5 e6 |4 ?' m/ e
31.     touchgfx::Image background;
    
32.     touchgfx::AnimatedImage animation;
    ) t$ l  \$ R" @4 L- {
33.     touchgfx::ButtonWithLabel btn_start_stop;
    3 g# k* H2 m* ?" I& i
34. 
    
35. private:
    
36. 
    
37.     /*
    : _. p& k0 q7 A- S
38.      * Callback Declarations
    * k& Z. D  h' F( s7 |8 j! E
39.      */
    
40.     touchgfx::Callback<MainViewBase, const touchgfx::AbstractButton&> buttonCallback;
    
41.     touchgfx::Callback<MainViewBase, const touchgfx::AnimatedImage&> animationEndedCallback;
    2 W5 H$ t- R, w! Q
42. 
    # C4 F* g( J/ m3 H
43.     /*
    
44.      * Callback Handler Declarations
    ' h: B& j5 x, f, H6 ~$ n% D
45.      */
    # L1 `! `4 _+ J# I
46.      //TouchGFX自动生成
    $ k/ {% ]' D: _7 O: B. r$ b
47.     void buttonCallbackHandler(const touchgfx::AbstractButton& src);
    
48.     void animationEndedCallbackHandler(const touchgfx::AnimatedImage& src);
    ( [8 ~2 T5 P9 ?( ^/ n; r
49. 
    
50. };
    # s+ m; b2 k4 }3 y! Z
51. 
    
52. #endif // MAINVIEWBASE_HPP
    ! @1 b* R" n/ M  E
53. 
    7 G  ~2 m) ]: k$ R. S

复制代码

如果不知道Animated Image有哪些方法和属性，可以在MainviewBase.hpp包含的头文件里找到引用的对应的头文件，右键打开即可找到Animated image的类文件，其中包含了Animated Image所有的方法和属性。
1 w+ n: _0 {! E7 a2 q2 e
2 P1 O3 E# Z$ ]! x) g$ w( Z$ C