Android自定义View实战-100行带你写出SwitchButton

1 序言

网上很多自定义View的例子都非常详细讲解了如何写出一个高效实用的自定义View,但是这些由于过于详细,给予一些新手的学习造成了一定的困难,比如说,当初我要学习如何自定义下拉刷新控件,结果,很多大神顺便把一些在我看来 学习自定义View非必要的技术带了进来,如数据结构啊,事件分发机制啊.这些东西不是说不必要,但是他们应该放到别的文章里面,否则对新手来说,让他们去思考这些繁杂的机制,而容易陷入细节不能自拔.这些技术在这篇文章里,他们只是充当辅助的角色,不是我们的主角,我们的主角就是在ondraw里面花时间,然后写出来一个自定义View.这样我们就能更加专注写出一个View,在此基础上,我们再谈扩展和高效.

2 实现思路

我们首先观察一下,这个按钮在打开和关闭时的状态,最终可以发现,他只是一些简单的几何组合,所以我们可以通过代码来实现这个效果,

3 代码

public class SwithcButton extends View {

	private Paint mPaint;
	public int state=1;  //状态,0位开,1位关.默认为关闭状态
	
	
	public SwithcButton(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		mPaint=new Paint();
	}
	
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// TODO Auto-generated method stub
		
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			
			postInvalidate();
			isAnim=true;
			break;

		default:
			break;
		}
		
		return true;
	}
	boolean isAnim;		//是否在播放动画
	float scale=0.9f;	//画布缩放比例
	float offsetX=0;   //按钮X轴偏移量
	
	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		if(state==1){
		mPaint.setColor(0xffcccccc);
		}else{
			mPaint.setColor(Color.GREEN);	
		}
        mPaint.setShadowLayer(0, 0, 0, Color.GRAY);  
		RectF mRectF=new RectF(0, 0, 100,50);
		canvas.drawRoundRect(mRectF, 50, 50, mPaint);
		mPaint.setColor(0xffffffff);
		canvas.save();
		canvas.scale(scale, scale, 50, 25);
		canvas.drawRoundRect(mRectF, 50, 50, mPaint);
		canvas.restore();
		if(state==1 && isAnim){
			scale-=0.1;
			offsetX+=5;
			invalidate();
			if(scale<=0.01){
				isAnim=false;
				state=0;
				scale=0.01f;
				offsetX=50;
				Log.i("test", "open");
			}
		}
		if(state==0 && isAnim){
			scale+=0.1;
			offsetX-=5;
			invalidate();
			if(scale>=0.9f){
				isAnim=false;
				state=1;
				scale=0.9f;
				offsetX=0;
				Log.i("test", "close");
			}
		}
		mPaint.setColor(0xffdddddd);
        mPaint.setShadowLayer(10, 0, 0, Color.GRAY);  
        canvas.save();
        canvas.translate(offsetX, 0);
		canvas.drawRoundRect(new RectF(1,1,48,48), 48, 48,mPaint);
		canvas.restore();
	}
}

4 最终效果

以上,便实现了一个简单的 switchbutton,有些同学说,你好像没有测量View啊,你这样的话如果我设置了不同的宽高模式,会不会出现一些很奇怪的显示效果呢?额,现在统一回复一下,这不是我们本篇文章的重点,关于View测量,大家可以看这篇来分别学习.http://blog.csdn.net/oxuanboy1/article/details/51148353