Android自定义View实现圆环交替效果
投稿：daisy
这篇文章给大家介绍如何基于Android自定义View实现圆环交替的效果，实现后效果很赞，有需要的小伙伴们可以参考借鉴。
下面请先看效果图：
看上去是不很炫的样子，它的实现上也不是很复杂，重点在与onDraw()方法的绘制。
首先是我们的attrs文件：
<?xml version="1.0" encoding="utf-8"?> <resources> <attr name="firstColor" format="color"/> <attr name="secondColor" format="color"/> <attr name="circleWidth" format="dimension"/> <attr name="speed" format="integer"/> <declare-styleable name="CustomView"> <attr name="firstColor" /> <attr name="secondColor" /> <attr name="circleWidth" /> <attr name="speed" /> </declare-styleable> </resources>
接下来是我们重写View类的自定义View类：
public class MySelfCircleView extends View {
/*
* 第一圈颜色
*/
int firstColor;
/*
* 第二圈颜色
*/
int secondColor;
/*
* 圆的宽度
*/
int circleWidth;
/*
* 速率
*/
int speed;
/*
* 画笔
*/
Paint mPaint;
/*
* 进度
*/
int mProgress;
/*
* 是否切换标志
*/
boolean isNext;
public MySelfCircleView(Context context, AttributeSet attrs,
int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomView, defStyleAttr, 0);
int n = typedArray.getIndexCount();
for(int i=0; i<n; i++){
int attr = typedArray.getIndex(i);
switch (attr) {
case R.styleable.CustomView_firstColor:
firstColor = typedArray.getColor(attr, Color.RED);
break;
case R.styleable.CustomView_secondColor:
secondColor = typedArray.getColor(attr, Color.RED);
break;
case R.styleable.CustomView_circleWidth:
circleWidth = typedArray.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));
break;
case R.styleable.CustomView_speed:
speed = typedArray.getInt(attr, 20);
break;
}
}
typedArray.recycle();
mPaint = new Paint();
new Thread(new Runnable() {
@Override
public void run() {
while (true) {
mProgress++;
if (mProgress == 360) {
mProgress = 0;
if (!isNext)
isNext = true;
else
isNext = false;
}
postInvalidate();
try {
Thread.sleep(speed);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}).start();
}
public MySelfCircleView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MySelfCircleView(Context context) {
this(context, null);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int centre = getWidth() / 2; // 获取圆心的x坐标
int radius = centre - circleWidth / 2;// 半径
mPaint.setStrokeWidth(circleWidth); // 设置圆环的宽度
mPaint.setAntiAlias(true); // 消除锯齿
mPaint.setStyle(Paint.Style.STROKE); // 设置空心
RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限
if (!isNext) {// 第一颜色的圈完整，第二颜色跑
mPaint.setColor(firstColor); // 设置圆环的颜色
canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
mPaint.setColor(secondColor); // 设置圆环的颜色
canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
} else {
mPaint.setColor(secondColor); // 设置圆环的颜色
canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
mPaint.setColor(firstColor); // 设置圆环的颜色
canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
}
}
}
最后是我们的布局文件：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:zhy="http://schemas.android.com/apk/res/com.example.myselfview" android:layout_width="match_parent" android:layout_height="match_parent" > <com.example.myselfview.view.MySelfCircleView android:layout_width="120dp" android:layout_height="120dp" android:layout_marginTop="20dp" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" zhy:circleWidth="15dp" zhy:firstColor="#D4F668" zhy:secondColor="#2F9DD2" zhy:speed="10" /> <com.example.myselfview.view.MySelfCircleView android:layout_width="200dp" android:layout_height="200dp" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" zhy:circleWidth="24dp" android:layout_marginBottom="40dp" zhy:firstColor="#16A3FA" zhy:secondColor="#D20F02" zhy:speed="5" /> </RelativeLayout>
总结
好了，到这里我们的效果就算大工告成，感兴趣的朋友可以写写看，个人感觉自定义View需要大量的练习，才能为我所用。希望本文对大家开发Android能有所帮助。