Android自定义SwitchButton左右滑动开关按钮控件
2015-01-26 11:43:02  By: dwtedx

以前在项目中做过一个类似滑动开关的、但是可惜的是只能用点的方式去操作、总感觉不完美、在网上查阅资料后、稍稍的改进了一下、添加了滑动事件、封装了一个 SwitchButton 的类、分享给大家、希望对大家有用

MySwitchButton.java


public class MySwitchButton extends View implements OnTouchListener {

	private Bitmap switchOnBkg; // 开关开启时的背景
	private Bitmap switchOffBkg; // 开关关闭时的背景
	private Bitmap slipSwitchButton; // 滑动开关的图片
	private Rect onRect; // 左半边矩形
	private Rect offRect; // 右半边矩形

	private boolean isSlipping = false; // 是否正在滑动
	// 当前开关的状态,true表示开启,flase表示关闭
	private boolean isSwitchOn = false; 
	private float previousX; // 手指按下时的水平坐标x
	private float currentX; // 当前的水平坐标X

	// 开关监听器
	private ArrayList<OnSwitchListener> onSwitchListenerList; 

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

	private void init() {
		this.setOnTouchListener(this); // 设置触摸监听器
		onSwitchListenerList = new ArrayList<OnSwitchListener>();
	}

	public void setImageResource(int switchBkg, int slipBtn) {
		switchOnBkg = BitmapFactory.decodeResource(this
			.getResources(), switchBkg);
		switchOffBkg = BitmapFactory.decodeResource(this
			.getResources(), switchBkg);
		slipSwitchButton = BitmapFactory.decodeResource(this
			.getResources(), slipBtn);

		// 右半边rect,滑动开关在右半边时表示开启
		onRect = new Rect(switchOnBkg.getWidth() - 
		slipSwitchButton.getWidth(), 0, switchOnBkg.getWidth(), 
		slipSwitchButton.getHeight());
		// 左半边rect,滑动开关在左半边时表示关闭
		offRect = new Rect(0, 0, slipSwitchButton.getWidth(),
				slipSwitchButton.getHeight());
	}

	public void setSwitchState(boolean switchState) {
		this.isSwitchOn = switchState;
		this.invalidate();
	}

	public boolean getSwitchState() {
		return this.isSwitchOn;
	}
	
	public void setOnSwitchStateListener(OnSwitchListener listener){
		onSwitchListenerList.add(listener);
	}

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

		Matrix matrix = new Matrix();
		Paint paint = new Paint();

		float leftSlipBtnX; // 滑动按钮的左边坐标

		System.out.println("currentX="   currentX   " switchOnBkg.width="
				  switchOnBkg.getWidth());

		canvas.drawBitmap(switchOnBkg, matrix, paint);

		if (isSlipping) {
			// 如果正在滑动
			if (currentX > switchOnBkg.getWidth()) {
			leftSlipBtnX = switchOnBkg.getWidth()
					- slipSwitchButton.getWidth();
			} else {
			leftSlipBtnX = currentX - slipSwitchButton.getWidth();
			}
		} else {
			if (isSwitchOn) {
				leftSlipBtnX = switchOnBkg.getWidth()
						- slipSwitchButton.getWidth();
			} else {
				leftSlipBtnX = 0;
			}
		}

		if (leftSlipBtnX < 0) {
			leftSlipBtnX = 0;
		} else if (leftSlipBtnX > switchOnBkg.getWidth()
				- slipSwitchButton.getWidth()) {
			leftSlipBtnX = switchOnBkg.getWidth() - 
				slipSwitchButton.getWidth();
		}

		canvas.drawBitmap(slipSwitchButton, leftSlipBtnX, 0, paint);

	}

	@Override
	protected void onMeasure(int widthMeasureSpec, 
			int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		setMeasuredDimension(switchOnBkg.getWidth(), 
			switchOnBkg.getHeight());
	}

	@Override
	public boolean onTouch(View v, MotionEvent event) {
		int action = event.getAction();
		switch (action) {
		case MotionEvent.ACTION_MOVE:
			currentX = event.getX();
			break;
		case MotionEvent.ACTION_DOWN:
			isSlipping = true;
			break;
		case MotionEvent.ACTION_UP:
			isSlipping = false;
			boolean previousState = isSwitchOn;
			if (event.getX() > (switchOnBkg.getWidth() / 2)) {
				isSwitchOn = true;
			} else {
				isSwitchOn = false;
			}

			if(previousState != isSwitchOn){
			if(onSwitchListenerList.size() > 0){
			for(OnSwitchListener listener : onSwitchListenerList){
				listener.onSwitched(isSwitchOn);
			}
			}
			}
			break;

		default:
			break;
		}

		this.invalidate();
		return true;
	}

}


最后贴上Demo源代码、有兴趣的哥们可以下载看看、Demo里面图片可能跟你的项目风格不搭配、可以自己改一下图片就ok了哈

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1sjlu8LB 密码: 7ikt

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


猜你喜欢的

快速评论


技术评论

DD记账
top
+