自定义View之简单自定义圆形进度条

达到的效果如下：



从上面的效果可以看出，主要有以下几个自定义属性：

1、背景颜色

2、进度扇形颜色

3、半径

4、起始角度

因此，在attrs.xml中定义如下属性：

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="SimpleRoundProgressBar">
<attr format="color" name="roundColor"/>
<attr format="color" name="roundProgressColor"/>
<attr format="dimension" name="circleRadius"/>
<attr format="integer" name="startAngle"/>
</declare-styleable>
</resources>

下面是SimpleRoundProgressBar代码，在onMeasure当中确定view的大小，在onDraw来进行绘制。

package com.easyliu.demo.customizeview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

/**
* Created by easyliu on 2017/2/24.
*/

public class SimpleRoundProgressBar extends View {
private Paint mPaint;//画笔
private RectF mRectF;//扇形绘制的矩形范围
private int mRoundColor;//圆环的颜色
private int mRoundProgressColor; //进度条的颜色
private float mRadius;//半径
private int mWidth;  //宽度
private int mHeight; //高度
private int mCenterX; //中心X坐标
private int mCenterY; //中心Y坐标
private int mStartAngle; //初始角度
private int mSweepAngle; //扫过的角度
private static final int DEFAULT_INIT_ANGLE = 0;//默认的初始化角度
private static final int DEFAULT_RADIUS = 10;//默认的半径

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

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

public SimpleRoundProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint = new Paint();
mRectF = new RectF();
TypedArray typedArray =
context.obtainStyledAttributes(attrs, R.styleable.SimpleRoundProgressBar);
mRoundColor = typedArray.getColor(R.styleable.SimpleRoundProgressBar_roundColor, Color.GRAY);
mRoundProgressColor =
typedArray.getColor(R.styleable.SimpleRoundProgressBar_roundProgressColor, Color.RED);
mRadius =
typedArray.getDimension(R.styleable.SimpleRoundProgressBar_circleRadius, DEFAULT_RADIUS);
mStartAngle =
typedArray.getInteger(R.styleable.SimpleRoundProgressBar_startAngle, DEFAULT_INIT_ANGLE);
typedArray.recycle();
}

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//获取测量模式
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
//获取测量大小
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);

//如果为确定值
if (heightMode == MeasureSpec.EXACTLY) {
mHeight = heightSize;
} else {
//如果为wrap_content，高度为半径大小乘以2，注意padding
mHeight = (int) (mRadius * 2) + getPaddingTop() + getPaddingBottom();
}

//如果为确定值
if (widthMode == MeasureSpec.EXACTLY) {
mWidth = widthSize;
mHeight=mWidth;//宽和高相等
} else {
//如果为wrap_content，宽度为半径大小乘以2,注意padding
mWidth = (int) (mRadius * 2) + getPaddingLeft() + getPaddingRight();
}

//设置视图的大小
setMeasuredDimension(mWidth, mHeight);
}

@Override protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setColor(mRoundColor);
mPaint.setAntiAlias(true);
mCenterX = mWidth / 2;
mCenterY = mHeight / 2;
//注意处理padding
mRadius = (mWidth - getPaddingLeft() - getPaddingRight()) / 2;
//画圆
canvas.drawCircle(mCenterX, mCenterY, mRadius, mPaint);
mPaint.setColor(mRoundProgressColor);
//注意处理padding
mRectF.left = getPaddingLeft();
mRectF.right = mWidth - getPaddingRight();
mRectF.top = getPaddingTop();
mRectF.bottom = mHeight - getPaddingBottom();
//画扇形
canvas.drawArc(mRectF, (float) mStartAngle, mSweepAngle, true, mPaint);
}

public int getRoundColor() {
return mRoundColor;
}

public void setRoundColor(int roundColor) {
this.mRoundColor = roundColor;
}

/**
* 得到初始角度
*/
public synchronized int getStartAngle() {
return mStartAngle;
}

/**
* 设置初始角度
*/
public synchronized void setStartAngle(int startAngle) {
if (startAngle < -360) {
throw new IllegalArgumentException("the angle can not less than -360");
}
if (startAngle > 360) {
throw new IllegalArgumentException("the angle can not larger than 360");
}
this.mStartAngle = startAngle;
}

/**
* 得到扫过的角度
*/
public synchronized int getSweepAngle() {
return mSweepAngle;
}

/**
* 设置扫过的角度,相对于起始点
*
* @param sweepAngle 0~360
*/
public synchronized void setSweepAngle(int sweepAngle) {
if (sweepAngle < 0) {
throw new IllegalArgumentException("the angle can not less than 0");
}
if (sweepAngle > 360) {
throw new IllegalArgumentException("the angle can not larger than 360");
}
this.mSweepAngle = sweepAngle;
postInvalidate();
}
}

定义好了之后就可以使用了，首先是xml文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:easyliu="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.easyliu.demo.customizeview.RoundProgressBarActivity"
>

<com.easyliu.demo.customizeview.SimpleRoundProgressBar
android:id="@+id/progress_demo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:padding="10dp"
easyliu:circleRadius="50dp"
easyliu:roundColor="#5F000000"
easyliu:roundProgressColor="#ff8d33"
/>

<com.easyliu.demo.customizeview.SimpleRoundProgressBar
android:id="@+id/progress_demo2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="@id/progress_demo"
android:padding="10dp"
easyliu:circleRadius="60dp"
easyliu:roundColor="@color/colorPrimary"
easyliu:roundProgressColor="@color/colorAccent"
/>

</RelativeLayout>

然后是Activity代码，在代码中使用定时器来定时更新进度即可。

package com.easyliu.demo.customizeview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import java.util.Timer;
import java.util.TimerTask;

public class RoundProgressBarActivity extends AppCompatActivity {
private int mCurrentAngle = 0;
private SimpleRoundProgressBar mRoundProgressBar1;
private SimpleRoundProgressBar mRoundProgressBar2;

@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_progress_bar);
initViews();
Timer timer = new Timer();
timer.schedule(new TimerTask() {
@Override public void run() {
mCurrentAngle++;
mRoundProgressBar1.setSweepAngle(mCurrentAngle);
mRoundProgressBar2.setSweepAngle(mCurrentAngle);
if (mCurrentAngle >= 360) {
mCurrentAngle = 0;
}
}
}, 0, 20);
}
private void initViews(){
mRoundProgressBar1 =
(SimpleRoundProgressBar) findViewById(R.id.progress_demo);
mRoundProgressBar1.setStartAngle(-90);
mRoundProgressBar2= (SimpleRoundProgressBar) findViewById(R.id.progress_demo2);
mRoundProgressBar2.setStartAngle(0);
}
}

这样就完成了一个简单的圆形进度条的自定义。