自定义view_1，做一个自己的progressbar

</pre></h1><h1></h1><h1><span style="font-family:Consolas,'Courier New',Courier,mono,serif; line-height:18px"><span style="font-size:12px"><span style="font-weight:normal">1.自定义ProgressBar</span></span></span></h1><p><span style="font-family:Consolas,'Courier New',Courier,mono,serif; line-height:18px"><span style="font-size:12px"><span style="font-weight:normal; white-space:pre"></span><span style="font-weight:normal">第一次写博客，今天是上班的最后一天，无聊没事 ，上午就做了一个Progressbar ，因为我实在是不能忍受原生的那个组件了，<span style="margin:0px; padding:0px; border:none; font-family:Consolas,'Courier New',Courier,mono,serif; line-height:18px">这么丑，你能忍，我不能忍，所以我就仿造了一个类似（仅仅是类似）android4.</span><span class="number" style="margin:0px; padding:0px; border:none; color:rgb(192,0,0); font-family:Consolas,'Courier New',Courier,mono,serif; line-height:18px">4</span><span style="margin:0px; padding:0px; border:none; font-family:Consolas,'Courier New',Courier,mono,serif; line-height:18px">的时候开机画面那样的东东出来。像这样的</span><span class="number" style="margin:0px; padding:0px; border:none; color:rgb(192,0,0); font-family:Consolas,'Courier New',Courier,mono,serif; line-height:18px">3</span><span style="margin:0px; padding:0px; border:none; font-family:Consolas,'Courier New',Courier,mono,serif; line-height:18px">个球球不停转：</span></span></span></span></p><p><span style="font-family:Consolas,'Courier New',Courier,mono,serif; line-height:18px"><span style="font-size:12px"><span style="font-weight:normal"><span style="margin:0px; padding:0px; border:none; font-family:Consolas,'Courier New',Courier,mono,serif; line-height:18px"><img src="https://img-blog.csdn.net/20150209170332067?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjUxODE4NDk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></span></span></span></span></p><h2><span style="font-family:Consolas,'Courier New',Courier,mono,serif; line-height:18px"><span style="font-weight:normal"><span style="margin:0px; padding:0px; border:none; font-family:Consolas,'Courier New',Courier,mono,serif; line-height:18px"><span style="font-size:18px"><span class="number" style="margin:0px; padding:0px; border:none; color:rgb(192,0,0); font-family:Consolas,'Courier New',Courier,mono,serif; font-weight:bold; line-height:18px">1.1</span><span style="margin:0px; padding:0px; border:none; font-family:Consolas,'Courier New',Courier,mono,serif; line-height:18px"><strong>新建一个类，继承自ProgressBar</strong></span></span></span></span></span></h2><div><span style="font-family:Consolas,'Courier New',Courier,mono,serif; line-height:18px"><span style="font-weight:normal"><span style="margin:0px; padding:0px; border:none; font-family:Consolas,'Courier New',Courier,mono,serif; line-height:18px"><span style="font-size:18px"><span style="margin:0px; padding:0px; border:none; font-family:Consolas,'Courier New',Courier,mono,serif; line-height:18px"><strong><span style="white-space:pre"><span style="font-family:Consolas,'Courier New',Courier,mono,serif; line-height:18px"><strong>这里面我们需要用到的方法主要有onDraw以及onSizeChanged两个。</strong></span></span></strong></span></span></span></span></span></div><div></div><pre name="code" class="java">public class MyProgressBarNoNum extends ProgressBar {
	

	public MyProgressBarNoNum(Context context) {
		super(context);
		init();
	}

	public MyProgressBarNoNum(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}

	private void init() {
		
	}

	@Override
	protected synchronized void onDraw(Canvas canvas) {
	
		
	}

	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		
	}

}

1.2 实现onDraw

自定义view的重点主要还是在这个方法中，他给我们提供了一个画布Canvas，我们可以在画布上面绘制好自己所需要的图形或者形状。我们的view主要就是三个圆不停的变换位置。那么三个圆，就需要有三个颜色，三个画笔。不断的去计算三个圆的坐标来实现绘制效果。

