Android绘制弧形进度条

在开发中，需要用到弧形进度条，上网上查了下，有个开源的绘制弧形进度条的，只是它的渐变颜色是分成四段，不是很美观，于是自己参考着做了一个，效果如下图：

这个进度条控件我是参考Radial-Menu-Widget-Android-master开源代码的RadialProgressActivity.java文件改的，修改的主要是它的onDraw函数，修改如下：

protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        this.mRadialWidgetPaint.setStyle(Paint.Style.FILL);
        this.mRadialWidgetPaint.setColor(this.mBorderColor);
        /*用底色画一个圆环，带间隔效果*/
        for(int i = 0; i < this.mMaxSweepAngle; i+=10){
            canvas.drawArc(this.mRadialScoreRect, 90.0F+i, 9.9F, true, this.mRadialWidgetPaint);
        }

        if(this.mCurrentValue <= this.mMaxValue) {
            double textWidth = (double)(this.mCurrentValue * this.mMaxSweepAngle / this.mMaxValue);
            this.readingValuePer = this.mCurrentValue * 100 / this.mMaxValue;

            int i = 0;
            float rate = 0;
            float startAngle = 90.0F;
            /*根据进度条的长度分成长度为10的若干段，每段通过设置alpha值调节颜色*/
            for(i = 0; i<=textWidth-10; i+=10){
                rate = (float)(Math.abs(180-i)/180.0);
                this.mCurrentScoreColor = ((int)(0XFF*rate) <<24)|(this.mScoreColorRange[0] & (~(0XFF <<24)));
                this.mRadialWidgetPaint.setColor(this.mCurrentScoreColor);
                canvas.drawArc(this.mRadialScoreRect, startAngle+i, 10.0F, true, this.mRadialWidgetPaint);
            }
            /*绘制最后一段进度条弧度*/
            rate = Math.abs(180-i)/180;
            this.mCurrentScoreColor = ((int)(0XFF*rate) <<24)|(this.mScoreColorRange[0] & (~(0XFF <<24)));
            this.mRadialWidgetPaint.setColor(this.mCurrentScoreColor);
            canvas.drawArc(this.mRadialScoreRect, startAngle + i, (float) (textWidth - i), true, this.mRadialWidgetPaint);

        } else {
            Log.e(this.getClass().getName(), "Current value " + String.valueOf(this.mCurrentValue) + " greater that maximum value " + this.mMaxValue);
        }

        this.mRadialWidgetPaint.setShadowLayer(this.mShadowRadius, 0.0F, 0.0F, 0);
        this.mRadialWidgetPaint.setColor(this.mBaseColor);
        this.mRadialWidgetPaint.setShadowLayer(this.mShadowRadius * this.getResources().getDisplayMetrics().density, 0.0F, 0.0F, this.mShadowColor);
        canvas.drawCircle((float)(this.getWidth() / 2), (float)(this.getHeight() / 2), (float)((double)this.mRadius * 0.8D), this.mRadialWidgetPaint);
        this.mRadialWidgetPaint.setShadowLayer(this.mShadowRadius, 0.0F, 0.0F, 0);
        this.mRadialWidgetPaint.setColor(this.mCenterTextColor);
        this.mRadialWidgetPaint.setTextSize(this.mCenterTextSize);
        if(this.mFontName != null) {
            this.mRadialWidgetPaint.setTypeface(Typeface.createFromAsset(this.getContext().getAssets(), this.mFontName));
        }

        float var6 = 0.0F;
        if(this.isShowPercentText) {
            var6 = this.mRadialWidgetPaint.measureText(String.valueOf(this.readingValuePer) + "%");
            canvas.drawText(String.valueOf(this.readingValuePer)+"%", (float)(this.getWidth() / 2) - var6 / 2.0F, (float)(this.getHeight() / 2) + this.mRadius / 8.0F, this.mRadialWidgetPaint);
        } else {
            var6 = this.mRadialWidgetPaint.measureText(String.valueOf(this.mCurrentValue));
            canvas.drawText(String.valueOf(this.mCurrentValue), (float)(this.getWidth() / 2) - var6 / 2.0F, (float)(this.getHeight() / 2) + this.mRadius / 8.0F, this.mRadialWidgetPaint);
        }

        if(this.mSecondaryText != null) {
            this.mRadialWidgetPaint.setColor(this.mSecondaryTextColor);
            var6 = this.mRadialWidgetPaint.measureText(this.mSecondaryText);
            this.mRadialWidgetPaint.setTextSize(this.mSecondaryTextSize);
            canvas.drawText(this.mSecondaryText, (float)(this.getWidth() / 2) - var6 / 5.0F, (float)(this.getHeight() / 2) + this.mRadius / 2.0F, this.mRadialWidgetPaint);
        }

    }

然后就在布局文件里加上改写的控件:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:background="@color/sky_blue"
    tools:context="com.example.hornsey.myapplication.Demo.ChartDemo">

    <LinearLayout
        android:id="@+id/chart"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:id="@+id/progress"
            android:layout_margin="10dp"
            android:numeric="decimal"
            android:layout_weight="1"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/setting"
            android:text="设置"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>


    <com.example.hornsey.myapplication.Demo.RadialProgressView
        android:layout_marginTop="10dp"
        android:id="@+id/radialProgressView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

布局很简单，就是一个文本编辑框加一个按钮，按下按钮，将文本框的数字读取后设置进度条的进度，进度范围为0-100，Activity的代码如下：

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_chart_demo);

        radialProgressView = (RadialProgressView) findViewById(R.id.radialProgressView);

        radialProgressView.setShadowColor(Hcolor.white);
        radialProgressView.setSecondaryText(getResources().getString(R.string.text_learn));
        radialProgressView.setCenterTextColor(Hcolor.purple);
        radialProgressView.setSecondaryTextColor(Hcolor.purple);
        radialProgressView.setCurrentValue(82);


        findViewById(R.id.setting).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                editText = (EditText) findViewById(R.id.progress);
                String num = editText.getText().toString();
                learnPercentage = Integer.parseInt(num);
                if (learnPercentage > 100)
                    learnPercentage = 100;
                radialProgressView.setCurrentValue(learnPercentage);
                radialProgressView.invalidate();
            }
        });

总的来说，这个控件制作不难（都是copy的开源代码），稍微改动的就是颜色的渐变，这个是通过设置颜色的alpha值实现，使用的是位操作。位操作在java中似乎很少见，本人以前做嵌入式linux C好几年，所以实现有点C的风格。