Android学习札记2：滑动开关的实现

  

  

之前已经把这个工程共享到eoe论坛上了，原文链接：

http://www.eoeandroid.com/thread-156596-1-1.html

MySlipSwitch:

package com.qing;

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

public class MySlipSwitch extends View implements OnTouchListener {

	//开关开启时的背景，关闭时的背景，滑动按钮
	private Bitmap switch_on_Bkg, switch_off_Bkg, slip_Btn;
	private Rect on_Rect, off_Rect;
	
	//是否正在滑动
	private boolean isSlipping = false;
	//当前开关状态，true为开启，false为关闭
	private boolean isSwitchOn = false;
	
	//手指按下时的水平坐标X，当前的水平坐标X
	private float previousX, currentX;
	
	//开关监听器
	private OnSwitchListener onSwitchListener;
	//是否设置了开关监听器
	private boolean isSwitchListenerOn = false;
	
	
	public MySlipSwitch(Context context) {
		super(context);
		init();
	}
	
	
	public MySlipSwitch(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}
	
	
	private void init() {
		setOnTouchListener(this);
	}
	
	
	protected void setImageResource(int switchOnBkg, int switchOffBkg, int slipBtn) {
		switch_on_Bkg = BitmapFactory.decodeResource(getResources(), switchOnBkg);
		switch_off_Bkg = BitmapFactory.decodeResource(getResources(), switchOffBkg);
		slip_Btn = BitmapFactory.decodeResource(getResources(), slipBtn);	
		
		//右半边Rect，即滑动按钮在右半边时表示开关开启
		on_Rect = new Rect(switch_off_Bkg.getWidth() - slip_Btn.getWidth(), 0, switch_off_Bkg.getWidth(), slip_Btn.getHeight());
		//左半边Rect，即滑动按钮在左半边时表示开关关闭
		off_Rect = new Rect(0, 0, slip_Btn.getWidth(), slip_Btn.getHeight());
	}
	
	
	protected void setSwitchState(boolean switchState) {
		isSwitchOn = switchState;
	}
	
	
	protected boolean getSwitchState() {
		return isSwitchOn;
	}
	
	
	protected void updateSwitchState(boolean switchState) {
		isSwitchOn = switchState;
		invalidate();
	}
	
	
	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);
		
		Matrix matrix = new Matrix();
		Paint paint = new Paint();
		//滑动按钮的左边坐标
		float left_SlipBtn;
		
		//手指滑动到左半边的时候表示开关为关闭状态，滑动到右半边的时候表示开关为开启状态
		if(currentX < (switch_on_Bkg.getWidth() / 2)) {
			canvas.drawBitmap(switch_off_Bkg, matrix, paint);
		} else {
			canvas.drawBitmap(switch_on_Bkg, matrix, paint);
		}
		
		//判断当前是否正在滑动
		if(isSlipping) {
			if(currentX > switch_on_Bkg.getWidth()) {
				left_SlipBtn = switch_on_Bkg.getWidth() - slip_Btn.getWidth();
			} else {
				left_SlipBtn = currentX - slip_Btn.getWidth() / 2;
			}
		} else {
			//根据当前的开关状态设置滑动按钮的位置
			if(isSwitchOn) {
				left_SlipBtn = on_Rect.left;
			} else {
				left_SlipBtn = off_Rect.left;
			}
		}
		
		//对滑动按钮的位置进行异常判断
		if(left_SlipBtn < 0) {
			left_SlipBtn = 0;
		} else if(left_SlipBtn > switch_on_Bkg.getWidth() - slip_Btn.getWidth()) {
			left_SlipBtn = switch_on_Bkg.getWidth() - slip_Btn.getWidth();
		}
		
		canvas.drawBitmap(slip_Btn, left_SlipBtn, 0, paint);
	}
	
	
	
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		setMeasuredDimension(switch_on_Bkg.getWidth(), switch_on_Bkg.getHeight());
	}


	@Override
	public boolean onTouch(View v, MotionEvent event) {
		// TODO Auto-generated method stub
		switch(event.getAction()) {
		//滑动
		case MotionEvent.ACTION_MOVE:
			currentX = event.getX();
			break;
			
		//按下
		case MotionEvent.ACTION_DOWN:
			if(event.getX() > switch_on_Bkg.getWidth() || event.getY() > switch_on_Bkg.getHeight()) {
				return false;
			}
			
			isSlipping = true;
			previousX = event.getX();
			currentX = previousX;
			break;
		
		//松开
		case MotionEvent.ACTION_UP:
			isSlipping = false;
			//松开前开关的状态
			boolean previousSwitchState  = isSwitchOn;
			
			if(event.getX() >= (switch_on_Bkg.getWidth() / 2)) {
				isSwitchOn = true;
			} else {
				isSwitchOn = false;
			}
			
			//如果设置了监听器，则调用此方法
			if(isSwitchListenerOn && (previousSwitchState != isSwitchOn)) {
				onSwitchListener.onSwitched(isSwitchOn);
			}
			break;
		
		default:
			break;
		}
		
		//重新绘制控件
		invalidate();
		return true;
	}


	public void setOnSwitchListener(OnSwitchListener listener) {
		onSwitchListener = listener;
		isSwitchListenerOn = true;
	}
	
	
	public interface OnSwitchListener {
		abstract void onSwitched(boolean isSwitchOn);
	}
}

MainActivity:

package com.qing;

import com.qing.MySlipSwitch.OnSwitchListener;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends Activity {
    
	private Button switch_Btn;
	private MySlipSwitch slipswitch_MSL;

	
	/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        slipswitch_MSL = (MySlipSwitch)findViewById(R.id.main_myslipswitch);
        slipswitch_MSL.setImageResource(R.drawable.bkg_switch, R.drawable.bkg_switch, R.drawable.btn_slip);
        slipswitch_MSL.setSwitchState(true);
        slipswitch_MSL.setOnSwitchListener(new OnSwitchListener() {
			
			@Override
			public void onSwitched(boolean isSwitchOn) {
				// TODO Auto-generated method stub
				if(isSwitchOn) {
					Toast.makeText(MainActivity.this, "开关已经开启", 300).show();
				} else {
					Toast.makeText(MainActivity.this, "开关已经关闭", 300).show();
				}
			}
		});
        
        switch_Btn = (Button)findViewById(R.id.main_button_switch);
        switch_Btn.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				slipswitch_MSL.updateSwitchState(!slipswitch_MSL.getSwitchState());
				
				if(slipswitch_MSL.getSwitchState()) {
					Toast.makeText(MainActivity.this, "开关已经开启", 300).show();
				} else {
					Toast.makeText(MainActivity.this, "开关已经关闭", 300).show();
				}
			}
		});
    }
}