自定义滑动开关(ToggleButton)

忘是亡心i 2022-08-01 00:24 227阅读 0赞

自定义控件的步骤：

测量：onMeasure  设置自己显示在屏幕上的宽高  
布局：onLayout   设置自己显示在屏幕上的位置(只有在自定义ViewGroup中才用到)  
绘制：onDraw     控制显示在屏幕上的样子(自定义viewgroup时不需要这个)

以下是自定义的滑动开关：

使用时只要设置滑动块的背景图片setSlideBackgroundResource()和滑动开关的背景图片setSwitchBackgroundResource(R.drawable.switch\_background)即可。

其中setToggleState()方法是设置滑动开关的状态：ToggleState.Open 开启状态ToggleState.Close关闭状态。

setOnToggleStateChangeListener()可以监听滑动块状态的改变。

代码如下：

MainActivity：

public class MainActivity extends Activity {
    
    	private ToggleButton toggleButton;
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    
    		toggleButton = (ToggleButton) findViewById(R.id.toggleButton);
    		toggleButton.setSlideBackgroundResource(R.drawable.slide_button_background);
    		toggleButton.setSwitchBackgroundResource(R.drawable.switch_background);
    		toggleButton.setToggleState(ToggleState.Open);
    		toggleButton.setOnToggleStateChangeListener(new OnToggleStateChangeListener() {
    
    			@Override
    			public void onToggleStateChange(ToggleState state) {
    				Toast.makeText(MainActivity.this, state == ToggleState.Open ? "开启" : "关闭", 0).show();
    			}
    		});
    	}
    }

自定义ToggleButton的代码：

public class ToggleButton extends View {
    
    	private ToggleState toggleState = ToggleState.Open;// 开关的状态
    	private Bitmap slideBg;
    	private Bitmap switchBg;
    	private boolean isSliding = false;
    	private OnToggleStateChangeListener listener;
    
    	private int currentX;// 当前触摸点的X坐标
    
    	/**
    	 * 如果view只是在布局文件中使用，只需要重写这个构造方法
    	 * 
    	 * @param context
    	 * @param attrs
    	 */
    	public ToggleButton(Context context, AttributeSet attrs) {
    		super(context, attrs);
    	}
    
    	/**
    	 * 如果view需要在java代码中动态new出来,使用的是这个构造方法
    	 * 
    	 * @param context
    	 */
    	public ToggleButton(Context context) {
    		super(context);
    	}
    
    	/**
    	 * 设置滑动块的背景图片
    	 * 
    	 * @param slideButtonBackground
    	 *            图片的资源id
    	 */
    	public void setSlideBackgroundResource(int slideButtonBackground) {
    		slideBg = BitmapFactory.decodeResource(getResources(), slideButtonBackground);
    	}
    
    	/**
    	 * 设置滑动开关的背景图片
    	 * 
    	 * @param switchBackground
    	 *            图片的资源id
    	 */
    	public void setSwitchBackgroundResource(int switchBackground) {
    		switchBg = BitmapFactory.decodeResource(getResources(), switchBackground);
    	}
    
    	/**
    	 * 使用枚举定义两个滑动开关的状态
    	 * 
    	 * @author Administrator
    	 * 
    	 */
    	public enum ToggleState {
    		Open, Close
    	}
    
    	/**
    	 * 设置开关的状态
    	 * 
    	 * @param open
    	 */
    	public void setToggleState(ToggleState state) {
    		toggleState = state;
    	}
    
    	/**
    	 * 设置当前控件显示在屏幕上的宽高
    	 */
    	@Override
    	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    
    		setMeasuredDimension(switchBg.getWidth(), switchBg.getHeight());
    	}
    
    	/**
    	 * 绘制控件显示在屏幕上的样子
    	 */
    	@Override
    	protected void onDraw(Canvas canvas) {
    		super.onDraw(canvas);
    		// 1.绘制背景图片
    		// left:图片的左边的X坐标
    		// top:图片顶部的Y坐标
    		canvas.drawBitmap(switchBg, 0, 0, null);
    
    		// 2.绘制滑动块的图片
    		if (isSliding) {
    			int left = currentX - slideBg.getWidth() / 2;
    			if (left < 0) {
    				left = 0;
    			}
    			if (left > (switchBg.getWidth() - slideBg.getWidth())) {
    				left = switchBg.getWidth() - slideBg.getWidth();
    			}
    			canvas.drawBitmap(slideBg, left, 0, null);
    		} else {
    			// 此时抬起，根据state去绘制滑动块的位置
    			if (toggleState == ToggleState.Open) {
    				canvas.drawBitmap(slideBg, switchBg.getWidth() - slideBg.getWidth(), 0, null);
    			} else {
    				canvas.drawBitmap(slideBg, 0, 0, null);
    			}
    		}
    	}
    
    	@Override
    	public boolean onTouchEvent(MotionEvent event) {
    		currentX = (int) event.getX();
    		switch (event.getAction()) {
    		case MotionEvent.ACTION_DOWN:
    			isSliding = true;
    			break;
    		case MotionEvent.ACTION_MOVE:
    			break;
    		case MotionEvent.ACTION_UP:
    			isSliding = false;
    			int centerX = switchBg.getWidth() / 2;// 开关的中点
    			if (currentX > centerX) {
    				// open
    				if (toggleState != ToggleState.Open) {
    					toggleState = ToggleState.Open;
    					if (listener != null) {
    						listener.onToggleStateChange(toggleState);
    					}
    				}
    			} else {
    				// close
    				if (toggleState != ToggleState.Close) {
    					toggleState = ToggleState.Close;
    					if (listener != null) {
    						listener.onToggleStateChange(toggleState);
    					}
    				}
    			}
    			break;
    		}
    		invalidate();// 重绘
    		return true;
    	}
    
    	public void setOnToggleStateChangeListener(OnToggleStateChangeListener listener) {
    		this.listener = listener;
    	}
    
    	public interface OnToggleStateChangeListener {
    		void onToggleStateChange(ToggleState state);
    	}
    }

布局文件：

Demo地址： [点击打开链接][Link 1]

[Link 1]: http://download.csdn.net/detail/qq_26323183/8809075