一、界面布局以及资源添加
  \! H& _0 C9 }! C* c2 j1、创建自定义控件
  Y. d5 g! g  ^5 V


" u- o, P( e, z! u) i2、创建主screen界面
+ t7 ?, r4 v( \$ [6 ?7 T9 Z指定Sscrcroll List的样式为自定义控件

# A: [: A/ n2 V' |6 Q
5 C! M) M$ N' T
- a' Y$ I, _; I& a& U备注： 为了方便演示，本工程的背景图直接用的touchgfx界面里自带的图片。

8 S' R4 J' j, \7 T二、功能实现
( _% B7 P- \+ x4 G5 V- H0 f3 w1、自定义控件设置图片方法实现
% i* q0 N( x8 n* |1 o9 @

1.         //.h文件中声明如下
   ! r7 W# v. _9 [9 ]2 S7 O3 a; M
2.         void setBitmap(int16_t index);

复制代码

! J& l( R9 W8 |9 e$ m$ _
" N  q) z, r& H# ]9 R1 U
2、实现Scroll List的虚函数

1. 下图是Scroll List的虚函数，每次更新item时会调用

复制代码

$ A0 _4 ]9 I! o

) {7 J( ~& K# J  g% T1 W* K/ I; [3、主界面的构造函数中添加界面初始化代码

1. //别忘记增加图片头文件
   
2. #include "BitmapDatabase.hpp"
   
3. //采用参数列表初始化方式
   
4. Screen2View::Screen2View():callback(this,&Screen2View::callbackHandler)
   6 _6 v# H1 i: ^/ \( k5 Z0 |5 o
5. {
   
6.         scrollList1.setItemSelectedCallback(callback);
   % b% q7 D  M- i9 x" X+ K$ ?$ \  d
7.         scrollList1.animateToItem(scrollList1.getNumberOfItems() / 2);
   . t0 n9 S9 e4 o+ x1 p
8. }

复制代码

; O4 P3 H3 ?  S1 o; Q* s4、回调函数的实现
% H7 O1 d$ z" P$ V. A0 W7 Y

1. 回调函数的声明

复制代码

1. 回调函数的实现

复制代码

1. void Screen2View::callbackHandler(int16_t index)
   ) o+ I: g8 y5 J# k8 s7 l( j; _
2. {
   * `- L" n, V# ~4 l5 {
3.         box1.invalidate();
   
4.         switch (index)
     H5 U* H# ^  `6 L6 R$ X
5.         {
   
6.         case 0:
   
7.                 image1.setBitmap(Bitmap(BITMAP_DARK_ICONS_CALENDAR_48_ID));
   . }0 m4 Q& Y, J) D8 I! e1 g
8.         break;
   . i9 m( i% Z% d
9.         case 1:
   ' d6 A. z# \$ Z6 U
10.                 image1.setBitmap(Bitmap(BITMAP_DARK_ICONS_DOCUMENT_48_ID));
    2 R0 E9 T5 h$ F2 e
11.         break;
    
12.         case 2:
    
13.                 image1.setBitmap(Bitmap(BITMAP_DARK_ICONS_FOLDER_48_ID));
    
14.         break;
    
15.         case 3:
    + y* O& c& s  {' p
16.                 image1.setBitmap(Bitmap(BITMAP_DARK_ICONS_INBOX_48_ID));
    - i- `: c5 w6 |: o3 v
17.         break;
    
18.         case 4:
    3 N0 H6 W4 h" f& W- C$ l  Q
19.                 image1.setBitmap(Bitmap(BITMAP_DARK_ICONS_MOVIE_48_ID));
    
20.         break;
    
21.         default: break;
    
22.         }
    
23.         image1.invalidate();
    ( a8 X6 P( ?0 a! t( o- i
24. }
    
25. 
    2 H6 H; @& l# F+ N& W4 F

复制代码

8 K3 U9 S2 E; D: k+ {! h" ^2 n& o