圆环型进度条
好久没更新了，之间主要是为了之后的更新在准备一些demo，这期主要给大家介绍一个例子，这个例子很小但是能说明 一些TouchGFX的开发细节。话不多说先上图。



: J- f( ^) P7 S5 p! d& [% R5 ~这期主要给大家介绍这个圆环进度条。
# I, e8 C; q, R" X
" s) `' T& g, o  n制作原理
这个 看起来感觉很高大上的进度条，其实组成原理分为几个部分。
& ]. J& w" F" F3 O4 m0 A. m1 d+ U首先先注意下这个界面，这个界面是touchGFX官方提供的demo中的一个画面，其中左侧的滑动栏主要作用是用于切换右侧的界面，这里我们不过多讲解。再看下整体通过touchGFX搭建的界面。

  r: L( D, o& e4 F$ h

这个界面上并没有圆环的内容，但是右侧有一个底图背景background，这个image定义了界面的主色调，这样开发这个控件时主要的大背景颜色也应该类似，如果跳脱了那就只能说明丑！！！
既然控件不是通过designer去实现的，那只能说明该部分的内容可变动的地方过于多。所以需要通过代码实现，下面我们想一下这个控件的制作过程。
首先在touchGFX中制作控件需要有一个类Container，这个类之前提过这里就不过多说明了。重载这个类后需要一个背景图片，还需要一个前景图片，这两个图片的色调要和大背景相互吻合。

0 |) Z  j8 J6 G8 {
背景图
  f# X* K2 T% p( c' R8 x8 Z


* z* [9 z+ ~7 m/ {: u1 m3 X; X3 e前景图
3 g8 M6 B- ^: h: a! d! I除此之外，也需要圆环的部分，第一圆环需要根据百分比的数值进行变动，第二也可以通过手动进行滑动，如果用图片制作那么会加大繁琐程度也不会有太好的效果。这里我们想到touchgfx官方提供的画圆的工具Circle类，这个类继承的是画图及画布的部分，这样就需要一个画出色彩斑斓的画笔去画圆。 那这个画笔的颜色如下图
8 {9 y7 E6 }1 b7 E! _



通过这个画笔则可以制作出相应的圆环。
! {; c& B# v% @5 f: ~5 Q# p% U到这里总结下之前的思路，首先需要两个图片一个做前景一个做背景，还有需要一个圆环，一个画笔，其余就是需要滑动事件，及控件窗口。
, P" O9 f" `2 Y1 ^3 t到这里有人会问，这么简单就制作一个控件吗，其实大多数控件都可以分解为简单的部分。通过简单的搭建可以做出复杂的效果，千里之行始于足下嘛。下面看下制作流程吧。


) p6 {% s0 W$ h0 S, y+ {; a制作流程
* `; _; u% a$ Y* ]  e首先创建个控件类。

1. class CircularProgress : public Container
   
2. {
   9 U3 F' `, g( k$ ?: X1 d. ?$ V
3. 
   
4. }
   

复制代码

5 F; n, Z9 A2 j2 S" Z在类中添加内容
& s$ j1 }# ?6 F& p

1. class CircularProgress : public Container
   8 l  R+ I! e% r# r+ r
2. {
   ' B4 G& T, ^5 z
3. public:
     ?1 w* U! m# @3 o6 T& q: y; f7 T: [
4. 
   
5.     CircularProgress();
   ) A* g% r! ], u
6. 
   
7.     virtual ~CircularProgress();
   / C' R. y4 l! o) b" O
8. 
   
9.     int getValue()
   
10.     {
    
11.         return currentPercentage;
    
12.     }
    
13. 
    
14.     void setBarAngle(int angleInDegrees);
    5 P9 e. i; U2 Y) o- d
15. 
    0 o) a, Z1 H$ e/ G' [4 I$ M
16.     virtual void handleClickEvent(const ClickEvent& evt);
    " W4 q! \& a" F$ s) u
17.     virtual void handleDragEvent(const DragEvent& evt);
    
18. 
    
19. protected:
    9 Q+ w0 D8 N/ ]3 J
20.     static const int END_DEGREE = 116;
      G6 [5 D. }( E/ C) q
