TouchGFX使用教程（六）

圆环型进度条

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

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

制作原理

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

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

背景图

前景图
除此之外，也需要圆环的部分，第一圆环需要根据百分比的数值进行变动，第二也可以通过手动进行滑动，如果用图片制作那么会加大繁琐程度也不会有太好的效果。这里我们想到touchgfx官方提供的画圆的工具Circle类，这个类继承的是画图及画布的部分，这样就需要一个画出色彩斑斓的画笔去画圆。 那这个画笔的颜色如下图
通过这个画笔则可以制作出相应的圆环。
到这里总结下之前的思路，首先需要两个图片一个做前景一个做背景，还有需要一个圆环，一个画笔，其余就是需要滑动事件，及控件窗口。
到这里有人会问，这么简单就制作一个控件吗，其实大多数控件都可以分解为简单的部分。通过简单的搭建可以做出复杂的效果，千里之行始于足下嘛。下面看下制作流程吧。

制作流程

首先创建个控件类。

class CircularProgress : public Container
{
   

}

在类中添加内容

class CircularProgress : public Container
{
   
public:

    CircularProgress();

    virtual ~CircularProgress();

    int getValue()
    {
   
        return currentPercentage;
    }

    void setBarAngle(int angleInDegrees);

    virtual void handleClickEvent(const ClickEvent& evt);
    virtual void handleDragEvent(const DragEvent& evt);

protected:
    static const int END_DEGREE = 116