下面请先看效果图：
看上去是不很炫的样子，它的实现上也不是很复杂，重点在与onDraw()方法的绘制。
首先是我们的attrs文件：
<"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能有所帮助。
【Android自定义View实现圆环交替效果】相关文章：
★ Android自定义Adapter的ListView的思路及代码
★ Android中 自定义数据绑定适配器BaseAdapter的方法