自定义视图-圆形动画的使用

首先今天我们要使用三个圆形动画







1，圆形加载进度条 。2，三个圆形并列的加载动画。3，两个圆形替换变大的加载动画

首先我们来理一下思路：

圆形加速进度条的话我们首先要画一个圆形（我画的是一个灰色的圆形），然后我们再画一个红色的圆形盖在灰色的圆形上面，

最后我们再画一个比较小的白色圆形放在红色的圆形中间，这样红色的圆形看起来就觉得中间是空的，就只剩一个红色的圆弧在外面了，

你们可以看效果图11.jpg

现在我们来看看代码：

1.先自定义一个试图RingView extends View

2.在构造函数中获得屏幕的宽和高，到时候我们用宽和高的一半来设置我们要画的圆的圆形

public RingView(Context context, AttributeSet attrs) {
		super(context, attrs);
		
		 //获取屏幕的宽，高  
		WindowManager wm=(WindowManager)getContext().getSystemService(Context.WINDOW_SERVICE);
		width = wm.getDefaultDisplay().getWidth();
		heigh = wm.getDefaultDisplay().getHeight();
	}

3，重新View的onDraw()方法，开始画圆

@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		//1.画一个灰色的圆形
		int circleWid=width/2;
		int circleHgt=heigh/2;
		Paint paint=new Paint(Paint.ANTI_ALIAS_FLAG);
		paint.setColor(Color.rgb(220,220,220));
		canvas.drawCircle(circleWid, circleHgt, 100, paint);
		
		//2.画一个红色的圆放在灰色的圆上面
		paint.setColor(Color.RED);
		RectF f=new RectF(circleWid-100,circleHgt-100,circleWid+100,circleHgt+100);
		canvas.drawArc(f, -90,process, true, paint);
		
		//3.在画一个圆来并且放在红色圆的中间，设置为白色。这样看起来红色就是一个进度条了
		paint.setColor(Color.WHITE);
		canvas.drawCircle(circleWid, circleHgt, 80, paint);
		
		paint.setColor(Color.RED);
		paint.setTextSize(28);
		//计算出数字的长度
		int textWid=(int) paint.measureText(String.valueOf(process));
		canvas.drawText(String.valueOf(process), circleWid-textWid/2, circleHgt, paint);
	}

</pre>4,接下来我们要来设置根据进度来加载我们的圆了<p></p><p>在MainActivity中我们获取到我们的自定义视图，然后new Thread(new CircleThread()).start();</p><p></p><pre name="code" class="java">private class CircleThread implements Runnable {

		@Override
		public void run() {
			while (begin) {
				SystemClock.sleep(1000);

				/**
				 * 在新的线程中，发送消息给View，更新界面数据 通过m++实现加速度方式的不断加速绘制弧形
				 * i代表要绘制扇形的角度大小，默认下290度
				 */
				m++;
				Message msg = new Message();
				if (process < 290) {
					process += m;
				} else {
					process = 290;
					begin = false;
				}
				msg.what = 1;
				msg.obj = process;
				System.out.println("process1:" + process);
				mhHandler.sendMessage(msg);

			}
		}
	}

最后我们在handler中

private Handler mhHandler = new Handler(new Callback() {

		@Override
		public boolean handleMessage(Message msg) {
			switch (msg.what) {
			case 1:
				int value = (int) msg.obj;
				ring.setProcess(value);
				ring.invalidate();
				break;

			default:
				break;
			}
			return true;
		}
	});

再在我们的自定义视图中根据获取到的值，来加载我们的圆了，详细请见圆形加载动画源码

好，接下来我们来将圆形的加载动画了，也就是22.jpg,和33.jpg的效果

ps:为什么我图片传上来了。却看不到呢？





方法其实和扇面的方法是很像的：在ondraw方法中

protected void onDraw(Canvas canvas) {

		Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
		// paint.setColor(Color.rgb(220,220, 220));
		//
		// canvas.drawCircle(midWid, midHei, 10, paint);
		// paint.setColor(Color.parseColor("#50DAF1"));
		// canvas.drawCircle(midWid, midHei, 20, paint);

		if (Uiutil.circleColor == Color.BLUE) {
			paint.setColor(Color.BLUE);
		} else {
			paint.setColor(Color.rgb(220, 220, 220));
			// canvas.drawCircle(midWid, midHei, 10, paint);
		}
		paint.setAntiAlias(true);
		paint.setStyle(Style.FILL);
		canvas.drawCircle(4, 4, 4.0f, paint); // 注意圆心的位置
		super.onDraw(canvas);

	}

