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; elseisNext = 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能有所帮助。