可滑动的开关按钮

1、面向对象设计MyToggleButton的方法

1、创建MyToggleButton

public class MyToggleButton extends View {public MyToggleButton(Context context, AttributeSet attrs) {super(context, attrs);}}

2、在activity_main.xml布局中使用MyToggleButton，如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:layout_margin="16dp" >    <com.itheima.togglebutton.MyToggleButton        android:id="@+id/toggle_button"        android:layout_width="wrap_content"        android:layout_height="wrap_content"/></RelativeLayout>

3、用面向对象的方式去设计MyToggleButton应该拥有哪些方法，修改MainActivity.java，如下：

protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);MyToggleButton toggleButton = (MyToggleButton) findViewById(R.id.toggle_button);// 设置滑动开关的背景图片和滑块图片toggleButton.setSwitchImage(R.drawable.slide_background, R.drawable.slide_icon);// 设置滑动开发的状态toggleButton.setState(false);// 设置滑动开关的监听器toggleButton.setOnStateChangedListener(new OnStateChangedListener() {@Overridepublic void onStateChanged(boolean state) {Toast.makeText(MainActivity.this, state ? "开" : "关", 0).show();}});}

MyToggleButton.java如下：

public class MyToggleButton extends View {private OnStateChangedListener listener;private boolean state;private Bitmap slideBackground;private Bitmap slideIcon;public MyToggleButton(Context context, AttributeSet attrs) {super(context, attrs);}/** * 设置开关图片 * @param slideBackgroundResId 滑块背景图片资源id * @param slideIconResId 滑块图片资源id */public void setSwitchImage(int slideBackgroundResId, int slideIconResId) {slideBackground = BitmapFactory.decodeResource(getResources(), slideBackgroundResId);slideIcon = BitmapFactory.decodeResource(getResources(), slideIconResId);}/** 设置滑块状态，开或者关 */public void setState(boolean state) {this.state = state;}/** 设置状态改变的监听器 */public void setOnStateChangedListener(OnStateChangedListener listener) {this.listener = listener;}/** 开关状态改变的监听器 */public interface OnStateChangedListener {/** 当开关状态发生改变时 */void onStateChanged(boolean state);}}

运行查看效果，结果什么也看不见，因为我们没有对View进行mesure和draw的操作

2、onMeasure

1、获取滑块背景和滑块icon的宽高，如下红色为新增代码：

