android自定义view制作圆形进度条效果

还是我们自定View的那几个步骤：
1、自定义View的属性
2、在View的构造方法中获得我们自定义的属性
[ 3、重写onMesure ]
4、重写onDraw

1、自定义属性：

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CustomTitleView">
<attr name="mSpeed" format="integer" />
<attr name="mFirstColor" format="color" />
<attr name="mSecondColor" format="color" />
<attr name="mCircleWidth" format="dimension"/>
<attr name="textSize" format="dimension"/>
</declare-styleable>
</resources>

2、在View的构造方法中获得我们自定义的属性

/**
* 当前进度
*/
private int mProgress;
/**
* 第一圈的颜色
*/
private int mFirstColor;
/**
* 第二圈的颜色
*/
private int mSecondColor;
/**
* 圈的宽度
*/
private int mCircleWidth;
/**
* 速度
*/
private int mSpeed;
/**
* 中间进度百分比的字符串的字体
*/
private float textSize;
private boolean isNext = false;
private Paint mPaint;
public CustomTitleView(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray typearray = context.obtainStyledAttributes(attrs, R.styleable.CustomTitleView);
int count= typearray.getIndexCount();
for(int i=0;i<count;i++){
int attr =typearray.getIndex(i);
switch(attr){
case R.styleable.CustomTitleView_mFirstColor:
mFirstColor=typearray.getColor(attr,Color.BLACK);
break;
case R.styleable.CustomTitleView_mSecondColor:
mSecondColor=typearray.getColor(attr,Color.RED);
break;
case R.styleable.CustomTitleView_mCircleWidth:
mCircleWidth = typearray.getDimensionPixelSize(attr,(int)TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_PX,20,getResources().getDisplayMetrics()));
break;
case R.styleable.CustomTitleView_textSize:
textSize = typearray.getDimensionPixelSize(attr,(int)TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_PX,30,getResources().getDisplayMetrics()));
break;
case R.styleable.CustomTitleView_mSpeed:
mSpeed = typearray.getInt(attr,100);// 默认100
break;
}
}
Log.v("----",mSpeed+"");
typearray.recycle();
mPaint = new Paint();
new Thread()
{
public void run()
{
while (true)
{
mProgress++;
if (mProgress == 360)
{
mProgress = 0;
if (!isNext)
isNext = true;
else
isNext = false;
}
postInvalidate();
try
{
Thread.sleep(mSpeed);
} catch (InterruptedException e)
{
e.printStackTrace();
}
}
};
}.start();
}

3、直接重写onDraw，这不需要重写onMeasure

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
protected void onDraw(Canvas canvas)
{
/**
* 画进度百分比
*/
mPaint.setStrokeWidth(0);
mPaint.setColor(Color.BLACK);
mPaint.setTextSize(textSize);
mPaint.setTypeface(Typeface.DEFAULT_BOLD); //设置字体
int percent = (int)(((float)mProgress / (float)360) * 100);
int centre = getWidth() / 2; // 获取圆心的x坐标
int radius = centre - mCircleWidth / 2;// 半径
float textWidth = mPaint.measureText(percent + "%"); //测量字体宽度，我们需要根据字体的宽度设置在圆环中间
canvas.drawText(percent + "%",centre-textWidth/ 2,centre+textSize/2, mPaint); //画出进度百分比
mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度
mPaint.setAntiAlias(true); // 消除锯齿
mPaint.setStyle(Paint.Style.STROKE); // 设置空心
RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限
if(isNext){
mPaint.setColor(mSecondColor); // 设置圆环的颜色
canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
mPaint.setColor(mFirstColor); // 设置圆环的颜色
canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
}else{
mPaint.setColor(mFirstColor); // 设置圆环的颜色
canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
mPaint.setColor(mSecondColor); // 设置圆环的颜色
canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
}
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp"
>
<view.CustomTitleView
android:layout_width="200dp"
android:layout_height="400dp"
custom:mSpeed="50"
custom:mFirstColor="#7300e6"
custom:mSecondColor="#39ac39"
custom:mCircleWidth="10px"
custom:textSize="20px"
android:id="@+id/one"
/>
<view.CustomTitleView
android:layout_toEndOf="@id/one"
android:layout_width="200dp"
android:layout_height="400dp"
custom:mSpeed="100"
custom:mFirstColor="#0040ff"
custom:mSecondColor="#40ff00"
custom:mCircleWidth="20px"
custom:textSize="30px"
/>
</RelativeLayout>

效果预览

源码下载：http://xiazai.jb51.net/201701/yuanma/AndroidProgressbar(jb51.net).rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

• Android动态自定义圆形进度条
• Android编程之ProgressBar圆形进度条颜色设置方法
• Android带圆形数字进度的自定义进度条示例
• Android实现带数字的圆形进度条(自定义进度条)
• Android编程实现WebView添加进度条的方法
• Android自定义控件实现圆形进度条
• Android自定义Material进度条效果
• Android自定义view实现进度条指示效果
• Android编程基于自定义View实现绚丽的圆形进度条功能示例
• Android实现环形进度条的实例
• Android编程实现类似于圆形ProgressBar的进度条效果