public class MyProgressBarNoNum extends ProgressBar {
	// 圆的大小
	private final int CIRCLE_RADIUS = 30;
	// 角度
	private int angle;
	// 最大偏移角度
	private final int MAX_ANGLE = 360;
	// 距离
	private int deviateDistance;
	// 最大偏离距离
	private final int MAX_DEVIATE_DISTANCE = 20;
	// 颜色
	private int[] colorCircle = {0xAA607d8b ,0xAA9c27b0 ,0xAA3f51b5};
	// 圆的画笔
	private Paint mPaint1;
	private Paint mPaint2 ;
	private Paint mPaint3 ;
	private int[] centerPoint;
	private int position_rad = 0 ;

	public MyProgressBarNoNum(Context context) {
		super(context);
		init();
	}

	public MyProgressBarNoNum(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}

	/**   
	 * @Title: init   
	 * @Description:初始化画笔以及一些变量   
	 * @param:       
	 * @return: void   
	 * @lastmodify: 2015-2-9 by evan
	 */  
	private void init() {
		angle = 0;
		deviateDistance = 0;
		mPaint1 = new Paint();
		mPaint1.setAntiAlias(true);
		mPaint1.setColor(colorCircle[0]);
		mPaint2 = new Paint();
		mPaint2.setAntiAlias(true);
		mPaint2.setColor(colorCircle[1]);
		mPaint3 = new Paint();
		mPaint3.setAntiAlias(true);
		mPaint3.setColor(colorCircle[2]);
	}

	@Override
	protected synchronized void onDraw(Canvas canvas) {
		//第一个圆的坐标
		int c1_x = (int) (deviateDistance * Math.sin(angle * 1.0 /180* Math.PI)) + centerPoint[0];
		int c1_y = (int) (deviateDistance * Math.cos(angle * 1.0 /180* Math.PI)) + centerPoint[1];
		canvas.drawCircle(c1_x, c1_y, CIRCLE_RADIUS, mPaint1);
		//第二个圆的坐标
		int c2_x = (int) (deviateDistance*Math.sin((angle+120)*1.0/180*Math.PI)+centerPoint[0]);
		int c2_y =  (int) (deviateDistance * Math.cos((angle+120) * 1.0 /180* Math.PI)) + centerPoint[1];
		canvas.drawCircle(c2_x, c2_y, CIRCLE_RADIUS, mPaint2);
		//第三个圆的坐标
		int c3_x = (int) (deviateDistance*Math.sin((angle+240)*1.0/180*Math.PI)+centerPoint[0]);
		int c3_y =  (int) (deviateDistance * Math.cos((angle+240) * 1.0 /180* Math.PI)) + centerPoint[1];
		canvas.drawCircle(c3_x, c3_y, CIRCLE_RADIUS, mPaint3);
		position_rad = position_rad+2;
		if(position_rad++ >=MAX_ANGLE) position_rad = 0;
		deviateDistance =  (int) (MAX_DEVIATE_DISTANCE*Math.sin((position_rad - 90) * 1.0 /180* Math.PI)+MAX_DEVIATE_DISTANCE);
		if (angle <=0) angle = MAX_ANGLE;
		angle = angle-2;
		invalidate();
		
	}

	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		super.onSizeChanged(w, h, oldw, oldh);
		centerPoint = new int[] { w / 2, h / 2 };
	}

}

从我们的代码量上面来看，还是比较少的，主要的还是在于怎么去计算三个圆的位置，以及他变化的一个过程控制。

1.3 xml文件

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#ffffff"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:myapp="http://schemas.android.com/apk/res/com.evan.myview"
    >

    <com.evan.view.MyProgressBarNoNum 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</LinearLayout>

虚拟机太麻烦了，懒的去截取动态图片，有没有可以在真机上面截取动态图的软件可以截取动态图，可以推荐给我，然后我在添上效果图。

好了，写完收工，可以准备耍个小长假了。