在外面我们设置一个全局的变量，要来判断是否变色

public class Uiutil {

	
	public static int circleColor=Color.BLUE;
}

我们来看看主页的xml文件的布局

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        android:orientation="horizontal" >

        <com.example.circlescale2.CircleScaleView
            android:id="@+id/cirScale1"
            android:layout_width="8dip"
            android:layout_height="15dip"
            android:layout_gravity="center"
            android:layout_marginTop="6dip"
            android:layout_marginRight="10dp"
            android:gravity="center"
            android:padding="4dip" />

        <com.example.circlescale2.CircleScaleView
            android:id="@+id/cirScale2"
            android:layout_width="8dip"
            android:layout_height="15dip"
            android:layout_gravity="center"
            android:layout_marginTop="6dip"
            android:layout_marginRight="10dp"
            android:gravity="center"
            android:padding="4dip" />

        <com.example.circlescale2.CircleScaleView
            android:id="@+id/cirScale3"
            android:layout_width="8dip"
            android:layout_height="15dip"
            android:layout_gravity="center"
            android:layout_marginTop="6dip"
            android:gravity="center"
            android:padding="4dip" />
    </LinearLayout>

再看看MainActivity中的代码实现：

private class CircleColor implements Runnable{

		@Override
		public void run() {
		  while(true){
			  count++;
			   if(count%3==0){
				   SystemClock.sleep(100);
				   Uiutil.circleColor=Color.BLUE;
				   circleScaleView1.postInvalidate();
				   SystemClock.sleep(100);
				   Uiutil.circleColor=Color.GRAY;
				   circleScaleView2.postInvalidate();
				   SystemClock.sleep(100);
				   Uiutil.circleColor=Color.GRAY;
				   circleScaleView3.postInvalidate();
			   }else if(count%3==1){
				   SystemClock.sleep(100);
				   Uiutil.circleColor=Color.GRAY;
				   circleScaleView1.postInvalidate();
				   SystemClock.sleep(100);
				   Uiutil.circleColor=Color.BLUE;
				   circleScaleView2.postInvalidate();
				   SystemClock.sleep(100);
				   Uiutil.circleColor=Color.GRAY;
				   circleScaleView3.postInvalidate();
			   }else{
				   SystemClock.sleep(100);
				   Uiutil.circleColor=Color.GRAY;
				   circleScaleView1.postInvalidate();
				   SystemClock.sleep(100);
				   Uiutil.circleColor=Color.GRAY;
				   circleScaleView2.postInvalidate();
				   SystemClock.sleep(100);
				   Uiutil.circleColor=Color.BLUE;
				   circleScaleView3.postInvalidate();
			   }
		  } 
		}
	}

详细请看源码：圆形动画2
http://download.csdn.net/detail/iblue007/9120817
接下来我们来看看左后一个圆形动画：也叫 仿Uc加载动画

实际上和上面的功能类似。换个思路就可以想到了。主要代码是：

@Override
	protected void onDraw(Canvas canvas) {
		int midWid = width / 2;
		int midHei = heigh / 2;

		Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
		paint.setAntiAlias(true);
		paint.setStyle(Style.FILL);
		if (Uiutil.circleColor == Color.BLUE) {
			Uiutil.circleColor = Color.rgb(220, 220, 220);
			paint.setColor(Color.BLUE);
			canvas.drawCircle(midWid-10, midHei, 6, paint);
			paint.setColor(Color.rgb(220, 220, 220));
			canvas.drawCircle(midWid+10, midHei, 5, paint);
		} else {
			Uiutil.circleColor = Color.BLUE;
			paint.setColor(Color.rgb(220, 220, 220));
			canvas.drawCircle(midWid-10, midHei, 5, paint);
			paint.setColor(Color.BLUE);
			canvas.drawCircle(midWid+10, midHei, 6, paint); 
		}
		super.onDraw(canvas);

	}

大家有兴趣的话可以去下源码看看，很简单的，仿Uc加载动画

好。就到这里。希望对你有帮助