21.     static const int START_DEGREE = -END_DEGREE;
    " W8 s' J2 d1 L( U: L. q5 M. W
22. 
    
23.     Image background; 背景
    
24.     Image centerImage; 前景
    
25. 
    
26.     Circle bar; 圆环
    
27. #if !defined(USE_BPP) || USE_BPP==16
      i# F  q# C# i5 y, r
28.     PainterRGB565Bitmap bitmapPainter; 画笔
    ( p1 R7 E' `- q2 [3 p7 d3 d
29.     PainterRGB565 colorPainter;
    8 G# |$ h+ `' f$ u, B
30. #elif USE_BPP==24
    
31.     PainterRGB888Bitmap bitmapPainter;
    
32.     PainterRGB888 colorPainter;
    
33. #elif defined(LCD8BPP_ABGR2222)
    
34.     PainterABGR2222Bitmap bitmapPainter;
    
35.     PainterABGR2222 colorPainter;
    ; o( n, I( N7 X. D! L. d0 M. O+ [
36. #elif defined(LCD8BPP_RGBA2222)
    
37.     PainterRGBA2222Bitmap bitmapPainter;
    
38.     PainterRGBA2222 colorPainter;
    # w6 @+ q! T, z2 @# A3 q5 P( S: h
39. #elif defined(LCD8BPP_BGRA2222)
    ' J4 k7 A  t! v- _' v' e
40.     PainterBGRA2222Bitmap bitmapPainter;
      d, g: p: h/ J, E
41.     PainterBGRA2222 colorPainter;
    
42. #elif defined(LCD8BPP_ARGB2222) || USE_BPP==8
    8 x6 O; k' v$ ~% {- X  W3 j; ~( B
43.     PainterARGB2222Bitmap bitmapPainter;
    
44.     PainterARGB2222 colorPainter;
    % Q$ x  A- H8 m2 T# `
45. #elif USE_BPP==4
    
46.     PainterGRAY4Bitmap bitmapPainter;
    " ~6 p4 L, w( [$ a0 u3 r1 y
47.     PainterGRAY4 colorPainter;
    * l  f/ E/ C$ G+ o0 l/ M7 |
48. #elif USE_BPP==2
    
49.     PainterGRAY2Bitmap bitmapPainter;
    , q  h/ N8 k1 B, R+ i7 u& {
50.     PainterGRAY2 colorPainter;
    ! F& \4 a/ O; W3 b6 s) C; O
51. #else
    
52. #error Unknown USE_BPP
    / e1 k7 ^1 O" D7 v
53. #endif
    
54. 
    ) ]+ w+ q& e4 Y& l
55.     TextAreaWithOneWildcard percentageText;
    
56.     Unicode::UnicodeChar percentageTextBuffer[5];
      Y7 P  j1 w7 A; `, k# X4 ~
57. 
    
58.     TextArea headlineText;//文字
    
59. 
    
60.     int currentPercentage;
    1 M5 z- A; n+ n# @3 u
61. 
    4 V/ K) o9 _0 _6 ~) a1 u0 K
62.     void updateBar(int newX, int newY); 位置
    
63. };
    0 Q) M' y! o; [- B9 Z5 i- |) ]" }

复制代码

之后看一下整体的组合。

1. CircularProgress::CircularProgress()
   % q5 a& n/ T( y
2. {
   % C- L- [( K/ S. G7 E( w; @
3.     setTouchable(true);
   
4. 
   
5.     background.setBitmap(Bitmap(BITMAP_CONTROLS_WHEEL_BACKGROUND_ID));
   
6.     background.setXY(0, 0);
   
7.     add(background);放背景
   0 s- J) P7 [& x( h, m3 R
8. 
   
9.     centerImage.setBitmap(Bitmap(BITMAP_CONTROL_CENTER_BUTTON_ID));
   
10.     centerImage.setXY(background.getX() + (background.getWidth() - centerImage.getWidth()) / 2, background.getY() + (background.getHeight() - centerImage.getHeight()) / 2);
    
11.     add(centerImage);放前景
    6 _+ D0 _# B8 O/ }& p
12. 
    
13.     bitmapPainter.setBitmap(Bitmap(BITMAP_CONTROL_COLOR_WHEEL_ID)); 设置画笔的图片
    ; {. w9 {5 m! i, |5 F% ]) ^) O
14.     colorPainter.setColor(Color::getColorFrom24BitRGB(0x11, 0x2C, 0x3C), 70);
    # l( _. e: K3 I5 c# M4 \3 c
15. 
    
16.     int radius = 103;
    
17. 设置圆环的参数还有画笔
    
18.     bar.setPosition(background.getX(), background.getY(), background.getWidth(), background.getHeight());
    
19.     bar.setCenter(bar.getWidth() / 2.0f, bar.getHeight() / 2.0f);
    6 D) o; N  \5 g8 A; L- |
20.     bar.setRadius(radius);
    
21.     bar.setLineWidth(25);
    
22.     bar.setPainter(bitmapPainter);
    3 m% d: w  u5 Y7 e- T6 p
23.     bar.setCapPrecision(15);
    
24.     bar.setArc(START_DEGREE, 0);
    5 ]- m+ }* _. o+ ?
25.     add(bar);
    
26. 设置中间显示的文字
    3 p- c/ ^7 k  _# j/ z4 S# ~
27.     Unicode::snprintf(percentageTextBuffer, 5, "%d", 100);
    
28.     percentageText.setWildcard(percentageTextBuffer);
    , |: P! ~3 }# u
29.     percentageText.setTypedText(TypedText(T_PERCENTAGE_BAR_READOUT));
    ! E  T3 n* @, |* u
30.     percentageText.setXY(background.getX() + (background.getWidth() - percentageText.getWidth()) / 2, background.getY() + (background.getHeight() - percentageText.getHeight()) / 2 - 20);
    
31.     percentageText.setColor(Color::getColorFrom24BitRGB(0xFF, 0xFF, 0xFF));
    
32.     add(percentageText);
    
33. 
    
34.     headlineText.setTypedText(TypedText(T_PERCENTAGE_BAR_HEADLINE));
    " a$ q. w8 W# O2 p
35.     headlineText.setXY(background.getX() + (background.getWidth() - headlineText.getWidth()) / 2, percentageText.getY() + 60);
    
36.     headlineText.setColor(Color::getColorFrom24BitRGB(0x17, 0x3C, 0x51));
    , W. J& g( U# d9 ]* @
37.     add(headlineText);
    ' _( v( {# e) B4 a7 t
38. 
    5 z" \, l2 \( }
39.     setWidth(background.getWidth());
    
40.     setHeight(background.getHeight());
    ; _4 _* w! N0 _& A+ s
41. }
    5 k4 [% [: U! U( r

复制代码

2 f1 D0 `# c0 N修改角度的代码

1. void CircularProgress::setBarAngle(int angleInDegrees)
   : a8 ?9 k$ `* K- s7 r# Y3 Q4 Q7 c
2. {
   7 c4 q7 X9 ?) `1 k0 {5 s" ~
3.     bar.updateArcEnd((int)angleInDegrees);
   3 }8 q' @, z' _) m' z6 l
4. 
   5 n$ T' h) G0 m% C$ E0 o4 p6 N
5.     currentPercentage = (int)(100.0f * (angleInDegrees + END_DEGREE) / (END_DEGREE - START_DEGREE));
   
6.     Unicode::snprintf(percentageTextBuffer, 5, "%d", currentPercentage);
   0 h, t, z% P+ u' N: W4 b9 e- O/ _
7.     percentageText.invalidate();
   ! i7 h: \( f5 s; f! L8 l) x+ T
8. }
   

复制代码

到这里一个控件就展示完了，之后给大家展示下这个控件的使用。

1.     percentageBar.setXY(background.getX() + (background.getWidth() - percentageBar.getWidth()) / 2, background.getY() + (background.getHeight() - percentageBar.getHeight()) / 2);
   
2.     percentageBar.setBarAngle(100);
   
3.     percentageBar.setVisible(false);
   
4.     add(percentageBar); //圆环
   

复制代码

# w' i, i% z  q! ~! ?————————————————
版权声明：空闲的程序员