自定义控件之旅 一

        又有一段时间没有更新了，不是我懒，而是每天都要去拯救世界~拯救妹子~咳咳·~~好吧~！闲话不多说了，让我们进入正题。想必各位童鞋在生活中，看到那各种各样的炫酷动画、炫酷效果，有木有觉得很高大上？那特效简直是duang、duang、duang的震撼着我们的双眼~同时在心里也对做出这些特效的大牛拜服无比。好吧，我们离大牛的境界还太遥远，那么让我们来跟随大牛的脚步，一步一步成为大牛吧~！

        自定义控件，在新手看来是无比复杂、无比神秘的事。其实当你明白了其中的原理之后，你会恍然大悟：“哦，原来自定义控件并不神秘！”

        首先，我们看看自定义控件需要准备些什么：

        1、View：既然是自定义，我们肯定需要自己去绘制界面，那么，View就是让我们作死想象、酣快淋漓发挥画工的平台了

        2、Canvas：仅仅有了画图的平台还不行，我们还需要在平台上放上一直画布，作为我们画图的区域，而View中提供的canvas就是我们需要的画布了

        3、Paint：有了平台，有了画布，我们还差什么呢？骚年，你想的没错，我们还差一只笔，一只让我们展现画工的另一个必须品。

   

现在我们需要的东西整理完毕，那么就开始我们的第一个自定义作品吧！按照步骤，需要先给一个平台，OK，没问题，这真是太easy了！新建一个CustomView继承自View就好了：

public class CustomView extends View {
	public CustomView(Context context) {
		super(context);
	}
}

然后在activity_main.xml中添加此控件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <com.jarvis.customview.customview.CustomView
        android:id="@+id/customView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         />
</LinearLayout>

ok！运行看看，发现报错了：

大致意思是无法解析我们的CustomView类找不到方法，为什么呢？我们在xml文件引用我们的CustomView类时为其指定了两个android自带的两个属性：layout_width和layout_height，当我们需要使用类似的属性（比如更多的什么id、padding、margin之类）时必须在自定义View的构造方法中添加一个AttributeSet类型的签名来解析这些属性：

public class CustomView extends View {
	public CustomView(Context context) {
		super(context);
	}
	public CustomView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}
}

再运行，没问题了，此时界面是一个空白页面，既然要自定义，现在我们就给这个界面画点东西吧！在View实现OnDraw(Canvas canvas)方法，在这个方法中已经返回了上面所说的canvas，所以在这里就可以画我们想要的。

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
	}

有了画布，那么我们还差一只笔来画东西，所以我们声明一个Paint，和现实生活一样，笔也有很多种类：什么铅笔、钢笔、毛笔、粗笔、细笔、各种笔，在程序中也一样拥有如此多种类的笔，通过设置paint的属性，就可以得到我们想要类型的笔。

根据实际情况，选择相应的画笔属性就行了。

<span style="font-size:18px;">public class CustomView extends View implements Runnable {
	private Context context;
	private Paint paint;//圆的画笔
	private Paint paintBall;//小球的画笔
	private float radiu=160;//圆的半径
	private float radiuBall=20;//球的半径
	private Thread thread;
	private boolean isPlay=true;//是否开始动画
	
	
	public CustomView(Context context) {
		super(context);
		init(context);
	}
	public CustomView(Context context, AttributeSet attrs) {
		super(context, attrs);
		init(context);
	}
	
	private void init(Context context){
		this.context=context;
		thread=new Thread(this);
		paint=new Paint();
		paintBall=new Paint();
		//设置画笔颜色
		paint.setColor(Color.BLUE);
		//打开抗锯齿
		paint.setAntiAlias(true);
		/*设置画笔类型
		 * 画笔类型了3种：
		 * STROKE：描边
		 * FILL:填充
		 * FILL_AND_STROKE:填充并且描边
		 */
		paint.setStyle(Style.STROKE);
		/*
		 * 设置描边的宽度，单位是像素
		 */
		paint.setStrokeWidth(10);
		//设置画笔颜色
		paintBall.setColor(Color.RED);
		//打开抗锯齿
		paintBall.setAntiAlias(true);
		/*设置画笔类型
		 * 画笔类型了3种：
		 * STROKE：描边
		 * FILL:填充
		 * FILL_AND_STROKE:填充并且描边
		 */
		paintBall.setStyle(Style.FILL_AND_STROKE);
	}
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		/*
		 *画圆的四个参数：
		 *1：圆心的x坐标
		 *2：圆心的y坐标
		 *3：圆的半径
		 *4：画笔paint 
		 */
		canvas.drawCircle(Utils.getScreenWidth((Activity)context)/2, Utils.getScreenHeight((Activity)context)/2, radiu, paint);
		canvas.drawCircle(Utils.getScreenWidth((Activity)context)/2, Utils.getScreenHeight((Activity)context)/2, radiuBall, paintBall);
	}
	@Override
	public void run() {
		//通过一个死循环确保界面不断绘制
		while (isPlay) {
			try {
				if (radiu<=300) {
					radiu+=8;
					//重绘界面
					postInvalidate();
				}else {
					radiu=0;
				}
				//线程睡眠
				Thread.sleep(50);
				
			} catch (Exception e) {
				 e.printStackTrace(); 
			}
		}
	}
	
	/**
	 * 开始动画
	 */
	public void startPlay(){
		if (null==thread) {
			thread=new Thread(this);
		}
		if (!thread.isAlive()) {
			isPlay=true;
			thread.start();
		}
	}
	/**
	 * 停止动画
	 */
	public void stopPlay(){
		if (null!=thread) {
			isPlay=false;
			thread=null;
		}
	}
}</span>

至此，一个简单的自定义控件实现了，然后我们来使用下这个控件，在MainActivity中声明CustomView类：

public class MainActivity extends Activity implements OnClickListener {

	private CustomView customView;//自定义组件
	private Button start;//开始按钮
	private Button stop;//停止按钮
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		start=(Button) findViewById(R.id.start);
		stop=(Button) findViewById(R.id.stop);
		start.setOnClickListener(this);
		stop.setOnClickListener(this);
		
		//得到自定义的控件
		customView=(CustomView) findViewById(R.id.customView);
	}
	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.start://开始动画
			customView.startPlay();
			break;
		case R.id.stop://停止动画
			customView.stopPlay();
			break;
		}
	}
}

现在一切准备就绪，那就运行看看效果吧，效果图我这里就不贴了，下面附有源码，需要的童鞋自行下载，忙着去拯救世界（ps:是拯救妹子吧？）！

欢迎大家转载，转载请注明出处：http://blog.csdn.net/u011160184/article/details/46647767

这里是源码：传送门