打造炫酷进度条

如何自定义控件

1.自定义属性的声明与获取

2.测量onMeasure

3.布局onLayout（ViewGroup）

4.绘制onDraw

5.onTouchEvent

6.onInterceptTouchEvent（ViewGroup）

7.状态的恢复与保存

自定义属性的声明与获取

1.分析需要的自定义属性

2.在res/values/attrs.xml定义声明

3.在layout文件中进行使用

4.在View的构造方法中进行获取

条形进度条

attrs.xml

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

<attr name="progress_unreach_color" format="color"></attr>
<attr name="progress_unreach_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="HorizontalProgressBarWithProgress">

<attr name="progress_unreach_color"></attr>
<attr name="progress_unreach_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>

HorizontalProgressBarWithProgress.java

public class HorizontalProgressBarWithProgress extends ProgressBar {

private static final int DEFAULT_TEXT_SIZE = 10; // sp
private static final int DEFAULT_TEXT_COLOR = 0xFFFC00D1;
private static final int DEFAULT_COLOR_UNREACH = 0xFFD3D6DA;
private static final int DEFAULT_HEIGHT_UNREACH = 2; // dp
private static final int DEFAULT_COLOR_REACH = DEFAULT_TEXT_COLOR;
private static final int DEFAULT_HEIGHT_REACH = 2; // dp
private static final int DEFAULT_TEXT_OFFSET = 10; // dp

private int mTextSize = sp2px(DEFAULT_TEXT_SIZE);
private int mTextColor = DEFAULT_TEXT_COLOR;
private int mUnReachColor = DEFAULT_COLOR_UNREACH;
private int mUnReachHeight = dp2px(DEFAULT_HEIGHT_UNREACH);
private int mReachColor = DEFAULT_COLOR_REACH;
private int mReachHeight = dp2px(DEFAULT_HEIGHT_REACH);
private int mTextOffset = dp2px(DEFAULT_TEXT_OFFSET);

private Paint mPaint = new Paint();

/**
* 在onMeasure中初始化
* 在onDraw中使用
*/
private int mRealWidth;

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

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

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

//获取自定义属性
obtainStyledAttrs(attrs);
}

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

mTextSize = (int) ta.getDimension(
R.styleable.HorizontalProgressBarWithProgress_progress_text_size, mTextSize);

mTextColor = ta.getColor(
R.styleable.HorizontalProgressBarWithProgress_progress_text_color, mTextColor);

mTextOffset = (int) ta.getDimension(
R.styleable.HorizontalProgressBarWithProgress_progress_text_offset, mTextOffset);

mUnReachColor = ta.getColor(
R.styleable.HorizontalProgressBarWithProgress_progress_unreach_color, mUnReachColor);

mUnReachHeight = (int) ta.getDimension(
R.styleable.HorizontalProgressBarWithProgress_progress_unreach_height, mUnReachHeight);

mReachColor = ta.getColor(
R.styleable.HorizontalProgressBarWithProgress_progress_reach_color, mReachColor);

mReachHeight = (int) ta.getDimension(
R.styleable.HorizontalProgressBarWithProgress_progress_reach_height, mReachHeight);

ta.recycle();

mPaint.setTextSize(mTextSize);
}

@Override
protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthVal = MeasureSpec.getSize(widthMeasureSpec);

int height = measureHeight(heightMeasureSpec);

//确定view的宽和高
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);

//精确值（如match_parent、200dp一类）
if (mode == MeasureSpec.EXACTLY) {
result = size;
} else {
//当前绘制底线（descent） 当前绘制顶线（ascent） ascent为负值
//结果为文字的高度
int textHeight = (int) (mPaint.descent() - mPaint.ascent());
result = getPaddingTop() + getPaddingBottom() +
Math.max(Math.max(mReachHeight, mUnReachHeight), Math.abs(textHeight));

//测量值不能超过给定的size值
if (mode == MeasureSpec.AT_MOST) {
return Math.min(result, size);
}

}

return result;

}

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

