效果图：
效果图
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++);
网友评论