Android 自定义控件-自定义进度条。

效果图：

效果图

1.编写类继承View

public class ProgressBarView extends ProgressBar {
}

2.重写构造方法

    public ProgressBarView(Context context) {
        this(context, null);//这里调用本类的两个构造参数的构造方法
    }

    public ProgressBarView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);//这里调用本类的三个构造参数的构造方法
    }

    public ProgressBarView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //由于前两个构造都最终调用了此构造方法，所以在这里写初始化方法
        init(attrs);
    }

3.自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="progress_color" format="color"></attr>
    <attr name="progress_height" format="dimension"></attr>
    <attr name="progress_reach_color" format="color"></attr>
    <attr name="progress_reach_height" format="dimension"></attr>
    <attr name="progress_text_color" format="color"></attr>
    <attr name="progress_text_size" format="dimension"></attr>
    <attr name="progress_text_offset" format="dimension"></attr>

    <declare-styleable name="ProgressBarView">
        <attr name="progress_color"></attr>
        <attr name="progress_height"></attr>
        <attr name="progress_reach_color"></attr>
        <attr name="progress_reach_height"></attr>
        <attr name="progress_text_color"></attr>
        <attr name="progress_text_size"></attr>
        <attr name="progress_text_offset"></attr>
    </declare-styleable>

</resources>

4.声明需要的变量以及常量

    private static final int DEFAULT_TEXT_SIZE = 10;//默认文字大小
    private static final int DEFAULT_TEXT_COLOR = 0xFFFC00D1;//默认文字颜色
    private static final int DEFAULT_COLOR = 0xFFD3D6DA;//默认颜色
    private static final int DEFAULT_HEIGHT = 2;
    private static final int DEFAULT_REACH_COLOR = DEFAULT_TEXT_COLOR;
    private static final int DEFAULT_REACH_HEIGHT = 2;
    private static final int DEFAULT_TEXT_OFFSET = 10;

    private int mTextColor = DEFAULT_TEXT_COLOR;
    private int mHeight = dp2px(DEFAULT_HEIGHT);
    private int mReachColor = DEFAULT_REACH_COLOR;
    private int mReachHeight = dp2px(DEFAULT_REACH_HEIGHT);
    private int mColor = DEFAULT_COLOR;
    private int mTextSize = sp2px(DEFAULT_TEXT_SIZE);
    private int mTextOffset = dp2px(DEFAULT_TEXT_OFFSET);

    private Paint mPaint = new Paint();
    private int mRealWidth;

5.测量View大小

    @Override
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);//得到测量模式
        int widthVal = MeasureSpec.getSize(widthMeasureSpec);//默认用户需要给出明确值，所以不判断模式
        int height = measureHeight(heightMeasureSpec);
        setMeasuredDimension(widthVal, height);//设置了测量值后，可以获取测量值。
        mRealWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
    }

测量方法：

 /**
     * 测量高度
     *
     * @param heightMeasureSpec
     * @return
     */
    private int measureHeight(int heightMeasureSpec) {
        int result = 0;
        int mode = MeasureSpec.getMode(heightMeasureSpec);//得到测量模式
        int size = MeasureSpec.getSize(heightMeasureSpec);
        if (mode == MeasureSpec.EXACTLY) {//用户给了精确值
            result = size;
        } else { //MeasureSpec.UNSPECIFIED  MeasureSpec.AT_MOST 未指定明确参数
            int textHeight = (int) (mPaint.descent() - mPaint.ascent());//得到文字高度
            result = getPaddingTop() + getPaddingBottom() + Math.max(mHeight, Math.max(mReachHeight, Math.abs(textHeight)));//高度等于进度条高度和文字高度中最高的为准，并且加上padding值
            if (mode == MeasureSpec.AT_MOST) {//给定了最大值
                result = Math.min(result, size);
            }
        }

        return result;
    }

