TouchGFX使用教程(六)

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
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值