界面事件
之前和大家共享了一些基本的操作，这章会给大家共享下界面使用的一些小技巧及方法。
除去现成控件的事件外，不知道大家有没有考虑过其他一些界面的实现方式，例如，类似手机下滑菜单，或者上滑菜单，再比如一个动态背景。或者自己做的地图的量算尺子。
这些方法都涉及到界面的滑动事件或者界面的定时刷新事件又或者点击事件之类。TouchGFX给大家提供了UIEventListener类用于事件监听。
' A5 g" k! `0 U1 p" F此类为用户界面事件（即由用户与设备交互生成的事件）声明处理程序接口。除系统计时器刻度外，所有其他与用户界面设备外围设备（显示器，按键等）无关的其他系统事件均不属于该界面。
! t% ?% m" o  F8 i0 |下方是类中函数的介绍。

5 s& K: C4 H: I' f% J6 K9 K5 p

; o- a+ L  S& o1 B% ~
UIEventListener类在我们创建窗口界面时该类已经继承过来了，实际上在view类中并没有这些方法的实现，所以需要自己根据需要实现方法。
) y3 e' \9 y+ a之后会给大家展示例子。
; ?9 V! e! A- y, x* I9 x
; {8 s4 }6 }6 [" r! f' l8 `
如意控件
上面介绍了界面事件类，现在介绍修改控件的方法以及如何自定义控件，在正常的开发中，TouchGFX Designer提供的控件经常满足不了我们的需求，此时就需要动态的修改控件，或者自己定义控件。首先先介绍动态的修改控件。
" D6 t; v" p) Y3 m- Y, B2 J' K! J还记得第二章讲到的Base类吗，其中有个add（）函数，该函数的作用是在窗口上添加一个控件，这就是修改的一种，除此之外，还可以使用控件自身的属性进行更改，例如换图片，移动，渐变，更改文字，具体的需要根据控件的API进行开发。但是需要注意的是控件更改后为了保证可以及时刷新，需要使用invalidate()函数。
( p# ]; g! U4 T. |5 S" _# z  g

Container
Container容器，容器这个控件可以说在TouchGFX里使用量最大的控件，容器可以理解为一个透明的窗口，可以将其他控件放到容器里，再将容器作为单独控件放到窗口中，由此可以实现多个界面切换，或者也可以在容器中添加动画，或者事件监听。
# `) L1 c: P; [* ]添加位置：
可以在TouchGFX Designer的“容器”小部件组中找到“容器”。



您可以在用户代码中使用这些函数以及Container类中可用的其他函数。container1.invalidate()如果更改小部件的外观，请记住要通过调用来强制重绘。
0 [2 F. E- {6 t8 M4 E
: a* b+ O8 @' T! f' G
重载容器
该方法是将容器重载，在容器中创建自己了的逻辑，并且将子控件加入容器之中，针对自己的需要编写对外的接口。
. W# t6 q% O: V+ f8 f下面看一个例子。
8 ]4 a; ]2 U- ~* c# H

1. #ifndef SLIDEMENU_CONTAINER_HPP
   
2. #define SLIDEMENU_CONTAINER_HPP
     i3 v* f: p0 o- h& b, o/ a
3. 
   
4. #include <touchgfx/containers/Container.hpp>
   
5. #include <touchgfx/widgets/Image.hpp>
   ! L# [. }  P1 K
6. #include <touchgfx/containers/ListLayout.hpp>
   5 ~$ w5 [0 T) T2 r' g  d- M# [
7. 
   
8. using namespace touchgfx;
   0 L; [3 V4 \2 N
9. 
   ; ^" s1 j+ b% @: @) W
10. class SlideMenuContainer : public touchgfx::Container 继承容器
    
11. {
    
12. public:
    ) a1 u# ]/ a0 `5 {3 }. g
13.         SlideMenuContainer();
    ! E$ p7 d7 |, S7 E
14.         virtual ~SlideMenuContainer();
    
15.         将事件添加到容器中，这部分的事件上述提到了
    
16.         virtual void handleTickEvent();
    4 t6 a: q6 k& `0 }2 }( T; |
17.         virtual void handleClickEvent(const touchgfx::ClickEvent& evt);
    1 Q( R# W4 U( F5 a: D( N& q
18.         virtual void handleDragEvent(const touchgfx::DragEvent& evt);
    5 ^; X+ N& B: r: {: \
19.         virtual void handleGestureEvent(const touchgfx::GestureEvent& evt);
    " P6 m, f! V% c2 e
20. 
    
21.         
    
22.         uint8_t getSelectedScreen()
    
23.         {
    
24.                 return currentState;
    8 ^8 R! C) ~- Q7 k1 P
25.         }
    
26.         对外设置回调函数的接口
    
27.         void setMenuChangeEndedCallback(touchgfx::GenericCallback<const SlideMenuContainer&>& callback)
    
28.         {
    9 Z; `7 [7 l* N. y- `! H
29.                 menuChangeAction = &callback;
    
30.         }
    
31. private:
    . H2 B$ {( v# W. V/ I: t
32.         enum States
    4 r: I4 A" G2 _& E3 u& x
33.         {
    
34.                 ANIMATE_COLLAPSE,
    / Y) U. a) S* h' T( q: d- w5 b" \
35.                 ANIMATE_SHOW,
    ' F: ]" r+ z5 B, g8 g" S. S& C1 l! P
36.                 NO_ANIMATION
    
37.         } currentState;
    
38. 
    
39.         GenericCallback<const SlideMenuContainer&>* menuChangeAction;
    
40. 
    
41. };
    

复制代码

接下来看一下cpp文件

1. #include <gui/common/SlideMenuContainer.hpp>
   
2. #include <touchgfx/EasingEquations.hpp>
   
3. #include "BitmapDatabase.hpp"
   3 T# R+ i- _8 [7 v1 w: V# k
4. #include <touchgfx/Color.hpp>
   
5. 
   : o* \7 Q# r+ t7 E% D
6. using namespace touchgfx;
   ; \  T5 ~+ Z3 I0 ~" p0 {1 F
7. 
   
8. SlideMenuContainer::SlideMenuContainer():
   
9.         currentState(NO_ANIMATION),
   
10.         menuChangeAction(0)
    
11. {
    
12.         touchgfx::Application::getInstance()->registerTimerWidget(this);
    
13.         setTouchable(true);
    8 A1 m0 Y0 W% }) k; F4 p8 x7 f
14. 
    3 ]  o6 \& p( l1 Q
15. }
    2 Z: N- U- o. e9 K% i
16. 
    
17. SlideMenuContainer::~SlideMenuContainer()
    
18. {
    2 c' \. t0 N% W# Z7 A0 I4 I
19.         touchgfx::Application::getInstance()->unregisterTimerWidget(this);
    
20. }
    
21. 
    4 P; J2 C8 t2 }5 m
22. void SlideMenuContainer::handleTickEvent()
    2 x% D+ O1 q& _1 D, Z( y
23. {
    
24. }
    
25. void SlideMenuContainer::handleClickEvent(const ClickEvent& evt)
    
26. {
    
27. 
    
28. }
    / i, z- T- _) t) V1 l/ I# t: M9 L
29. void SlideMenuContainer::handleDragEvent(const DragEvent& evt)
    
30. {
    
31.         //touchgfx_printf("SlideMenuContainer->getDeltaX :%d   \r\n", evt.getDeltaX());
    
32.         
      a( q: [" J0 f7 ]4 X" [$ R
33. }
    
34. 手势响应函数，上滑收起下滑弹出
    
35. void SlideMenuContainer::handleGestureEvent(const GestureEvent& evt)
    2 o7 m8 ~( C3 P& s
36. {
    $ B$ S$ O; X6 s8 m" \5 m
37.         if (evt.getType() == evt.SWIPE_VERTICAL)
    6 S0 n2 B$ s* R& s
38.         {
    
39.                 //touchgfx_printf("SlideMenuContainer->handleGestureEvent   \r\n");
    
40.                 if (evt.getVelocity() < 0)
    
41.                 {
    ; m, e$ T& M$ Q4 t0 u
42.                         currentState = ANIMATE_COLLAPSE;
    
43.                         if (menuChangeAction && menuChangeAction->isValid())
    ! P% d$ n1 P; {4 B* ?) v( h! i
44.                         {
    
45.                                 menuChangeAction->execute(*this);
    
46.                         }
    ) o) |, z/ ?( P! E
47. 
    2 L* A/ h0 ]0 u/ X; r3 _
48.                 }
    
49.                 else if (evt.getVelocity() > 0)
    
50.                 {
    , u! _8 V( n. A" j8 e# }2 H
51.                         currentState = ANIMATE_SHOW;
    
52.                         if (menuChangeAction && menuChangeAction->isValid())
    
53.                         {
    
54.                                 menuChangeAction->execute(*this);
    
55.                         }
    1 z) l/ H+ T0 z' c3 ]( @
56.                 }
    
57.         }
    
58. }
    

复制代码

$ _5 [. N+ a& o0 H6 N) [& ]自定义控件
除了之上的两种方法，如果需要更为具体的定义控件，或者想要节省空间可以选择自定义控件的方法。
- R' F- e. h5 r- U3 p9 _TouchGFX Designer当前不支持自定义窗口小部件的创建。因此，您将需要手动编写自定义小部件的代码，然后将小部件插入View的用户代码部分。
) ^& R) F7 _3 F  W您可以通过扩展Widget类来创建自己的自定义窗口小部件。这样做需要在用户方面付出更多的努力，但也将完全控制小部件绘制的所有像素。您的自定义窗口小部件不一定使用任何现有的窗口小部件，而是通过指定像素的颜色来定义应如何绘制。自定义窗口小部件方法通常还将具有较小的内存占用空间，这在某些情况下非常重要。
3 E+ R. m  t$ ~$ t

1. #ifndef QR_CODE_WIDGET_HPP
   1 r7 Z' x, D$ r, g" D5 \. T
2. #define QR_CODE_WIDGET_HPP
     B% Y: z( |( X1 J& Q" u
3. 
   
4. #include <touchgfx/widgets/Widget.hpp>
   ) Q- w" T% ~  C+ g) G# ?
5. 以这种方法重载widget窗口，但是如果不是有特殊需要的话还是建议用容器去做。
   
6. class QRCodeWidget : public touchgfx::Widget
   1 x5 [0 f* o8 Z4 n
7. {
   - B% y% w* ?6 e* u, a
8. public:
   
9.     QRCodeWidget();
   
10. 
    
11.     virtual void draw(const touchgfx::Rect& invalidatedArea) const;
    9 Y: S4 V# w2 i
12.     virtual touchgfx::Rect getSolidRect() const;
    1 L4 |# E' m0 @+ H; ~; e4 Y- {
13. 
    
14.     void setQRCodeData(QRCodeData* data);
    
15.     void setScale(uint8_t s);
    8 i3 z( U, ~8 A; u
16. 
    - A! y; f% \  b: X  I
17. private:
    , }/ ~4 B; F. F! q2 S
18.     void updateSize();
    + _! F* Q, U3 c! T9 G$ Y
19. 
    
20.     QRCodeData* data;
    
21.     uint8_t scale;
    ! W* _# Y9 G" S' w  J7 a1 v
22. };
    
23. #endif
    

复制代码

$ L, s8 h' C8 e9 f) g4 w  [具体类中的继承和重载请参照官方的API文档。
% Q) ]' {+ ~" V! m7 x( z: J
& T7 b9 d  _: M) K图片等资源放置位置
好了说了这么多也可以大致的制作界面了，但是界面在开发过程中需要放入一些图片资源或者字库资源，这些地方放在TouchGFX\assets中，进入后可以看见放入资源的文件夹，但是注意图片格式为png。
" l; X  W8 R. ~9 `
2 h8 w3 n$ Z, t  [3 Q1 Y


2 j+ d- v7 b; Z) \
到这里大体的框架都给大家介绍完毕了，之后会给大家介绍几个细节性的控件。
————————————————
版权声明：空闲的程序员
& N# I" \! \) Q  P( B
3 T" I3 F( J' M) S