6.获取自定义属性

    /**
     * 获取自定义属性
     */
    private void init(AttributeSet attrs) {
        TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.ProgressBarView);
        mTextColor = ta.getColor(R.styleable.ProgressBarView_progress_color, mTextColor);
        mHeight = (int) ta.getDimension(R.styleable.ProgressBarView_progress_height, mHeight);
        mReachColor = ta.getColor(R.styleable.ProgressBarView_progress_reach_color, mReachColor);
        mReachHeight = (int) ta.getDimension(R.styleable.ProgressBarView_progress_reach_height, mReachHeight);
        mColor = ta.getColor(R.styleable.ProgressBarView_progress_text_color, mColor);
        mTextSize = (int) ta.getDimension(R.styleable.ProgressBarView_progress_text_size, mTextSize);
        mTextOffset = (int) ta.getDimension(R.styleable.ProgressBarView_progress_text_offset, mTextOffset);

        ta.recycle();
        mPaint.setTextSize(mTextSize);//设定文字大小，后续好测量文字高度
    }

附上单位转换工具类:

    private int dp2px(int val) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, val, getResources().getDisplayMetrics());
    }

    private int sp2px(int val) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, val, getResources().getDisplayMetrics());
    }

7.绘制界面

    @Override
    protected synchronized void onDraw(Canvas canvas) {
//        super.onDraw(canvas);
        canvas.save();
        canvas.translate(getPaddingLeft(), getHeight() / 2);//移动坐标到起点垂直居中位置

        //draw bar

        boolean noNeedUnRech = false;

        String text = getProgress() + "%";
        int textWidth = (int) mPaint.measureText(text);//测量进度值文本宽度

        float barWidth = mRealWidth - textWidth - mTextOffset;//先预留出文本宽度作为Bar总宽度
//        if (getProgress() <= 0 || getProgress() >= 100) {
//            barWidth = mRealWidth - textWidth - mTextOffset / 2;
//        }
        float radio = getProgress() * 1.0f / getMax();//得到目前进度比例
        float currProgress = radio * barWidth;//当前进度在Bar总长度上占有的宽度
        if (currProgress >= barWidth) {//当前进度是否已经达到100
            currProgress = barWidth;//限制不能超过100
            noNeedUnRech = true;
        }

        if (currProgress > 0) {//进度大于0才绘制起始进度条
            mPaint.setColor(mColor);
            mPaint.setStrokeWidth(mHeight);
            if (noNeedUnRech) {//如果进度已经100，那么文字后边距将省略，用于充满进度条
                currProgress += mTextOffset / 2;
            }
            canvas.drawLine(0, 0, currProgress, 0, mPaint);
        }

        //draw text
        mPaint.setColor(mTextColor);
        int y = (int) (-(mPaint.descent() + mPaint.ascent()) / 2);
        if (currProgress <= 0) {//进度低于0时，去除起始点文字边距
            canvas.drawText(text, currProgress, y, mPaint);
        } else {
            canvas.drawText(text, currProgress + mTextOffset / 2, y, mPaint);
        }

        //draw unreach bar
        if (!noNeedUnRech) {//如果进度未满才绘制结束Bar
            float start = currProgress + mTextOffset + textWidth;
            if (currProgress <= 0) {//进度低于0时，去除起始点文字边距
                start = start - mTextOffset / 2;
            }
            mPaint.setColor(mReachColor);
            mPaint.setStrokeWidth(mReachHeight);
            canvas.drawLine(start, 0, mRealWidth, 0, mPaint);
        }


        canvas.restore();
    }

8.使用
声明命名空间

 xmlns:chao="http://schemas.android.com/apk/res-auto"

引入控件

    <com.example.chao.progressbar.ProgressBarView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:padding="15dp"
        android:progress="50" />

    <com.example.chao.progressbar.ProgressBarView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:padding="15dp"
        android:progress="30"
        chao:progress_text_color="#ff0000" />

    <com.example.chao.progressbar.ProgressBarView
        android:id="@+id/progress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="#3090ff50"
        android:padding="15dp"
        android:progress="66"
        chao:progress_color="#000"
        chao:progress_height="2dp"
        chao:progress_reach_color="#f0f"
        chao:progress_reach_height="1dp"
        chao:progress_text_color="#f00"
        chao:progress_text_offset="10dp"
        chao:progress_text_size="12dp" />

效果图：

效果图

代码动态更新进度:

progress.setProgress(i++);