一、界面布局以及资源添加
7 X+ m4 Z$ b% f# y2 i# p1、添加图片和文字资源
* {% k4 c- M3 f: I" S

1. 将需要的图片资源拷贝到工程目录下  .xxx\..\assets\images的目录下面。
   
2. image文件夹是专门存放工程图片的。也可以在touchgfx界面中添加，
   * d9 d3 x9 W- }5 ]1 c
3. 方法另行百度。加完后如下所示：

复制代码

! u/ F, y6 u5 s4 `3 T1 A
7 s/ p4 Q; ~+ |3 L% A" ?$ P- x

1.         下图是添加文字资源

复制代码

. W' |/ i+ S2 W

3 v# Y( b# K5 J; Y2、创建自定义控件

1. 如下图创建自定义控件

复制代码

2 ?+ b% G& |) W1 T/ z
: y, Q/ d* `( ]; C2 d6 S. H
3、创建主界面

1. 如下图创建主界面

复制代码

1 N, d5 ?% {. F' l: x8 Z) ~. @

二、功能实现
/ t& P6 N! d! V, t6 ^/ Y. {$ @% o1、引入文本和bitmap头文件

1. #include <BitmapDatabase.hpp>
   . E8 D# z" a' u! J; z. ?
2. #include <texts/TextKeysAndLanguages.hpp>

复制代码

2、自定义控件添加文本和bitmap方法实现

1. 先在自定义控件类中加上文本和图片图片添加方法，注意头文件的引用。

复制代码

1. 然后在.c文件中实现上面声明的方法

复制代码

1. void CustomContainer1::setImageandText(const Bitmap & bitmap, TEXTS iconText)
   
2. {
   2 ?$ }! Z- h, |' {5 Q
3.         image1.setBitmap(Bitmap(bitmap));
   ( ^. D* E( f) w* y5 W
4.         textArea1.setTypedText(TypedText(iconText));
   + e1 B, ~8 R0 o# G  m2 L
5.         textArea1.resizeToCurrentText();
   
6. 
   2 I' i0 \/ H% w
7. }

复制代码

void CustomContainer1::setImageandText(const Bitmap & bitmap, TEXTS

3、主界面的构造函数中添加界面初始化代码
3 v. ]" ~4 X& D. G; N2 x, A% h

1.         先在类中添加CustomContainer自定义控件数组

复制代码

1. 然后，再在主界面的构造函数中对每一个自定义控件添加图片和文字

复制代码

% m: K, f& M, r. r& d: U& b
5 Z$ S' z; Z' z. [5 N$ p' U0 F
4 c1 V, P9 m" ]