Android自定义带进度的刻度条

如何自定义控件？
1.自定义属性的声明和获取；
2.测量onMeasure；
3.布局onLayout（ViewGroup）；
4.绘制onDraw；
5.onTouchEvent；
6.onInterceptTouchEvent（ViewGroup）;
7.状态的恢复与保存（与Activity生命周期有关）；

自定义绘制的PrograssBar的水平进度条如下 有刻度 刻度在中间显示

下面由代码实现：在values文件夹下建立attr.xml 放入要绘制进度条所需要的。分别是进度条字体①颜色和②大小，Prograss走过的条的③颜色和④高度，Prograss没有走过的条的⑤颜色和⑥高度，还有显示数值和进度条之间有间隔的空间⑦宽度。一共七个参数。

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- 声明-->
    <attr name="prograss_unreach_color" format="color"></attr>
    <attr name="prograss_unreach_height" format="dimension"></attr>
    <attr name="prograss_reach_color" format="color"></attr>
    <attr name="prograss_reach_height" format="dimension"></attr>
    <attr name="text_color" format="color"></attr>
    <attr name="text_size" format="dimension"></attr>
    <attr name="prograss_text_offset" format="dimension"></attr>

    <!-- 使用-->
    <declare-styleable name="horizonalPrograssBarWithPrograss">
        <attr name="prograss_unreach_color" ></attr>
        <attr name="prograss_unreach_height" ></attr>
        <attr name="prograss_reach_color" ></attr>
        <attr name="prograss_reach_height" ></attr>
        <attr name="text_color"></attr>
        <attr name="text_size"></attr>
        <attr name="prograss_text_offset" ></attr>


    </declare-styleable>
</resources>

新建包View，并新建类class horizonalPrograssBarWithPrograss，如下：

package com.chase.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.widget.ProgressBar;

import com.chase.cn.customprograssbar.R;

/**
 * Created by Chase on 2016/11/29.
 */

public class horizonalPrograssBarWithPrograss extends ProgressBar {

    //这里声明默认值
    private static final int DEFAULT_TEXT_SIZE = 10;//sp
    private static final int DEFAULT_TEXT_COLOR = 0xFFC00D1;
    private static final int DEFAULT_COLOR_UNREACH = 0XFFD3D6DA;
    private static final int DEFAULT_HEIGHT_UNREACH = 2;//dp
    private static final int DEFAULT_COLOR_REACH = 0xFFC00D1;
    private static final int DEFAULT_HRIGHT_REACH = 2;//dp
    private static final int DEFAULT_TEXT_OFFSET = 10;//dp

    //编写我们的值
    protected int mTextSize = dp2px(DEFAULT_TEXT_SIZE);
    protected int mTextColor = DEFAULT_TEXT_COLOR;
    protected int mUnReachColor = DEFAULT_COLOR_UNREACH;
    protected int mUnReachHeight = DEFAULT_HEIGHT_UNREACH;
    protected int mReachColor = DEFAULT_COLOR_REACH;
    protected int mReachHeight = DEFAULT_HRIGHT_REACH;
    protected int mTextOffset = dp2px(DEFAULT_TEXT_OFFSET);

    protected Paint mPaint = new Paint();
    protected int mRealWidth; //进度条实际宽度

    //2个参数法
    public horizonalPrograssBarWithPrograss(Context context, AttributeSet attrs) {
        this(context, attrs, 0);//2个参数继承3个参数的方法
    }

    public horizonalPrograssBarWithPrograss(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        obtainStyledAttrs(attrs);


    }

    //获取自定义属性
    private void obtainStyledAttrs(AttributeSet attrs) {
        TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.horizonalPrograssBarWithPrograss);

        mTextSize = (int) ta.getDimension(R.styleable.horizonalPrograssBarWithPrograss_text_size, mTextSize);
        mTextColor = ta.getColor(R.styleable.horizonalPrograssBarWithPrograss_text_color, mTextColor);
        mTextOffset = (int) ta.getDimension(R.styleable.horizonalPrograssBarWithPrograss_prograss_text_offset, mTextOffset);
        mUnReachColor = ta.getColor(R.styleable.horizonalPrograssBarWithPrograss_prograss_unreach_color, mUnReachColor);
        mUnReachHeight = (int) ta.getDimension(R.styleable.horizonalPrograssBarWithPrograss_prograss_unreach_height, mUnReachHeight);
        mReachColor = ta.getColor(R.styleable.horizonalPrograssBarWithPrograss_prograss_reach_color, mReachColor);
        mReachHeight = (int) ta.getDimension(R.styleable.horizonalPrograssBarWithPrograss_prograss_reach_height, mReachHeight);

