android自定义进度条控件,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.自定义属性

复制代码

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"

复制代码

引入控件

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:padding="15dp"

android:progress="50" />

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" />

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++);

复制代码