Android 自定义彩色圆环,Android自定义View实现圆环交替效果

下面请先看效果图：

看上去是不很炫的样子，它的实现上也不是很复杂，重点在与onDraw()方法的绘制。

首先是我们的attrs文件：

接下来是我们重写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

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); // 根据进度画圆弧

}

}

}

最后是我们的布局文件：

xmlns:zhy="http://schemas.android.com/apk/res/com.example.myselfview"

android:layout_width="match_parent"

android:layout_height="match_parent" >

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" />

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" />

总结

好了，到这里我们的效果就算大工告成，感兴趣的朋友可以写写看，个人感觉自定义View需要大量的练习，才能为我所用。希望本文对大家开发Android能有所帮助。