在上一篇文章《Android神笔之Paint》学习了Paint的基本用法,但是具体的应用我们还没有实践过。从标题中可知,本文是带领读者使用Paint,自定义一个进度条控件。



上图就是本文要实现的效果图。既然是自定义控件,本文的该控件是直接继承View,然后重写View的onMeasure和onDraw方法来实现。其中onMeasure主要作用是测量控件的宽/高。而onDraw则是将界面绘制到屏幕上。

从效果的效果上看,我们需要自定义一些属性,如:进度度条的颜色、圆边框的颜色、圆边框的宽度和文本的大小等等。

具体的自定义属性请看下面attrs.xml的代码:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CustomProgressBar">
        <attr name="roundProgressColor" format="color"></attr>
        <attr name="roundColor" format="color"></attr>
        <attr name="roundWidth" format="dimension"></attr>
        <attr name="textSize" format="dimension"></attr>
        <attr name="textColor" format="color"></attr>
        <attr name="max" format="integer"></attr>
        <attr name="textShow" format="boolean"></attr>
        <attr name="style">
            <enum name="STROKE" value="0"></enum>
            <enum name="FILL" value="1"></enum>
        </attr>
    </declare-styleable>
</resources>
复制代码

接下来看本文的最重要部分,也就是自定义View

public class CustomProgressBar extends View {

    private int max = 100;//总进度
    private int roundColor = Color.RED;//进度圆弧的颜色
    private float roundWidth = 10;//圆边框宽度
    private int roundProgressColor = Color.BLUE;//默认的大圆环边框颜色
    private float textSize = 55;//文本大小
    private int textColor = Color.GREEN;//文本默认颜色
    private boolean textShow = true;//是否展示文本
    public static final int STROKE = 0;//描边
    public static final int FILL = 1;//填充
    private int style = STROKE;//默认描边

    private int progress;//进度
    private Paint mPaint;

    private int mWidth = 200;//默认控件宽度,wrap_content时候使用
    private int mHeight = 200;//默认控件高度,wrap_content时候使用


    public CustomProgressBar(Context context) {
        this(context, null);
    }

    public CustomProgressBar(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        mPaint = new Paint();
        if (attrs != null) {
            TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomProgressBar);
            max = typedArray.getInteger(R.styleable.CustomProgressBar_max, 100);
            roundColor = typedArray.getColor(R.styleable.CustomProgressBar_roundColor, Color.BLUE);
            roundProgressColor = typedArray.getColor(R.styleable.CustomProgressBar_roundProgressColor, Color.BLUE);
            textColor = typedArray.getColor(R.styleable.CustomProgressBar_textColor, Color.GREEN);
            textSize = typedArray.getDimension(R.styleable.CustomProgressBar_textSize, 55);
            roundWidth = typedArray.getDimension(R.styleable.CustomProgressBar_roundWidth, 10);
            textShow = typedArray.getBoolean(R.styleable.CustomProgressBar_textShow, true);
            style = typedArray.getInt(R.styleable.CustomProgressBar_style, 0);

            typedArray.recycle();
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST){
            setMeasuredDimension(mWidth,mHeight);
        }else if (widthSpecMode == MeasureSpec.AT_MOST){
            setMeasuredDimension(mWidth,heightSpecSize);
        }else if (heightSpecMode == MeasureSpec.AT_MOST){
            setMeasuredDimension(widthSpecSize,mHeight);
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        final int paddingLeft = getPaddingLeft();
        final int paddingRight = getPaddingRight();
        final int paddingTop = getPaddingTop();
        final int paddingBottom = getPaddingBottom();
        int width = getWidth() - paddingLeft - paddingRight;
        int height = getHeight() - paddingBottom - paddingTop;

        //画默认的大圆环
        float radius = (float)Math.min(width,height)/2.0f;//中心坐标点
        mPaint.setColor(roundColor);
        mPaint.setStyle(Paint.Style.STROKE);//描边
        mPaint.setStrokeWidth(roundWidth);//圆环边的宽度
//        if (style == STROKE){
//            mPaint.setStrokeWidth(roundWidth);//圆环边的宽度
//        }
        mPaint.setAntiAlias(true);
        //(float cx, float cy, float radius, @NonNull Paint paint)
        canvas.drawCircle(paddingLeft+width/2,paddingTop+height/2,radius,mPaint);

        //画进度百分比
        mPaint.setColor(textColor);
        mPaint.setStrokeWidth(0);//圆环的宽度
        mPaint.setTextSize(textSize);
        mPaint.setTypeface(Typeface.DEFAULT_BOLD);

        int percent = (int)(progress/(float)max * 100);
        if(textShow && percent!=0 && style == STROKE){
            //(@NonNull String text, float x, float y, @NonNull Paint paint)
            canvas.drawText(percent+"%", (getWidth()-mPaint.measureText(percent+"%"))/2f,
                    //y公式: float baselineY = centerY + (fontMetrics.bottom-fontMetrics.top)/2 - fontMetrics.bottom
                    getWidth()/2f-(mPaint.descent()+mPaint.ascent())/2f,
                    mPaint);
        }

        //画圆弧
        //矩形区域,定义圆弧的形状大小
        //(float left, float top, float right, float bottom)
        RectF oval = new RectF(paddingLeft, paddingTop, width+paddingLeft, height+paddingTop);
        mPaint.setColor(roundProgressColor);
        mPaint.setStrokeWidth(roundWidth);//圆环边的宽度
        switch (style){
            case STROKE:
                mPaint.setStyle(Paint.Style.STROKE);
                //(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,@NonNull Paint paint)
                //useCenter:设置圆弧在绘画的时候,是否经过圆形
                canvas.drawArc(oval , 0, 360*progress/max, false, mPaint);
                break;
            case FILL:
                mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
                if(progress!=0)
                    canvas.drawArc(oval , 0, 360*progress/max, true, mPaint);
                break;
            default:
                break;
        }

    }

