先来张效果图

banner.gif

步骤思路

继承View

1、测量自己的宽高

2、绘制自己

3、处理触摸事件

1、继承View

public class MyToggleButton extends View {

public MyToggleButton(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

}

// 在布局文件中使用控件时 调用

public MyToggleButton(Context context, AttributeSet attrs) {

super(context, attrs);

}

// 在代码中new对象时 调用

public MyToggleButton(Context context) {

super(context);

}

｝

2、在布局中使用MyToggleButton

android:id="@+id/toggle"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

3、测量宽高

// 测量自己的宽高，把背景图片的宽高设置为自己的宽高

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

// 把背景图片的宽高设置为自己的宽高

setMeasuredDimension(backgroundBitmap.getWidth(), backgroundBitmap.getHeight());

}

// 外界设置开关背景图片资源

public void setBackgroundRes(int backgroundRes){

// 把传进来的图片资源 转换成Bitmap对象

backgroundBitmap = BitmapFactory.decodeResource(getResources(), backgroundRes);

}

4、绘制

// 外界设置滑动块图片资源

public void setSlideButtonRes(int slideButtonRes){

// 把传进来的图片资源 转换成Bitmap对象

slideButtonBitmap = BitmapFactory.decodeResource(getResources(), slideButtonRes);

}

// 绘制自己

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

// 绘制背景

canvas.drawBitmap(backgroundBitmap, 0, 0, null);

// 绘制滑动块

canvas.drawBitmap(slideButtonBitmap, 0, 0, null);

}

5、根据状态绘制滑动块

// 外界设置开关状态

public void setState(boolean state){

this.currentState = state;

}

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

// 绘制背景

canvas.drawBitmap(backgroundBitmap, 0, 0, null);

// 绘制滑动块 根据外界的设置，展示开或关

if(!currentState){// 关状态

canvas.drawBitmap(slideButtonBitmap, 0, 0, null);

}else{// 开状态

canvas.drawBitmap(slideButtonBitmap, backgroundBitmap.getWidth()-slideButtonBitmap.getWidth(), 0, null);

}

}

6、处理事件，让滑动块随手指移动

@Override

public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction()) {

case MotionEvent.ACTION_DOWN:

isTouching = true;

// 获取手指触摸时相对于自己的x位置

currentX = (int) event.getX();

break;

case MotionEvent.ACTION_MOVE:

currentX = (int) event.getX();

break;

case MotionEvent.ACTION_UP:

isTouching = false;

currentX = (int) event.getX();

break;

default:

break;

}

// 重新绘制控件，重新调用onDraw

invalidate();

return true;// 消费掉事件

}

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

// 绘制背景

canvas.drawBitmap(backgroundBitmap, 0, 0, null);

// 根据手指触摸的位置绘制滑动块图片

if(isTouching){

canvas.drawBitmap(slideButtonBitmap, currentX, 0, null);

}else{

// 绘制滑动块 根据外界的设置，展示开或关

if(!currentState){// 关状态

canvas.drawBitmap(slideButtonBitmap, 0, 0, null);

}else{// 开状态

canvas.drawBitmap(slideButtonBitmap, backgroundBitmap.getWidth()-slideButtonBitmap.getWidth(), 0, null);

}

}

}

7、让用户感觉手指触摸到了滑动块中间

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

// 绘制背景

canvas.drawBitmap(backgroundBitmap, 0, 0, null);

// 根据手指触摸的位置绘制滑动块图片

if(isTouching){

int left = currentX-slideButtonBitmap.getWidth()/2;// 让滑动块画的中心画到手指触摸的位置

// 限制滑动块的滑动范围

if(left<0){// 如果超出左边，直接绘制到0位置

left = 0;

}else if(left>backgroundBitmap.getWidth()-slideButtonBitmap.getWidth()){

left = backgroundBitmap.getWidth()-slideButtonBitmap.getWidth();

}

canvas.drawBitmap(slideButtonBitmap, left, 0, null);

}else{

......

}

}

8、手指抬起时，通过改变当前状态，让滑动块根据状态绘制

case MotionEvent.ACTION_UP:

isTouching = false;

currentX = (int) event.getX();

// 手指抬起时，根据手指触摸的位置与背景图片一半比较，离哪边近，滑动块就滑动到哪

currentState = currentX>backgroundBitmap.getWidth()/2;

break;

default:

break;

}

9、对外暴露监听，让外界监听到开关的状态变化

* 1、暴露接口

// 对外暴露开关状态发生变化的接口

public interface OnToggleButtonStateChangeListener{

// 当开关状态发生变化时 调用

void onStateChanged(boolean state);

}

* 2、对外提供监听器

// 让外界设置状态变化的监听器

public void setOnToggleButtonStateChangeListener(OnToggleButtonStateChangeListener listener){

this.mListener = listener;

}

* 3、当状态发生变化时调用监听器的回调方法

case MotionEvent.ACTION_UP:

isTouching = false;

currentX = (int) event.getX();

// 手指抬起时，根据手指触摸的位置与背景图片一半比较，离哪边近，滑动块就滑动到哪

// 当状态发生变化时，调用外界传递进来的监听器的onStateChanged

boolean tempState = currentX>backgroundBitmap.getWidth()/2;

if(tempState!=currentState){// 状态发生变化

currentState = tempState;

if(mListener!=null){

mListener.onStateChanged(currentState);

}

}

break;

* 4、外界监听开关状态

OnToggleButtonStateChangeListener listener = new OnToggleButtonStateChangeListener() {

@Override

public void onStateChanged(boolean state) {

// 处理业务

Toast.makeText(getApplicationContext(), ""+state, 0).show();

}

};

toggle.setOnToggleButtonStateChangeListener(listener);

10、自定义属性

* 1、定义属性

/toggle94/res/values/attrs.xml

* 2、在布局中使用属性，要先声明命名空间

xmlns:itheima="http://schemas.android.com/apk/res/com.itheima.toggle94"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context=".MainActivity" >

android:id="@+id/toggle"

itheima:backgroundRes="@drawable/switch_background"

itheima:slideButtonRes="@drawable/slide_button_background"

itheima:state="false"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

* 3、代码中获取自定义属性值，设置给控件

// 在布局文件中使用控件时 调用

public MyToggleButton(Context context, AttributeSet attrs) {

super(context, attrs);

// 从布局文件中获取控件的自定义属性值

String namespace = "http://schemas.android.com/apk/res/com.itheima.toggle94";

int backgroundResValue = attrs.getAttributeResourceValue(namespace, "backgroundRes", 0);

setBackgroundRes(backgroundResValue);

int slideButtonResValue = attrs.getAttributeResourceValue(namespace, "slideButtonRes", 0);

setSlideButtonRes(slideButtonResValue);

currentState = attrs.getAttributeBooleanValue(namespace, "state", false);

}