自定义控件--自定义ToggleButton

1. 自定义类继承View,并复写三个构造方法
2. 在构造方法中对背景图片,按钮图片,按钮滑动最大距离进行初始化,设置点击事件
3. 在点击事件中,对开关状态进行反向操作,并使用invalidate(),重新调用onDraw(),在onDraw()中改变按钮图片的位置,实现开关状态的效果
4. 实现触摸事件,(注意要调用父类的触摸事件,将事件继续向下转发,在处理结束后要返回true已表示事件已经被消耗)在第一次按下按下控件的时候记录初始的X的坐标,在移动过程中不断的根据X坐标的偏移量刷新视图,在抬起动作中对X坐标进行判断,超过最大滑动距离的一半,滑动到最大距离,不超过,滑动到最小0的位置上
5. bug解决

bug描述

在移动按钮过程中,不管是否移动超过最大滑动距离的一半,都会导致按钮状态往反方向变化.

bug原因

当前view在响应触摸事件的同时,又响应的点击事件,原因是调用super.onTouchEvent(event);,按照安卓系统的事件传递机制,在触摸事件响应时将触摸事件传递给点击事件,使得在滑动按钮过程中按照触摸事件响应,在抬起时,又响应了点击事件,点击事件导致按钮开关状态的反向.

bug解决

增加开关变量,用于表示在抬起时,点击事件对按钮开关状态的控制权,true表示点击事件获得对按钮开关状态的控制权,false表示点击事件放弃按钮开关状态的控制权

在触摸事件处理中:

按下时将开关置为true,表示此时点击事件与触摸事件都有权控制按钮的开关状态

移动时,如果移动距离超过一定值,触摸事件接管,将开关置为false,让点击事件放弃控制权

抬起时,对开关进行判断,如果触摸事件有控制权,则刷新按钮状态,否则什么也不做,交给点击事件去处理

 

 

代码实现

注:里面有两张图片,需要导入到工程中

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class MyToggleButton extends View implements View.OnClickListener {

	private Bitmap backgroundBitmap;
	private Bitmap slideBitmap;
	private Paint paint;
	// 图片距离左边的距离
	private float maxSlide;
	/**
	 * 距离左边的最大距离
	 */
	private int maxLeft ;
	/**
	 * 按钮的开关状态 true:开 flase:关
	 */
	private boolean isStatus = true;

	// 测量view
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// 设置测量的值宽和高,采用背景图片的宽高
		setMeasuredDimension(backgroundBitmap.getWidth(),
				backgroundBitmap.getHeight());
	}

	// 绘制View
	@Override
	protected void onDraw(Canvas canvas) {
                // 画出背景
		canvas.drawBitmap(backgroundBitmap, 0, 0, paint);
                //画出滑动按钮
		canvas.drawBitmap(slideBitmap, maxSlide, 0, paint);
	}
	

	private void initView() {
		paint = new Paint();
		paint.setColor(Color.RED);
		// 设置抗锯齿
		paint.setAntiAlias(true);
                //初始化背景图片
		backgroundBitmap = BitmapFactory.decodeResource(getResources(),
				R.drawable.switch_background);
                //初始化按钮图片
		slideBitmap = BitmapFactory.decodeResource(getResources(),
				R.drawable.slide_button);
                //设置按钮距离左边最大滑动距离
		maxLeft = backgroundBitmap.getWidth() - slideBitmap.getWidth();
		// 设置点击事件
		 setOnClickListener(this);
	}

	//第一次按下的X轴坐标
	private float startX;
	//第一次按下的X轴坐标的历史记录
	private float lastX;
	/**点击事件是否生效，如果生效滑动事件就无效
	 * true生效
	 * false无效
	 */
	private boolean isClicked = false;
	@Override
	public boolean onTouchEvent(MotionEvent event) {
                //调用父类的方法,将点击事件进行转发
		super.onTouchEvent(event);
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:// 按下
			//1.第一次按下坐标
			lastX = startX = event.getX();
			isClicked = true;
			break;

		case MotionEvent.ACTION_MOVE:// 移动
			//2.来到新的X轴
			float newX = event.getX();
			//3.计算偏移量
			float dX = newX - startX;		
			//4.更新控件的位置
			maxSlide += dX;
			if(Math.abs(event.getX()-lastX)>5){
				isClicked = false;
			}
			flushView();
			//5.重新记录X轴坐标
			startX = event.getX();
			break;

		case MotionEvent.ACTION_UP:// 离开
			
			if(!isClicked){	
				if(maxSlide >maxLeft/2){
					//开
					isStatus = true;
				}else if(maxSlide <=maxLeft/2){
					//关
					isStatus = false;
				}
				flushStatus();
			}
	
			break;
		}
		return true;
	}

	private void flushView() {
		//屏蔽非法值
		if(maxSlide <=0){
			maxSlide = 0;
		}
		
		if(maxSlide >=maxLeft){
			maxSlide = maxLeft;
		}
		//导致onDraw执行
		invalidate();
	}

	// 设置自己的样式的时候用到
	public MyToggleButton(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		initView();
	}

	// Android系统通过布局文件使用全类名使用控件的时候,使用这个构造方法对控件进行实例化
	public MyToggleButton(Context context, AttributeSet attrs) {
		super(context, attrs);
		initView();
	}

	// 在代码中使用创建对象的时候使用
	public MyToggleButton(Context context) {
		super(context);
		initView();
	}

	@Override
	public void onClick(View v) {
		if(isClicked){
			isStatus = !isStatus;
			flushStatus();
		}	
	}

	private void flushStatus() {
		
		if (isStatus) {
			// 开
			maxSlide = maxLeft;
		} else {
			// 关
			maxSlide = 0;
		}

		flushView();
	}

}