升云的Android记事本

Android-自定义控件--环形进度条按钮

2017-09-11  本文已影响0人  升云手札

Android的自定义的环形进度条实现有多种方法。以下是其中一个,可以实现一些复杂点的效果。
实现思路:继承View类,并重写onDraw方法。同时用一个类实时计算绘画的进度,实现环形进度条的效果。

实现出来的效果:
1.添加了监听接口,监控进度条的绘画是否完成,即进度是100%。
2.可以设定进度条播放的时间
3.可以点击暂停和继续还有停止进行进度条的绘画,可以当实时显示音乐当前播放进度的按钮。
4.更多的效果可有待继续增加

image.png

xml文件中的属性设置:

<!-- 环形进度条按钮属性 -->
    <declare-styleable name="CircleProgressBar">  
        <attr name="max" format="integer"/>                <!-- 进度条最大值 -->
        <attr name="fill" format="boolean"/>              <!-- 是否填充圆形区域 ,不填充就是环形的进度条了-->
        <attr name="Paint_Width" format="integer"/>        <!-- 画笔宽度,填充模式下无效,会被重置为0 -->
        <attr name="Paint_Color" format="integer"/>        <!-- 画笔颜色 -->
        <attr name="Inside_Interval" format="integer"/>   <!-- 圆形区域向里缩进的距离 --> 
    </declare-styleable>

默认变量:

private static String TAG = "CircleProgressButton";
    private static final int DEFAULT_MAX_VALUE = 100; // 默认进度条最大值
    private static final int DEFAULT_PAINT_WIDTH = 10; // 默认画笔宽度
    private static final int DEFAULT_PAINT_COLOR = 0xffffcc00; // 默认画笔颜色
    private static final boolean DEFAULT_FILL_MODE = true; // 默认填充模式
    private static final int DEFAULT_INSIDE_VALUE = 0; // 默认缩进距离

    private CircleAttribute mCircleAttribute; // 圆形进度条基本属性

    private int mMaxProgress; // 进度条最大值
    private int mMainCurProgress; // 主进度条当前值


    private CartoomEngine mCartoomEngine; // 动画引擎
    private boolean isBCartoom = false;//是否正在作画
    private Drawable mBackgroundPicture; // 背景图
    private boolean isPause = false; // 是否暂停
    private int mPlayTime; // 播放时间
    private  OnCompletedListener mCompLsn;
    private boolean finishFlag = false;

重写onDraw方法:

public void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);

        if (mBackgroundPicture == null) // 没背景图的话就绘制底色
        {
            canvas.drawArc(mCircleAttribute.mRoundOval, 0, 360,
                    mCircleAttribute.mBRoundPaintsFill,
                    mCircleAttribute.mBottomPaint);
        }



        float rate = (float) mMainCurProgress / mMaxProgress;
        float sweep = 360 * rate;
        canvas.drawArc(mCircleAttribute.mRoundOval, mCircleAttribute.mDrawPos,
                sweep, mCircleAttribute.mBRoundPaintsFill,
                mCircleAttribute.mMainPaints);
        postInvalidate();
    }

CartoomEngine类负责实时更新进度条的当前值,详细代码请下载源码查看
源码地址:http://download.csdn.net/detail/syun0929/7103809

上一篇 下一篇

猜你喜欢

热点阅读