    public void setProgressWidth(int width) {
        mWidth = width;
    }

    public void setProgressHeight(int height) {
        mHeight = height;
    }

    public synchronized void setMax(int max) {
        if (max < 0) {
            throw new IllegalArgumentException("max不能小于0");
        }
        this.max = max;
    }

    public void setRoundColor(int roundColor) {
        this.roundColor = roundColor;
    }

    public void setRoundWidth(float roundWidth) {
        this.roundWidth = roundWidth;
    }

    public void setRoundProgressColor(int roundProgressColor) {
        this.roundProgressColor = roundProgressColor;
    }

    public void setTextSize(float textSize) {
        this.textSize = textSize;
    }

    public void setTextColor(int textColor) {
        this.textColor = textColor;
    }

    public void setTextShow(boolean textShow) {
        this.textShow = textShow;
    }

    public synchronized void setProgress(int progress) {
        if (progress < 0) {
            throw new IllegalArgumentException("progress不能小于0");
        }
        if (progress > max) {
            progress = max;
        }
        if (progress <= max) {
            this.progress = progress;
            postInvalidate();
        }
    }

    public synchronized int getMax() {
        return max;
    }

    public int getRoundColor() {
        return roundColor;
    }

    public float getRoundWidth() {
        return roundWidth;
    }

    public int getRoundProgressColor() {
        return roundProgressColor;
    }

    public int getTextColor() {
        return textColor;
    }

    public boolean isTextShow() {
        return textShow;
    }

    public synchronized int getProgress() {
        return progress;
    }
}
复制代码

流程:初始化的时候会拿到自定义属性,然后onMeasure方法中测量控件的宽和高,该方法主要处理了LayoutParams的wrap_content,当wrap_content时,默认设置默认宽/高,而不是让控件占据整个屏幕,需要调用setMeasuredDimension方法测量。最后测量得到了控件的宽/高,调用onDraw方法将界面绘制到屏幕上,在onDraw方法绘制的时需要考虑padding的情况,如果不做padding处理,则padding将不起作用。

onDraw绘制流程:先绘制一个默认的大圆环,然后在圆中心绘制百分比的文本,最后再绘制一个进度圆环,进度圆环会覆盖底部的默认大圆环,这样就达到显示进度的情况。

设置好画笔之后,使用canvas.drawCircle绘制默认的大圆环,再次设置画笔,使用canvas.drawText方法绘制文本;画圆弧时需要定义一个矩形区域RectF,通过canvas.drawArc方法绘制。

绘制好之后,如何让用户看到进度条在变化呢?其实就是通过setProgress方法里面的postInvalidate()方法,该方法会刷新界面,刷新界面时会调用onDraw,这样就可以将进度画到屏幕上,进度条不停的在变化。

使用

XML中使用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.main.paint.PaintActivity">

    <com.main.paint.CustomProgressBar
        android:id="@+id/progressbar"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:roundProgressColor="#FF0000"
        app:roundWidth="2dp"
        app:textColor="#FF0000"
        app:style="STROKE"
        android:padding="30dp"
        app:textSize="20dp"/>

    <com.main.paint.CustomProgressBar
        android:id="@+id/progressbar01"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:roundProgressColor="#FF0000"
        app:roundWidth="2dp"
        app:textColor="#FF0000"
        app:style="FILL"
        android:padding="30dp"
        app:textSize="20dp"/>

</LinearLayout>
复制代码

Activity代码如下:

public class PaintActivity extends AppCompatActivity {

    private CustomProgressBar mCustomProgressBar;
    private CustomProgressBar mCustomProgressBar01;
    private int progress;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_paint);
        mCustomProgressBar = (CustomProgressBar)this.findViewById(R.id.progressbar);
        mCustomProgressBar.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                new Thread(new Runnable() {


                    @Override
                    public void run() {
                        progress = 0;
                        while (progress <= 100) {
                            progress += 2;
                            mCustomProgressBar.setProgress(progress);
                            try {
                                Thread.sleep(100);
                            } catch (InterruptedException e) {
                                e.printStackTrace();
                            }
                        }
                    }
                }).start();
            }
        });


        mCustomProgressBar01 = (CustomProgressBar)this.findViewById(R.id.progressbar01);
        mCustomProgressBar01.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                new Thread(new Runnable() {


                    @Override
                    public void run() {
                        progress = 0;
                        while (progress <= 100) {
                            progress += 2;
                            mCustomProgressBar01.setProgress(progress);
                            try {
                                Thread.sleep(100);
                            } catch (InterruptedException e) {
                                e.printStackTrace();
                            }
                        }
                    }
                }).start();
            }
        });
    }
}
复制代码

这样就完成了一个自定义的进度条控件,并且在onDraw方法中使用Paint将界面绘制出来。读者可以自行实践一把,加深对Paint的理解。