public void setSwitchImage(int slideBackgroundResId, int slideIconResId) {slideBackground = BitmapFactory.decodeResource(getResources(), slideBackgroundResId);slideIcon = BitmapFactory.decodeResource(getResources(), slideIconResId);// 获取滑块背景图片宽高backgroundWidth = slideBackground.getWidth();backgroundHeight = slideBackground.getHeight();// 获取滑块icon图片宽高iconWidth = slideIcon.getWidth();iconHeight = slideIcon.getHeight();}

2、测量MyToggleButton大小，让其大小与滑块背景宽高一样，代码如下：

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {// super.onMeasure(widthMeasureSpec, heightMeasureSpec);setMeasuredDimension(backgroundWidth, backgroundHeight);}

再次运行，还是看不到效果，因为的显示是通过onDraw方法画出来的。

3、onDraw

View的显示都是通过onDraw画出来的，如下：

private int iconLeft;protected void onDraw(Canvas canvas) {// 画背景int left = 0;int top = 0;canvas.drawBitmap(slideBackground, left, top, null);// 画滑块int iconLeft = 0;canvas.drawBitmap(slideIcon, iconLeft, 0, null);

 

4、滑动手指同时滑动滑块

原理：滑块以手指触摸点作为其中心点显示，滑动时slideIcon需要重新画出来，画的时候改变其left坐标即可，如何计算left值呢？

滑动的时候计算滑块left = 触摸位置event.getX() – 滑块宽 / 2

原理了解后实现触摸的处理，如下：

public boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:case MotionEvent.ACTION_MOVE:// 滑动的时候计算滑块left = 触摸位置event.getX() – 滑块宽 / 2iconLeft = (int) (event.getX() - iconWidth / 2);break;case MotionEvent.ACTION_UP:break;}invalidate();// 系统内部会重新调用onDraw方法return true;}

运行查看效果，slideIcon会根据手机的滑动而滑动，但是会滑超出范围

 

在计算iconLeft的时候要判断是否超出最小值和最大值，如果是往左滑，小值是0，如果是向右滑最大值是多少呢？分析如下：

 

滑块往右移动时，滑块left的最大值= 背景宽– 滑块宽

了解了原理后，修改onTouchEvnet方法，如下，红色为新增的代码：

public boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:case MotionEvent.ACTION_MOVE:// 滑动的时候计算滑块left = 触摸位置event.getX() – 滑块宽 / 2iconLeft = (int) (event.getX() - iconWidth / 2);// 预防超出范围if (iconLeft < 0) {// 往左移时最小值是0iconLeft = 0;} else if (iconLeft > backgroundWidth - iconWidth) {// 滑块往右移动时，滑块left的最大值 = 背景宽 – 滑块宽iconLeft = backgroundWidth - iconWidth;}break;case MotionEvent.ACTION_UP:break;}invalidate();// 系统内部会重新调用onDraw方法return true;}

5、手指抬起时滑块定位

    

 

手指抬起时，滑块要么定位到开，要么定位到关的状态，要定位到最左边还是定位到最右边取决于滑块离左边比较近，还是离右边比较近，那如何知道离左边比较近还是离右边比较近呢？

 

手指松开时，计算滑块应该滑到最左边，还是滑到最右边： 如果手指抬起的位置 < 背景宽 / 2，把滑块滑到最左边，否则滑到最右边。

了解了原理之后，实现代码如下：

public boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:case MotionEvent.ACTION_MOVE:// 。。。以前的代码break;case MotionEvent.ACTION_UP:/* 手指松开时，计算滑块应该滑到最左边，还是滑到最右边：如果手指抬起的位置 < 背景宽 / 2，把滑块滑到最左边，否则滑到最右边 */if (event.getX() < backgroundWidth / 2) {iconLeft = 0;} else {iconLeft = backgroundWidth - iconWidth;}break;}invalidate();// 系统内部会重新调用onDraw方法return true;}

6、setState方法

通过setState方法可以让开关按钮直接滑到开或者关的状态，实现代码如下：

/** 设置滑块状态，开或者关 */public void setState(boolean state) {this.state = state;if (state) {// 如果是开的状态，则把滑块画到最右边iconLeft = backgroundWidth - iconWidth;} else {// 如果是关的状态，则把滑块画到最左边iconLeft = 0;}invalidate();// 系统内部会重新调用onDraw方法}

7、监听开关按钮的状态

原理，用一个成员变量保存状态，当生产一个状态时就跟原来的状态比一下，如果不相同，则状态发生了改变。实现代码如下：

/** 设置滑块状态，开或者关 */public void setState(boolean state) {checkState(state);if (state) {// 如果是开的状态，则把滑块画到最右边iconLeft = backgroundWidth - iconWidth;} else {// 如果是关的状态，则把滑块画到最左边iconLeft = 0;}invalidate();// 系统内部会重新调用onDraw方法}public void checkState(boolean currentState) {if (this.state != currentState) {// 如果状态发生了改变this.state = currentState;if (listener != null) {// 如果有监听器listener.onStateChanged(currentState);}}}public boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:case MotionEvent.ACTION_MOVE:// 。。。以前的代码case MotionEvent.ACTION_UP:/* 手指松开时，计算滑块应该滑到最左边，还是滑到最右边：   如果手指抬起的位置 < 背景宽 / 2，把滑块滑到最左边，否则滑到最右边 */if (event.getX() < backgroundWidth / 2) {iconLeft = 0;checkState(false);} else {iconLeft = backgroundWidth - iconWidth;checkState(true);}break;}invalidate();// 系统内部会重新调用onDraw方法return true;}

8、自定义xml属性

1、 在values目录创建attrs.xml文件

format=”reference”代表是类型引用，比如@drawable/abc

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="MyToggleButton">        <attr name="slideBackground" format="reference" />        <attr name="slideIcon" format="reference" />        <attr name="state" format="boolean" />    </declare-styleable></resources>

2、 在根布局中声明命名空间

xaiozhuzhu是自定义的，res-auto:最好写上自己的包名

xmlns:xiaozhuzhu="http://schemas.android.com/apk/res-auto"

3、 在xml中使用自定义属性

<com.itheima.togglebutton.MyToggleButton        android:id="@+id/toggle_button"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        itheima:slideBackground="@drawable/slide_background2"        itheima:slideIcon="@drawable/slide_icon2"        itheima:state="false"/>

4、 在代码中读取自定义属性

public MyToggleButton(Context context, AttributeSet attrs) {super(context, attrs);String namespace = "http://schemas.android.com/apk/res-auto";// 读取滑块背景和滑块icon属性int slideBackgroundResId = attrs.getAttributeResourceValue(namespace, "slideBackground", -1);int slideIconResId = attrs.getAttributeResourceValue(namespace, "slideIcon", -1);if (slideBackgroundResId != -1 && slideIconResId != -1) {setSwitchImage(slideBackgroundResId, slideIconResId);}// 读取开关状态属性boolean isOpen = attrs.getAttributeBooleanValue(namespace, "state", false);setState(isOpen);}