先展示下效果图:
然后按照自定义view的步骤来实现。
我们需要将目标定义清楚:
目标是渐变色圆形进度条,那么,使用canvas画弧形是基础了,另外是渐变色的效果,这里使用LinearGradient来实现。
既然是提供一个进度条,那么,是需要自定义View的用户来进行设置进度值的。
另外,将渐变色的接口也提供出来了,这样,用户就可以根据需要自己定义喜欢的渐变色效果。
还有view的大小,使用直径来表示。
最后,要展示进度条如何使用,用了一个定时器,每秒推进一次进度。
下面来具体实现:
1、自定义View的属性
在values下面新建一个attr.xml,现在里面定义我们的属性,
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="diameter" format="dimension" />
<declare-styleable name="CircleProgressView">
<attr name="diameter" />
</declare-styleable>
</resources>
2、在View的构造方法中获得我们自定义的属性
public CircleProgressView(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
/**
* 获得我们所定义的自定义样式属性
*/
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CircleProgressView, defStyle, 0);
int n = a.getIndexCount();
for (int i = 0; i < n; i++)
{
int attr = a.getIndex(i);
switch (attr)
{
case R.styleable.CircleProgressView_diameter:
// 默认设置为40dp
mDiameter = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, 40, getResources().getDisplayMetrics()));
break;
}
}
a.recycle();
mPaint = new Paint();
rect = new RectF();
progressValue=0;
}
3、重写onMeasure
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
int width = 0;
int height = 0;
//设置直径的最小值
if(mDiameter<=40){
mDiameter=40;
}
height=mDiameter;
width=mDiameter;
Log.i("customView","log: w="+width+" h="+height);
setMeasuredDimension(width, height);
}
4、重写onDraw
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int mWidth = getMeasuredWidth();
int mHeight = getMeasuredHeight();
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth((float) mWidth/10 );
mPaint.setStyle(Style.STROKE);
mPaint.setStrokeCap(Cap.ROUND);
mPaint.setColor(Color.TRANSPARENT);
rect.set(20, 20, mWidth - 20, mHeight - 20);
canvas.drawArc(rect, 0, 360, false, mPaint);
mPaint.setColor(Color.BLACK);
float section = ((float)progressValue) / 100;
int count = mColors.length;
int[] colors = new int[count];
System.arraycopy(mColors, 0, colors, 0, count);
LinearGradient shader = new LinearGradient(3, 3, mWidth - 3 , mHeight - 3, colors, null,
Shader.TileMode.CLAMP);
mPaint.setShader(shader);
canvas.drawArc(rect, 0, section * 360, false, mPaint);
}
5、提供对外接口
这里有两个对外接口,一个是用于获取新的进度值的:
public void setProgressValue(int progressValue){
this.progressValue = progressValue;
Log.i("customView","log: progressValue="+progressValue);
}
另外一个是用于设置渐变色的,这里我是定义了4种颜色,经过测试效果比较好:
public void setColors(int[] colors){
mColors = colors;
Log.i("customView","log: progressValue="+progressValue);
}
6、中布局文件中使用
在布局文件中我定义了5个view,中间一个大的,四角四个小的,这样效果比较炫:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:custom="http://schemas.android.com/apk/res/com.customview"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.customview.view.CircleProgressView
android:id="@+id/circle_progress_view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:padding="10dp"
custom:diameter="200dp"
/>
<com.customview.view.CircleProgressView
android:id="@+id/circle_progress_view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/circle_progress_view1"
android:layout_below="@id/circle_progress_view1"
android:padding="10dp"
custom:diameter="80dp"
/>
<com.customview.view.CircleProgressView
android:id="@+id/circle_progress_view3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/circle_progress_view1"
android:layout_below="@id/circle_progress_view1"
android:layout_centerHorizontal="true"
android:padding="10dp"
custom:diameter="80dp"
/>
<com.customview.view.CircleProgressView
android:id="@+id/circle_progress_view4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/circle_progress_view1"
android:layout_above="@id/circle_progress_view1"
android:layout_centerHorizontal="true"
android:padding="10dp"
custom:diameter="80dp"
/>
<com.customview.view.CircleProgressView
android:id="@+id/circle_progress_view5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/circle_progress_view1"
android:layout_above="@id/circle_progress_view1"
android:layout_centerHorizontal="true"
android:padding="10dp"
custom:diameter="80dp"
/>
</RelativeLayout>
7、在activity中使用
主要是一个定时器的使用,来推进进度条,另外,是渐变色的颜色初值设置:
package com.customview;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.util.Log;
import android.view.WindowManager;
import java.util.Random;
import java.util.Timer;
import java.util.TimerTask;
import com.customview.view.CircleProgressView;
import android.app.Activity;
import android.graphics.Color;
public class MainActivity extends Activity
{
CircleProgressView circle_progress_view1;
CircleProgressView circle_progress_view2;
CircleProgressView circle_progress_view3;
CircleProgressView circle_progress_view4;
CircleProgressView circle_progress_view5;
int progressValue=0;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);//去掉信息栏
setContentView(R.layout.activity_main);
circle_progress_view1 = (CircleProgressView)findViewById(R.id.circle_progress_view1);
circle_progress_view2 = (CircleProgressView)findViewById(R.id.circle_progress_view2);
circle_progress_view3 = (CircleProgressView)findViewById(R.id.circle_progress_view3);
circle_progress_view4 = (CircleProgressView)findViewById(R.id.circle_progress_view4);
circle_progress_view5 = (CircleProgressView)findViewById(R.id.circle_progress_view5);
//第一个使用默认颜色,第二三个使用指定颜色,另外2个使用随机颜色
int[] colors;
colors=new int[]{ 0xffc42c1b, 0xfffeea08, 0xff04aafc, 0xff15e078};
circle_progress_view2.setColors( colors);
colors=new int[]{ 0xffffffff, 0xffaaaaaa, 0xff555555, 0xff000000};
circle_progress_view3.setColors( colors);
circle_progress_view4.setColors( randomColors());
circle_progress_view5.setColors( randomColors());
timer.schedule(task, 1000, 1000); // 1s后执行task,经过1s再次执行
}
Handler handler = new Handler() {
public void handleMessage(Message msg) {
if (msg.what == 1) {
Log.i("log","handler : progressValue="+progressValue);
//通知view,进度值有变化
circle_progress_view1.setProgressValue(progressValue*3);
circle_progress_view1.postInvalidate();
circle_progress_view2.setProgressValue(progressValue*5/2);
circle_progress_view2.postInvalidate();
circle_progress_view3.setProgressValue(progressValue*2);
circle_progress_view3.postInvalidate();
circle_progress_view4.setProgressValue(progressValue*3/2);
circle_progress_view4.postInvalidate();
circle_progress_view5.setProgressValue(progressValue*1);
circle_progress_view5.postInvalidate();
progressValue+=1;
if(progressValue>100){
timer.cancel();
}
}
super.handleMessage(msg);
};
};
private int[] randomColors() {
int[] colors=new int[4];
Random random = new Random();
int r,g,b;
for(int i=0;i<4;i++){
r=random.nextInt(256);
g=random.nextInt(256);
b=random.nextInt(256);
colors[i]=Color.argb(255, r, g, b);
Log.i("customView","log: colors["+i+"]="+Integer.toHexString(colors[i]));
}
return colors;
}
Timer timer = new Timer();
TimerTask task = new TimerTask() {
@Override
public void run() {
// 需要做的事:发送消息
Message message = new Message();
message.what = 1;
handler.sendMessage(message);
}
};
}
至此,完美收工。
我是实现了一个渐变色圆形进度条,渐变色的颜色初值可以指定,进度条的值也是由用户来指定,本例中是使用定时器来推进的,每个进度条的进度控制不一致,颜色不一样,位置不一样,组合起来,效果很炫哦!