使用 Android Studio自定义View03——圆环进度条

整理总结自鸿洋的博客：http://blog.csdn.net/lmj623565791/article/details/24500107

要实现的效果如图：



分析一下，需要这么几个属性：两个颜色、一个速度、一个圆环宽度

com.cctvjiatao.customview03.act.MainActivity.java

public class MainActivity extends Activity {

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

res/values/attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="colorFirst" format="color" />
<attr name="colorSecond" format="color" />
<attr name="speed" format="integer" />
<attr name="ringWidth" format="dimension" />
<declare-styleable name="RunningRing">
<attr name="colorFirst" />
<attr name="colorSecond" />
<attr name="speed" />
<attr name="ringWidth" />
</declare-styleable>
</resources>
res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ring="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".act.MainActivity">

<com.cctvjiatao.customview03.view.RunningRing
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
ring:colorFirst="#ff0000"
ring:colorSecond="#00ff00"
ring:ringWidth="10dp"
ring:speed="20" />

<com.cctvjiatao.customview03.view.RunningRing
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center_horizontal"
ring:colorFirst="#ffff00"
ring:colorSecond="#00ffff"
ring:ringWidth="30dp"
ring:speed="2" />
</LinearLayout>

com.cctvjiatao.customview03.view.RunningRing.java
public class RunningRing extends View {

private int mColorFirst;
private int mColorSecond;
private int mSpeed;
private int mRingWidth;

private boolean isNext;
private int mProgress;
private Paint mPaint;

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

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

public RunningRing(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RunningRing, defStyleAttr, 0);
int n = typedArray.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = typedArray.getIndex(i);
switch (attr) {
case R.styleable.RunningRing_colorFirst:
mColorFirst = typedArray.getColor(attr, Color.BLACK);
break;
case R.styleable.RunningRing_colorSecond:
mColorSecond = typedArray.getColor(attr, Color.BLUE);
break;
case R.styleable.RunningRing_speed:
mSpeed = typedArray.getInt(attr, 1);
break;
case R.styleable.RunningRing_ringWidth:
mRingWidth = typedArray.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));
break;
}
}
typedArray.recycle();
mPaint = new Paint();

//绘图线程
new Thread() {
public void run() {
while (true) {
mProgress++;
if (mProgress == 360) {
mProgress = 0;
if (isNext) {
isNext = false;
} else {
isNext = true;
}
}
postInvalidate();
try {
Thread.sleep(mSpeed);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}.start();
}

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

}

@Override
protected void onDraw(Canvas canvas) {
int centre = getWidth() / 2;//圆心
int radius = centre - mRingWidth / 2;//半径
mPaint.setStyle(Paint.Style.STROKE);//空心圆
mPaint.setStrokeWidth(mRingWidth);
mPaint.setAntiAlias(true);
RectF rectF = new RectF(centre - radius, centre - radius, centre + radius, centre + radius);

if (!isNext) {//第一颜色的圈完整，第二颜色跑
mPaint.setColor(mColorFirst);
canvas.drawCircle(centre, centre, radius, mPaint);// 画出圆环
mPaint.setColor(mColorSecond);
canvas.drawArc(rectF, -90, mProgress, false, mPaint);// 根据进度画圆弧
} else {
mPaint.setColor(mColorSecond);
canvas.drawCircle(centre, centre, radius, mPaint);// 画出圆环
mPaint.setColor(mColorFirst);
canvas.drawArc(rectF, -90, mProgress, false, mPaint);// 根据进度画圆弧
}

}
}