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



这期主要给大家介绍这个圆环进度条。

制作原理
这个 看起来感觉很高大上的进度条，其实组成原理分为几个部分。
首先先注意下这个界面，这个界面是touchGFX官方提供的demo中的一个画面，其中左侧的滑动栏主要作用是用于切换右侧的界面，这里我们不过多讲解。再看下整体通过touchGFX搭建的界面。



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


背景图



前景图
除此之外，也需要圆环的部分，第一圆环需要根据百分比的数值进行变动，第二也可以通过手动进行滑动，如果用图片制作那么会加大繁琐程度也不会有太好的效果。这里我们想到touchgfx官方提供的画圆的工具Circle类，这个类继承的是画图及画布的部分，这样就需要一个画出色彩斑斓的画笔去画圆。 那这个画笔的颜色如下图




通过这个画笔则可以制作出相应的圆环。
到这里总结下之前的思路，首先需要两个图片一个做前景一个做背景，还有需要一个圆环，一个画笔，其余就是需要滑动事件，及控件窗口。
到这里有人会问，这么简单就制作一个控件吗，其实大多数控件都可以分解为简单的部分。通过简单的搭建可以做出复杂的效果，千里之行始于足下嘛。下面看下制作流程吧。


制作流程
首先创建个控件类。

1. class CircularProgress : public Container
   
2. {
   
3. 
   
4. }
   

复制代码

在类中添加内容

1. class CircularProgress : public Container
   
2. {
   
3. public:
   
4. 
   
5.     CircularProgress();
   
6. 
   
7.     virtual ~CircularProgress();
   
8. 
   
9.     int getValue()
   
10.     {
    
11.         return currentPercentage;
    
12.     }
    
13. 
    
14.     void setBarAngle(int angleInDegrees);
    
15. 
    
16.     virtual void handleClickEvent(const ClickEvent& evt);
    
17.     virtual void handleDragEvent(const DragEvent& evt);
    
18. 
    
19. protected:
    
20.     static const int END_DEGREE = 116;
    
21.     static const int START_DEGREE = -END_DEGREE;
    
22. 
    
23.     Image background; 背景
    
24.     Image centerImage; 前景
    
25. 
    
26.     Circle bar; 圆环
    
27. #if !defined(USE_BPP) || USE_BPP==16
    
28.     PainterRGB565Bitmap bitmapPainter; 画笔
    
29.     PainterRGB565 colorPainter;
    
30. #elif USE_BPP==24
    
31.     PainterRGB888Bitmap bitmapPainter;
    
32.     PainterRGB888 colorPainter;
    
33. #elif defined(LCD8BPP_ABGR2222)
    
34.     PainterABGR2222Bitmap bitmapPainter;
    
35.     PainterABGR2222 colorPainter;
    
36. #elif defined(LCD8BPP_RGBA2222)
    
37.     PainterRGBA2222Bitmap bitmapPainter;
    
38.     PainterRGBA2222 colorPainter;
    
39. #elif defined(LCD8BPP_BGRA2222)
    
40.     PainterBGRA2222Bitmap bitmapPainter;
    
41.     PainterBGRA2222 colorPainter;
    
42. #elif defined(LCD8BPP_ARGB2222) || USE_BPP==8
    
43.     PainterARGB2222Bitmap bitmapPainter;
    
44.     PainterARGB2222 colorPainter;
    
45. #elif USE_BPP==4
    
46.     PainterGRAY4Bitmap bitmapPainter;
    
47.     PainterGRAY4 colorPainter;
    
48. #elif USE_BPP==2
    
49.     PainterGRAY2Bitmap bitmapPainter;
    
50.     PainterGRAY2 colorPainter;
    
51. #else
    
52. #error Unknown USE_BPP
    
53. #endif
    
54. 
    
55.     TextAreaWithOneWildcard percentageText;
    
56.     Unicode::UnicodeChar percentageTextBuffer[5];
    
57. 
    
58.     TextArea headlineText;//文字
    
59. 
    
60.     int currentPercentage;
    
61. 
    
62.     void updateBar(int newX, int newY); 位置
    
63. };
    

复制代码

之后看一下整体的组合。

1. CircularProgress::CircularProgress()
   
2. {
   
3.     setTouchable(true);
   
4. 
   
5.     background.setBitmap(Bitmap(BITMAP_CONTROLS_WHEEL_BACKGROUND_ID));
   
6.     background.setXY(0, 0);
   
7.     add(background);放背景
   
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);放前景
    
12. 
    
13.     bitmapPainter.setBitmap(Bitmap(BITMAP_CONTROL_COLOR_WHEEL_ID)); 设置画笔的图片
    
14.     colorPainter.setColor(Color::getColorFrom24BitRGB(0x11, 0x2C, 0x3C), 70);
    
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);
    
20.     bar.setRadius(radius);
    
21.     bar.setLineWidth(25);
    
22.     bar.setPainter(bitmapPainter);
    
23.     bar.setCapPrecision(15);
    
24.     bar.setArc(START_DEGREE, 0);
    
25.     add(bar);
    
26. 设置中间显示的文字
    
27.     Unicode::snprintf(percentageTextBuffer, 5, "%d", 100);
    
28.     percentageText.setWildcard(percentageTextBuffer);
    
29.     percentageText.setTypedText(TypedText(T_PERCENTAGE_BAR_READOUT));
    
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));
    
35.     headlineText.setXY(background.getX() + (background.getWidth() - headlineText.getWidth()) / 2, percentageText.getY() + 60);
    
36.     headlineText.setColor(Color::getColorFrom24BitRGB(0x17, 0x3C, 0x51));
    
37.     add(headlineText);
    
38. 
    
39.     setWidth(background.getWidth());
    
40.     setHeight(background.getHeight());
    
41. }
    

复制代码

修改角度的代码

1. void CircularProgress::setBarAngle(int angleInDegrees)
   
2. {
   
3.     bar.updateArcEnd((int)angleInDegrees);
   
4. 
   
5.     currentPercentage = (int)(100.0f * (angleInDegrees + END_DEGREE) / (END_DEGREE - START_DEGREE));
   
6.     Unicode::snprintf(percentageTextBuffer, 5, "%d", currentPercentage);
   
7.     percentageText.invalidate();
   
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); //圆环
   

复制代码

————————————————
版权声明：空闲的程序员