Android實現3個圓圈的動畫

實現了一個類似Windows進度條效果，界面上有三個圓圈，依次有一個圓圈顯示白色，其它的圓圈顯示藍色。

畫圓圈的View

import Android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.util.AttributeSet;
import android.view.View;

/**
* 畫圓圈的組件
*
* @author linweidong
* @date 2010-11-05
*/
public class Circle extends View {

public Circle(Context context) {
super(context);
// TODO Auto-generated constructor stub
}

public Circle(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}

@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
if (StaticString.circleColor == Color.BLUE) {
paint.setColor(Color.BLUE);
} else if (StaticString.circleColor == Color.WHITE) {
paint.setColor(Color.WHITE);
}
paint.setAntiAlias(true);
paint.setStyle(Style.FILL);
canvas.drawCircle(4, 4, 4.0f, paint); //注意圓心的位置
super.onDraw(canvas);

}

}

在使用圓圈的Activity的XML上加載圓圈組件

<custom.Circle
android:id="@+id/circle1" android:layout_width="8dip"
android:layout_marginTop="6dip" android:padding="4dip"
android:layout_height="8dip" />

<custom.Circle
android:id="@+id/circle2" android:layout_width="8dip"
android:layout_marginTop="6dip" android:layout_marginLeft="2dip"
android:padding="4dip" android:layout_height="8dip" />

<custom.Circle
android:id="@+id/circle3" android:layout_width="8dip"
android:layout_marginTop="6dip" android:layout_marginLeft="2dip"
android:padding="4dip" android:layout_height="8dip" />

android:padding="4dip" 提供半徑為4 畫圓圈的空間，如果android:layout_width="wrap_content "會占很大空間，因此限定大小

在相關的Activity使用

mCityCircle1 = (View) findViewById(R.id.circle1);
mCityCircle2 = (View) findViewById(R.id.circle2);
mCityCircle3 = (View) findViewById(R.id.circle3);

class CircleThread implements Runnable {
public void run() {
int count = 0;
while (true) {
try {
count++;
if (count % 3 == 0) {
Thread.sleep(100);
StaticString.circleColor = Color.WHITE;
mCityCircle1.postInvalidate();
Thread.sleep(100);
StaticString.circleColor = Color.BLUE;
mCityCircle2.postInvalidate();
Thread.sleep(100);
StaticString.circleColor = Color.BLUE;
mCityCircle3.postInvalidate();

} else if (count % 3 == 1) {
Thread.sleep(100);
StaticString.circleColor = Color.BLUE;
mCityCircle1.postInvalidate();
Thread.sleep(100);
StaticString.circleColor = Color.WHITE;
mCityCircle2.postInvalidate();
Thread.sleep(100);
StaticString.circleColor = Color.BLUE;
mCityCircle3.postInvalidate();
} else {
Thread.sleep(100);
StaticString.circleColor = Color.BLUE;
mCityCircle1.postInvalidate();
Thread.sleep(100);
StaticString.circleColor = Color.BLUE;
mCityCircle2.postInvalidate();
Thread.sleep(100);
StaticString.circleColor = Color.WHITE;
mCityCircle3.postInvalidate();
}

} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}

}
}