转载至：http://blog.csdn.net/lmj623565791/article/details/24500107
并在此做了相关优化：
- 1、新开线程画线，离开页面时线程未关闭优化
- 2、mSpeed 值越大,速度越快
- 3、用户宽高若设置wrap_content时默认为200dp
我们还是来看一下我们要达到的效果图：
对于自定义View多练没坏处么。如果你看了前两篇，那么这篇一定so easy 。
分析了一下，大概有这几个属性，两个颜色，一个速度，一个圆环的宽度。
- 1、自定义View的属性
- 2、在View的构造方法中获得我们自定义的属性
- [ 3、重写onMesure ]
- 4、重写onDraw
1、自定义属性：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--CustomProgressBar-->
<attr name="firstColor" format="color" />
<attr name="secondColor" format="color" />
<attr name="circleWidth" format="dimension" />
<attr name="speed" format="integer" />
<declare-styleable name="CustomProgressBar">
<attr name="firstColor" />
<attr name="secondColor" />
<attr name="circleWidth" />
<attr name="speed" />
</declare-styleable>
</resources>2、在View的构造方法中获得我们自定义的属性
// 第一种颜色
int mFirstColor;
// 第二种颜色
int mSecondColor;
// 圆环宽度
int mCircleWidth;
// 速度
private int mSpeed;
// 当前进度
private int mProgress;
// 是否开始下一步
private boolean isNext;
// 画笔
private Paint mPaint;
// 用来开关线程
private boolean isContinue;
private int width;
/** * 2、在View的构造方法中获得我们自定义的属性 */
public CustomProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
final TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomProgressBar, defStyleAttr, 0);
int indexCount = typedArray.getIndexCount();
for (int i = 0; i < indexCount; i++) {
int arr = typedArray.getIndex(i);
switch (arr) {
case R.styleable.CustomProgressBar_firstColor://第一种颜色
mFirstColor = typedArray.getColor(arr, Color.BLUE);
break;
case R.styleable.CustomProgressBar_secondColor://第二种颜色
mSecondColor = typedArray.getColor(arr, Color.BLUE);
break;
case R.styleable.CustomProgressBar_circleWidth://圆环宽度
mCircleWidth = typedArray.getDimensionPixelSize(arr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));
break;
case R.styleable.CustomProgressBar_speed://速度
mSpeed = typedArray.getInt(arr, 20);
break;
}
}
typedArray.recycle();
mPaint = new Paint();
isContinue = true;
// 绘图线程
new Thread() {
public void run() {
while (isContinue) {
mProgress++;
if (mProgress == 360) {
mProgress = 0;
isNext = !isNext;
}
Log.e("--------", "在执行..");
postInvalidate();
try {
Thread.sleep(100 / mSpeed);// 这里优化了一下,值越大,速度越快
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}.start();
}// 用来关闭线程
public void setContinue(boolean aContinue) {
isContinue = aContinue;
}这里加载线程时，设置了一个变量 isContinue，用来控制是否加载，只需在对应的Activity生命周期onStop()里设置就好了：
@Override
protected void onStop() {
super.onStop();
customProgressBar01.setContinue(false);
customProgressBar02.setContinue(false);
customProgressBar03.setContinue(false);
}3、重写onMesure
原文是没有重写onMesure的，不重写也是可以的，但为了防止用户误操作，设置会比较保险一些：
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
if (modeWidth == MeasureSpec.EXACTLY) {
width = sizeWidth;
} else {//默认宽度200dp
width = (int) getContext().getResources().getDimension(R.dimen.width);
}
setMeasuredDimension(width, width);
}4、重写onDraw
@Override
protected void onDraw(Canvas canvas) {
// super.onDraw(canvas);
// 这里使用width主要是用来防止用户使用wrap_content,会占满整个屏幕宽,默认为200dp
int center = width / 2;// 获取圆心的x坐标
int radius = center - mCircleWidth / 2;// b半径
mPaint.setStrokeWidth(mCircleWidth);//设置圆环的宽度
mPaint.setAntiAlias(true);//抗锯齿
mPaint.setStyle(Paint.Style.STROKE);//设置空心
// 用于定义圆弧的形状和大小的界限
RectF rectF = new RectF(center - radius, center - radius, center + radius, center + radius);
if (!isNext) {// 第一个颜色的圈跑完,第二个颜色跑
mPaint.setColor(mFirstColor);// 设置圆环的颜色
canvas.drawCircle(center, center, radius, mPaint);// 画圆环
mPaint.setColor(mSecondColor);// 设置圆环的颜色
canvas.drawArc(rectF, -90, mProgress, false, mPaint);// 根据进度画圆弧
} else {
mPaint.setColor(mSecondColor);
canvas.drawCircle(center, center, radius, mPaint);
mPaint.setColor(mFirstColor);
canvas.drawArc(rectF, -90, mProgress, false, mPaint);
}
}5、最后布局文件引用
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:progressBar="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_custom_progress_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.jingbin.customview.activity.CustomProgressBarActivity">
<com.example.jingbin.customview.view.CustomProgressBar
android:id="@+id/custom_progress_bar_01"
android:layout_width="100dp"
android:layout_height="100dp"
progressBar:circleWidth="30dp"
progressBar:firstColor="@color/colorPrimary"
progressBar:secondColor="@color/colorAccent"
progressBar:speed="10" />
<com.example.jingbin.customview.view.CustomProgressBar
android:id="@+id/custom_progress_bar_02"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_margin="20dp"
progressBar:circleWidth="30dp"
progressBar:firstColor="@android:color/black"
progressBar:secondColor="@android:color/white"
progressBar:speed="12" />
<!--测试不是 EXACTLY的情况-->
<com.example.jingbin.customview.view.CustomProgressBar
android:id="@+id/custom_progress_bar_03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
progressBar:circleWidth="30dp"
progressBar:firstColor="@android:color/holo_red_light"
progressBar:secondColor="@android:color/holo_blue_light"
progressBar:speed="15" />
</LinearLayout>
大功完成了，当然了，唯一比较纠结的地方就是两个颜色何时切换，如何切换，我采用上面的办法，你也可以自己想想怎么实现。