        mPaint.setTextSize(mTextSize);
        ta.recycle();
    }

    @Override
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//        int widthMode = MeasureSpec.getMode(widthMeasureSpec);//因为是水平进度条 默认宽度为用户的输入 所以不需要判断
        int widthVal = MeasureSpec.getSize(widthMeasureSpec);

        int height = measureHeight(heightMeasureSpec);

        setMeasuredDimension(widthVal, height);//完成测量
        //实际绘制区域的宽度
        mRealWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
    }

    //高度测量的方法
    private int measureHeight(int heightMeasureSpec) {
        int result = 0;
        int mode = MeasureSpec.getMode(heightMeasureSpec);
        int size = MeasureSpec.getSize(heightMeasureSpec);

        if (mode == MeasureSpec.EXACTLY) {//精确值，用户给的精确值 如200dp marchparent
            result = size;
        } else {//否则宽度 是由文字的距离确定的
            int textHeight = (int) (mPaint.descent() - mPaint.ascent());
            result = getPaddingTop() //上边距
                    + getPaddingBottom() //下边距
                    + Math.max(Math.max(mReachHeight, mUnReachHeight), Math.abs(textHeight));//三者最大值
            if (mode == MeasureSpec.AT_MOST) {
                result = Math.min(result, size);
            }
        }

        return result;
    }

    //1个参法
    public horizonalPrograssBarWithPrograss(Context context) {
        this(context, null);//继承两个参数的构造方法，当用户在使用时new的时候用，但是使用时一般是用两个参数的构造方法的
    }



 /**
     *
     下面是绘制进度条的方法
     * @param canvas
     */
    @Override
    protected synchronized void onDraw(Canvas canvas) {
//        super.onDraw(canvas);
        canvas.save();
        canvas.translate(getPaddingLeft(), getHeight() / 2);//移动画布到 最左边 正中间

        //判断是否需要绘制unReachBar
        boolean noNeedUnReach = false;
        //DrawReachBar如下：

        //拿到文本宽度
        String text = getProgress() + "";
        int textWidth = (int) mPaint.measureText(text);

        float ratio = getProgress() * 1.0f / getMax();
        float prograssX = ratio * mRealWidth;
        if (prograssX + textWidth > mRealWidth) {
            prograssX = mRealWidth - textWidth;//防止进度条到100文本出去
            noNeedUnReach = true;
        }

        float endX = prograssX - mTextOffset / 2;
        if (endX > 0) {
            mPaint.setColor(mReachColor);
            mPaint.setStrokeWidth(mReachHeight);
            canvas.drawLine(0, 0, endX, 0, mPaint);
        }

        //Draw Text
        mPaint.setColor(mTextColor);
        int y = (int) (-(mPaint.descent()+mPaint.ascent())/2);
        canvas.drawText(text,prograssX,y,mPaint);

        //Draw UnReachBar
        if (!noNeedUnReach){
            float start = prograssX + mTextOffset/2 +textWidth;
            mPaint.setColor(mUnReachColor);
            mPaint.setStrokeWidth(mReachHeight);
            canvas.drawLine(start,0,mRealWidth,0,mPaint);
        }

        canvas.restore();
    }

    //转换方法dp 2 px
    protected int dp2px(int dpVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                dpVal, getResources().getDisplayMetrics());
    }

    protected int sp2px(int spVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
                spVal, getResources().getDisplayMetrics());
    }


}

这是进度条的绘制完成了，上面进度条高度的测量，实际比较关键的是测量文字的高度，如图：

然后现在可以在activity_main.xml中定义并测试：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:chase="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <com.chase.view.horizonalPrograssBarWithPrograss
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:padding="5dp"
            android:progress="50" />

        <com.chase.view.horizonalPrograssBarWithPrograss
            android:id="@+id/prograss2"
            chase:text_color="#44ff0000"
            chase:prograss_unreach_color="#000"
            chase:prograss_reach_height="5dp"
            chase:prograss_unreach_height="5dp"
            chase:text_size="10sp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:padding="5dp"
            android:progress="0" />


    </LinearLayout>
</ScrollView>

就如上面的，我们可以自定义进度条的属性，只需要添加这行：（这是在AS中）

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

Eclipse中应该要这么写（跟上ManiFeast中显示的包名）：

xmlns:chase="http://schemas.android.com/apk/com.chase.cn.customprograssbar"

如前面所示，第二个PrograssBar进行进度变化测试，在MainActivity中：用handler进行测试：

package com.chase.cn.customprograssbar;

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;

import com.chase.view.horizonalPrograssBarWithPrograss;


public class MainActivity extends AppCompatActivity {

    private horizonalPrograssBarWithPrograss mPrograss;