canvas.translate(getPaddingLeft(), getHeight() / 2);

boolean noNeedUnReach = false;

//draw reach bar
String text = getProgress() + "%";

int textWidth = (int) mPaint.measureText(text);

float radio = getProgress() * 1.0f / getMax();

float progressX = radio * mRealWidth;

if (progressX + textWidth > mRealWidth) {
progressX = mRealWidth - textWidth;
noNeedUnReach = true;
}

float endX = progressX - 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, progressX, y, mPaint);

//draw unreach bar
if (!noNeedUnReach) {
float start = progressX + mTextOffset / 2 + textWidth;
mPaint.setColor(mUnReachColor);
mPaint.setStrokeWidth(mUnReachHeight);
canvas.drawLine(start, 0, mRealWidth, 0, mPaint);
}

canvas.restore();
}

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

private 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:liu="http://schemas.android.com/apk/res-auto"
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.example.view.HorizontalProgressBarWithProgress
android:id="@+id/id_progress01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:padding="15dp"
android:progress="0"
liu:progress_reach_color="#ffff0000"
liu:progress_text_color="#ffff0000"
liu:progress_unreach_color="#44ff0000" />

<com.example.view.HorizontalProgressBarWithProgress
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:padding="15dp"
android:progress="100"
liu:progress_text_color="#44ff0000"
liu:progress_unreach_color="#ffff0000" />

<com.example.view.HorizontalProgressBarWithProgress
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:padding="15dp"
android:progress="30"
liu:progress_text_color="#44ff0000"
liu:progress_unreach_color="#ffff0000" />

</LinearLayout>
</ScrollView>

MainActivity.java

public class MainActivity extends AppCompatActivity {

private final int MSG_UPDATE = 0x110;

private Handler mHandler = new Handler() {
@Override
public void handleMessage(Message msg) {
int progress = mHProgress.getProgress();
mHProgress.setProgress(++progress);
if (progress >= 100) {
mHandler.removeMessages(MSG_UPDATE);
}
mHandler.sendEmptyMessageDelayed(MSG_UPDATE, 100);
}
};

private HorizontalProgressBarWithProgress mHProgress;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

mHProgress = (HorizontalProgressBarWithProgress) findViewById(R.id.id_progress01);

mHandler.sendEmptyMessage(MSG_UPDATE);
}
}


圆形进度条

attrs.xml

<declare-styleable name="RoundProgressBarWithProgress">

<attr name="radius" format="dimension"></attr>

</declare-styleable>

activity_main.xml
<com.example.view.RoundProgressBarWithProgress
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:padding="15dp"
android:progress="30"
liu:radius="20dp"
liu:progress_text_color="#ff000000"
liu:progress_unreach_color="#ffff0000" />

<com.example.view.RoundProgressBarWithProgress
android:id="@+id/id_progress02"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:padding="15dp"
android:progress="0"
liu:radius="60dp"
liu:progress_text_color="#ff000000"
liu:progress_text_size="30sp"
liu:progress_unreach_color="#44ff0000" />

RoundProgressBarWithProgress.java

public class RoundProgressBarWithProgress extends HorizontalProgressBarWithProgress {

private int mRadius = dp2px(30);

private int mMaxPaintWidth;

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

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

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

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

TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.RoundProgressBarWithProgress);
mRadius = (int) ta.getDimension(R.styleable.RoundProgressBarWithProgress_radius, mRadius);

ta.recycle();

//设置画笔为空心
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setAntiAlias(true);
//防抖动
mPaint.setDither(true);
//设置画笔的笔触风格
//ROUND 圆角的笔触
mPaint.setStrokeCap(Paint.Cap.ROUND);
}

@Override
protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
mMaxPaintWidth = Math.max(mReachHeight, mUnReachHeight);
//默认四个padding一致
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 unreach bar
mPaint.setColor(mUnReachColor);
mPaint.setStrokeWidth(mUnReachHeight);
canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);

//draw reach bar
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();
}
}

https://github.com/LiuchangDuan/demo