做安卓APP的程序猿们一定有这样的苦衷：UI们所做的原型图均是参照IOS的界面做的，很多IOS自带的组件在安卓系统上则需要开发者们根据现有的API进行自定义描绘。其中开关是APP中设置界面中不可或缺的部分，安卓自带的ToggleButton只支持点击切换状态，虽然可以通过setOnCheckedChangeListener来调整打开和关闭时不同的背景图，但要实现类似于IOS一样既可以通过点击、亦可通过滑动来改变开关的状态，则需要自定义一个ToggleButton来实现这些功能。
设计前先确定该自定义组件的基本属性：
1）需要绘制于画布上的bitmap，包括可滑动的按钮（toggleButton），状态为关闭时的背景（switchCloseBG），状态为开启时的背景（switchOpenBG）。
2）状态发生变化时的监听器，自定义一个接口OnToggleStateChangedListener，状态发生变化时回调该接口的响应。
3）定义好开关的一些状态，包括是否处于滑动中isSliding、当前状态（开关是开还是关）currentState、前一次操作完毕后开关的状态previousState。
4）定义滑块滑动的距离，currentX。
接下来就是设定开关状态变化的触发条件：
1）当我们去拖动滑块至抬手时，滑块若距离背景图片的左边缘更近，则为关闭状态，若距离右边缘更近，则为开启状态，状态变更时背景亦需变化。在滑块随手指滑动过程中，手指若未抬起，滑块随手指的滑动而滑动，并不影响相应状态。
2）当我们去点击整个开关时，滑块将自行切换至相对状态，布局亦发生相应变化。
3）若状态发生变化，需调用OnToggleStateChangedListener接口处理相应函数。
滑动开关的界面变化：
1）设计时，尽量由状态控制界面，包括正在滑动时的状态、单击后状态、抬手后状态等，任何一个动作均需调用invalidate对界面进行重绘。
代码方面，此处自定义view在监听手势变化时，需重写onTouchEvent，但点击事件也会被onTouchEvent事件优先捕获，onTouchEvent函数的入参MotionEvent一般区分手指按下(ACTION_UP)，移动(ACTION_MOVE)及手指抬起（ACTION_UP）几大状态，但如何识别出单击事件呢，此处需引入GestureDetector及OnGestrueListener。
先来看具体自定义View的完整代码。
package com.example.togglebutton.view;
import com.example.slidebutton.R;
import com.example.togglebutton.view.interf.OnToggleStateChangeListener;
import android.content.Context;
import android.gesture.Gesture;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.View;
public class ToggleButton extends View implements OnGestureListener{
/** 滑动开关的背景 */
private Bitmap toggleButton;
/** 滑动块关闭时的背景 */
private Bitmap switchCloseBG;
/**滑动块打开时的背景**/
private Bitmap switchOpenBG;
/** 设置开关的状态，打开/关闭。 默认：关闭 */
private boolean currentState = false;
/** 当前滑动块的移动距离 */
private int currentX;
/** 记录当前滑动块滑动的状态。默认，false */
private boolean isSliding = false;
/**记录滑块之前一次的滑动状态*/
private boolean prviousState = false;
/** 开关状态改变监听 */
private OnToggleStateChangeListener onToggleStateChangeListener;
private GestureDetector gestureDetector;
public ToggleButton(Context context, AttributeSet attrs) {
super(context, attrs);
gestureDetector = new GestureDetector(context, this);
initBitmap();
}
private void initBitmap() {
toggleButton = BitmapFactory.decodeResource(getResources(), R.drawable.mini_taobao_normal);
switchCloseBG = BitmapFactory.decodeResource(getResources(), R.drawable.mini_table_off);
switchOpenBG = BitmapFactory.decodeResource(getResources(), R.drawable.mini_table_on);
}
/**
* 移动效果的处理
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_UP:
isSliding = false;
//两者状态初始化为一致
prviousState = currentState;
// 判断当前滑动块，偏向于哪一边，如果滑动块的中心点<背景的中心点，设置为关闭状态
int bgCenter = switchCloseBG.getWidth() / 2;
//改变后的状态
boolean state = currentX >= bgCenter;
// 手指抬起时，回调监听，返回当前的开关状态
if (state != currentState && onToggleStateChangeListener != null) {
onToggleStateChangeListener.onToggleStateChange(state);
}
currentState = state;
invalidate();
break;
default:
break;
}
return gestureDetector.onTouchEvent(event);
}
/**
* 测量当前控件宽高时回调
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 设置开关的宽和高
setMeasuredDimension(switchCloseBG.getWidth(), switchCloseBG.getHeight());
}
/**
* 绘制控件
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 1,滑动开关背景绘制到控件，开启和关闭状态有不同的背景
if(currentState){
canvas.drawBitmap(switchOpenBG, 0, 0, null);
}else{
canvas.drawBitmap(switchCloseBG, 0, 0 , null);
}
// 2，绘制滑动块显示的位置，开启或关闭
if (isSliding) {
//根据手指距离背景图左边缘的距离，手指的距离为滑块中点的未知，由此算到滑块左边缘距离背景左边缘的距离
int slideLeft = currentX - toggleButton.getWidth() / 2;
if (slideLeft < 0) {
slideLeft = 0;
} else if (slideLeft > switchCloseBG.getWidth() - toggleButton.getWidth()) {
slideLeft = switchCloseBG.getWidth() - toggleButton.getWidth();
}
canvas.drawBitmap(toggleButton, slideLeft, 0, null);
} else {
if (currentState) {
// 绘制打开状态
canvas.drawBitmap(toggleButton, switchCloseBG.getWidth() - toggleButton.getWidth(), 0, null);
} else {
// 绘制关闭状态
canvas.drawBitmap(toggleButton, 0, 0, null);
}
}
}
public void setToggleState(boolean b) {
currentState = b;
}
public boolean getToggleState(){
return currentState;
}
/**
* 对外设置监听方法
*
* @param listener
*/
public void setOnToggleStateChangeListener(OnToggleStateChangeListener listener) {
this.onToggleStateChangeListener = listener;
}
@Override
public boolean onDown(MotionEvent e) {
currentX = (int) e.getX();
isSliding = true;
invalidate();
return true;
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
return false;
}
@Override
public void onLongPress(MotionEvent e) {
}
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
float distanceY) {
currentX = (int) e2.getX();
invalidate();
return true;
}
@Override
public void onShowPress(MotionEvent e) {
}
@Override
public boolean onSingleTapUp(MotionEvent e) {
//为防止与up事件冲突，先判断up时状态是否已经改变
if(prviousState == currentState){
isSliding = false;
currentState = !currentState;
onToggleStateChangeListener.onToggleStateChange(currentState);
invalidate();
}
return false;
}
}
一般来说，手势的变化动作先交由onTouchEvent处理，再交由GestureDetector处理，OnGestrueListener处理滑动事件时分为快速滑动和普通滑动。
快速滑动依次回调的函数为：onDown->onShowPress->onScroll->onFling，最后抬手时回调onFling
普通滑动依次回调的函数为：onDown->onShowPress->onScroll
单击事件依次回调的函数为：onDown->onShowPress->onSingleTapUp，最后抬手时回调onSingleTapUp
可以看出的是OnGestrueListener没有单独回调OnUp函数，而onFling函数时而回调时而不回调，不好控制，故在OnUp事件便放在onTouchEvent函数自身中执行。这样一来，相当于滑动时回调(没有复写的函数不写在里面)：
onDown->onScroll->onUp
单击时回调：onDown->onUp->onSingleTapUp
故为了防止在单击时，OnUp已经将开关状态变更，增加previousState变量作为currentState的临时变量，若单击时开关状态已变更，onSingleTapUp便不做处理。
每个回调函数处理完后，需调用invalidate对view进行重绘。
下面贴出使用该ToggleButton的Activity代码及对应布局。
package com.example.togglebutton;
import com.example.slidebutton.R;
import com.example.togglebutton.view.ToggleButton;
import com.example.togglebutton.view.interf.OnToggleStateChangeListener;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
import android.app.Activity;
import android.view.View.OnClickListener;
public class MainActivity extends Activity implements OnToggleStateChangeListener {
public ToggleButton toggleButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toggleButton = (ToggleButton) findViewById(R.id.slidebutton);
toggleButton.setToggleState(true);
toggleButton.setOnToggleStateChangeListener(this);
toggleButton.setLongClickable(true);
}
@Override
public void onToggleStateChange(boolean currentState) {
if (currentState) {
Toast.makeText(MainActivity.this, "开关打开", Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(MainActivity.this, "开关关闭", Toast.LENGTH_SHORT).show();
}
}
}
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.example.togglebutton.view.ToggleButton
android:id="@+id/slidebutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
OnToggleStateChangeListener接口声明
ackage com.example.togglebutton.view.interf;
/**
* 开关状态改变监听事件
*
* @author Administrator
*
*/
public interface OnToggleStateChangeListener {
/**
* 当开关状态改变回调此方法
*
* @param currentState
* 当前开关的最新状态
*/
void onToggleStateChange(boolean currentState);
}