    private static final int MSG_UPDATE = 0x111;
    private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            int prograss = mPrograss.getProgress();
            mPrograss.setProgress(++prograss);
            if (prograss>=100){
                handler.removeMessages(MSG_UPDATE);
            }else {
                handler.sendEmptyMessageDelayed(MSG_UPDATE,100);
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mPrograss = (horizonalPrograssBarWithPrograss) findViewById(R.id.prograss2);
        handler.sendEmptyMessage(MSG_UPDATE);
    }
}

下面的代码自定义了圆形的进度条，样式与上面的相似，只不过是圆形的。

首先在attr.xml中继续添加：添加圆形需要的半径

<declare-styleable name="RoundPrograssBarWithPrograss">
        <attr name="radius" format="dimension" ></attr>
    </declare-styleable>

在View包下新建class RoundPrograssBarWithPrograss，继承上面的水平进度条。

package com.chase.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;

import com.chase.cn.customprograssbar.R;

/**
 * Created by Chase on 2016/11/30.
 */

public class RoundPrograssBarWithPrograss extends horizonalPrograssBarWithPrograss {

    private int mRadius = dp2px(30);

    private int mMaxPaintWidth;

    public RoundPrograssBarWithPrograss(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        mReachHeight = (int) (mUnReachHeight * 2.5f);

        TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.RoundPrograssBarWithPrograss);
        mRadius = (int) ta.getDimension(R.styleable.RoundPrograssBarWithPrograss_radius, mRadius);
        ta.recycle();

        //设置画笔属性
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setAntiAlias(true);//抗锯齿
        mPaint.setDither(true);//防抖动
        mPaint.setStrokeCap(Paint.Cap.ROUND);//设置连接处为弧形
    }

    public RoundPrograssBarWithPrograss(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

    @Override
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        mMaxPaintWidth = Math.max(mReachHeight, mUnReachHeight);//最大画笔宽度 取进度条 unreach和reach的最大
        //设置期望值，默认四个Paddding一致
        int expect = mRadius * 2 + mMaxPaintWidth + getPaddingLeft() + getPaddingRight();

        //用系统提供的方法来测量用户给出的数据
        int width = resolveSize(expect, widthMeasureSpec);
        int height = resolveSize(expect, heightMeasureSpec);

        int realWidth = Math.min(width, height);//取二者最小值，防止宽高取得不一致、

        mRadius = (realWidth - getPaddingLeft() - getPaddingRight() - mMaxPaintWidth) / 2;

        setMeasuredDimension(realWidth, realWidth);
    }

    @Override
    protected synchronized void onDraw(Canvas canvas) {
        String text = getProgress() + "%";
        float textWidth = mPaint.measureText(text);
        float textHeight = (mPaint.descent() + mPaint.ascent()) / 2;

        canvas.save();
        canvas.translate(getPaddingLeft() + mMaxPaintWidth / 2, getPaddingTop() + mMaxPaintWidth / 2);
        mPaint.setStyle(Paint.Style.STROKE);
        //Draw unReachBar
        mPaint.setColor(mUnReachColor);
        mPaint.setStrokeWidth(mUnReachHeight);
        canvas.drawCircle(mRadius,mRadius,mRadius,mPaint);
        //Draw ReachBar
        mPaint.setColor(mReachColor);
        mPaint.setStrokeWidth(mReachHeight);
        float sweepAngle = getProgress()*1.0f/getMax()*360; //算出弧度
        canvas.drawArc(new RectF(0,0,mRadius*2,mRadius*2),0,sweepAngle,false,mPaint);
        //Draw Text
        mPaint.setColor(mTextColor);
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawText(text,mRadius-textWidth/2,mRadius-textHeight,mPaint);
        canvas.restore();
    }
}

然后再activity_main.xml中可以使用了：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:chase="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <com.chase.view.horizonalPrograssBarWithPrograss
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:padding="5dp"
            android:progress="50" />

        <com.chase.view.horizonalPrograssBarWithPrograss
        android:id="@+id/prograss2"
        chase:text_color="#44ff0000"
        chase:prograss_unreach_color="#000"
        chase:prograss_reach_height="5dp"
        chase:prograss_unreach_height="5dp"
        chase:text_size="10sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:padding="5dp"
        android:progress="0" />

        <com.chase.view.RoundPrograssBarWithPrograss
        android:id="@+id/prograss3"
        chase:text_color="#44ff0000"
        chase:radius="25dp"
        chase:prograss_reach_height="5dp"
        chase:prograss_unreach_height="5dp"
        chase:text_size="10sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:padding="5dp"
        android:progress="30" />

        <com.chase.view.RoundPrograssBarWithPrograss
            android:id="@+id/prograss4"
            chase:text_color="#44ff0000"
            chase:radius="80dp"
            chase:prograss_reach_height="5dp"
            chase:prograss_unreach_height="5dp"
            chase:text_size="10sp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:padding="5dp"
            android:progress="20" />


    </LinearLayout>
</ScrollView>