目录
前言一、原理
二、实现
1、自定义View类MyToggle
1)属性字段
2)覆写View类的构造方法
3)创建init方法
4)手指触摸事件回调方法onTouch
5)界面重绘方法onDraw
6)计算开关的宽高
7)设置图片资源信息
8)设置开关按钮的状态
9)自定义开关状态监听器
10)设置开关监听器
11)MyToggle完整
2、MainActivity
3、布局文件activity_main.xml
4、androidManifest.xml
三、运行效果
四、温馨提示
前言
很多时候,我们在很多无论是Android还是IOS的APP中都会遇到这样的一种效果,有一个按钮,我们点击一下,便会滑动一下,一会显示“开”,一会显示“关”,这便是开关按钮了,比如:很多Android手机的设置功能里,就有很多功能是用开关按钮实现的,那么这些开关按钮时如何实现的呢?下面,就让我们一起来实现这个功能吧。
一、原理
我们在界面的某一个区域里放置一个背景图A,这个图片一边为“开”,一边为“关”,在这个图片上放置一个图片B,图B大约为图A的一半,恰好可以覆盖掉图A上的“开”或者“关”,当我们手指点击图片的时候,图B在图A上滑动,相应的覆盖“开”或者“关”,这样就实现了开关按钮的效果。
二、实现
1、自定义View类MyToggle
这个类继承自View类同时实现了OnTouchListener接口,这个类实现的功能比较多,我们分解来看这个类。
1)属性字段
这个类中定义了不少的属性字段,每个属性字段的具体含义详见代码注释
具体实现代码如下:
//开关开启的背景图片>2)覆写View类的构造方法
我们在构造方法里完成的操作就是调用我们自己创建的init()方法
具体实现代码如下:
public>3)创建init方法
这个方法中实现的操作就是设置触摸事件。
具体实现代码如下:
//初始化方法>4)手指触摸事件回调方法onTouch
这个方法是当手指操作手机屏幕时,Android自动回调的方法,我们在这个方法中,监听手指的按下、移动和抬起事件,记录手指当前的X坐标来判断图片B的移动方向,从而实现图片B在图片A上的移动来达到按钮开和关的效果。
具体实现
@Override>5)界面重绘方法onDraw
这个方法主要实现的是界面的重绘操作。
只要的思路是:
画背景图A:
>
当前手指滑动X坐标currentX小于图A宽度的一般时,按钮背景为关闭状态;
记录滑块B的X坐标:
B滑动时:
当前手指滑动X坐标currentX大于背景图A的宽度,则B坐标为图A宽度减去图B宽度
当前手指滑动X坐标currentX小于背景图A的宽度,则B坐标为当前X坐标currentX减去滑块宽度的一半
B静止:
当按钮处于“开”状态,则B坐标为“开”状态的最左边X坐标
当按钮处于“关”状态,则B坐标为“关”状态的最左边X坐标
具体实现
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //用来记录我们滑动块的位置 int left_slip = 0; Matrix matrix = new Matrix(); Paint paint = new Paint(); if(currentX < bkgSwitchOn.getWidth() / 2){ //在画布上绘制出开关状态为关闭时的 背景图片 canvas.drawBitmap(bkgSwitchOff, matrix, paint); }else{ //在画布上绘制出开关状态为开启时的 背景图片 canvas.drawBitmap(bkgSwitchOn, matrix, paint); } if(isSlipping){//开关是否处于滑动状态 // 滑动块 是否超过了整个滑动按钮的宽度 if(currentX > bkgSwitchOn.getWidth()){ //指定滑动块的位置 left_slip = bkgSwitchOn.getWidth() - btnSlip.getWidth(); } else { //设置当前滑动块的位置 left_slip = (int) (currentX - btnSlip.getWidth() /2); } } else {//开关是否处于 不滑动状态 if(toggleStateOn){ left_slip = rect_on.left; } else { left_slip = rect_off.left; } } if(left_slip < 0){ left_slip = 0; } else if( left_slip > bkgSwitchOn.getWidth() - btnSlip.getWidth()){ left_slip = bkgSwitchOn.getWidth() - btnSlip.getWidth(); } //绘制图像 canvas.drawBitmap(btnSlip, left_slip, 0, paint); }6)计算开关的宽高
这里我通过覆写onMeasure来计算开关的宽度和高度
具体实现
//计算开关的宽高>7)设置图片资源信息
这个方法主要是供外界调用,向本类提供图片资源。
具体代码实现如下:
/**>8)设置开关按钮的状态
通过传递一个boolean类型的状态,我们在这个方法中将这个状态标识记录下来。
具体实现
/**>9)自定义开关状态监听器
我在这个类中定义了一个开关状态监听器接口OnToggleStateListener,里面有一个onToggleState方法来执行按钮的状态变化监听操作。
具体代码实现如下:
/**>10)设置开关监听器
创建setOnToggleStateListener方法,传递一个OnToggleStateListener监听器对象,通过外界创建OnToggleStateListener对象,并将OnToggleStateListener对象传递进来,我们只需要将外界传递过来的OnToggleStateListener对象记录下来,同时当我们调用OnToggleStateListener接口中的onToggleState方法时,便实现了回调外界OnToggleStateListener实现类中的onToggleState方法。
具体代码实现如下:
//设置开关监听器并将是否设置了开关监听器设置为true>11)MyToggle完整
package>lse {//开关是否处于 不滑动状态 if(toggleStateOn){ left_slip = rect_on.left; } else { left_slip = rect_off.left; } } if(left_slip < 0){ left_slip = 0; } else if( left_slip > bkgSwitchOn.getWidth() - btnSlip.getWidth()){ left_slip = bkgSwitchOn.getWidth() - btnSlip.getWidth(); } //绘制图像 canvas.drawBitmap(btnSlip, left_slip, 0, paint); } //计算开关的宽高 @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { setMeasuredDimension(bkgSwitchOn.getWidth(), bkgSwitchOn.getHeight()); } /** * 设置图片资源信息 * @param bkgSwitch_on * @param bkgSwitch_off * @param btn_Slip */ public void setImageRes(int bkgSwitch_on, int bkgSwitch_off, int btn_Slip) { bkgSwitchOn = BitmapFactory.decodeResource(getResources(), bkgSwitch_on); bkgSwitchOff = BitmapFactory.decodeResource(getResources(),bkgSwitch_off); btnSlip = BitmapFactory.decodeResource(getResources(), btn_Slip); rect_on = new Rect(bkgSwitchOn.getWidth() - btnSlip.getWidth(), 0,bkgSwitchOn.getWidth(), btnSlip.getHeight()); rect_off = new Rect(0, 0, btnSlip.getWidth(), btnSlip.getHeight()); } /** * 设置开关按钮的状态 * @param state */ public void setToggleState(boolean state) { toggleStateOn = state; } /** * 自定义开关状态监听器 * @author liuyazhuang * */ interface OnToggleStateListener { abstract void onToggleState(boolean swww.easck.comtate); } //设置开关监听器并将是否设置了开关监听器设置为true public void setOnToggleStateListener(OnToggleStateListener listener) { toggleStateListener = listener; isToggleStateListenerOn = true; } }2、MainActivity
这个类实现很简单,主要的功能就是加载界面布局,初始化界面控件,调用MyToggle类中的方法实现按钮的开关效果
具体代码实现如下:
package>3、布局文件activity_main.xml
这里我引用了自己定义的View类MyToggle。
具体代码实现如下:
<RelativeLayout>4、AndroidManifest.xml
具体
<?xml>三、运行效果


四、温馨提示
大家可以到链接下载Android自定义开关按钮实现示例完整源代码
本实例中,为了方面,我把一些文字直接写在了布局文件中和相关的类中,大家在真实的项目中要把这些文字写在string.xml文件中,在外部引用这些资源,切记,这是作为一个Android程序员最基本的开发常识和规范,我在这里只是为了方便直接写在了类和布局文件中。
到此这篇关于Android实现史上最简单自定义开关按钮的文章就介绍到这了,更多相关Android自定义开关按钮内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!










