滑动开关按钮SlideSwich

原创

wx5aae83353cec4 2022-11-14 19:42:30 ©著作权

©著作权归作者所有：来自51CTO博客作者wx5aae83353cec4的原创作品，请联系作者获取转载授权，否则将追究法律责任

iphone上有开关控件，很漂亮，其实android4.0以后也有switch控件，但是只能用在4.0以后的系统中，这就失去了其使用价值，而且我觉得它的界面也不是很好看。最近看到了百度魔拍上面的一个控件，觉得很漂亮啊，然后反编译了下，尽管没有混淆过，但是还是不好读，然后就按照自己的想法写了个，功能和百度魔拍类似。

下面是百度魔拍的效果和SlideSwitch的效果

滑动开关按钮SlideSwich_控件

滑动开关按钮SlideSwich_ide_02

apk下载地址：http://home.ustc.edu.cn/~voa/res/HelloJni.apk

2.原理

继承自view类，override其onDraw函数，把两个背景图（一个灰的一个红的）和一个开关图（圆开关）通过canvas画出来；同时override其onTouchEvent函数，实现滑动效果；最后开启一个线程做动画，实现缓慢滑动的效果。

3. 代码

//SlideSwitch.java

[java] view plain copy

package com.example.hellojni;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
/**
* SlideSwitch 仿iphone滑动开关组件，仿百度魔图滑动开关组件
* 组件分为三种状态：打开、关闭、正在滑动<br/>
* 使用方法：
* <pre>SlideSwitch slideSwitch = new SlideSwitch(this);
*slideSwitch.setOnSwitchChangedListener(onSwitchChangedListener);
*linearLayout.addView(slideSwitch);
</pre>
注：也可以加载在xml里面使用
* @author scott
*
*/
public class SlideSwitch extends View
{
public static final String TAG = "SlideSwitch";
public static final int SWITCH_OFF = 0;//关闭状态
public static final int SWITCH_ON = 1;//打开状态
public static final int SWITCH_SCROLING = 2;//滚动状态
//用于显示的文本
private String mOnText = "打开";
private String mOffText = "关闭";
private int mSwitchStatus = SWITCH_OFF;
private boolean mHasScrolled = false;//表示是否发生过滚动
private int mSrcX = 0, mDstX = 0;
private int mBmpWidth = 0;
private int mBmpHeight = 0;
private int mThumbWidth = 0;
private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
private OnSwitchChangedListener mOnSwitchChangedListener = null;
//开关状态图
Bitmap mSwitch_off, mSwitch_on, mSwitch_thumb;
public SlideSwitch(Context context)
{
this(context, null);
}
public SlideSwitch(Context context, AttributeSet attrs)
{
super(context, attrs);
init();
}
public SlideSwitch(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
init();
}
//初始化三幅图片
private void init()
{
Resources res = getResources();
mSwitch_off = BitmapFactory.decodeResource(res, R.drawable.bg_switch_off);
mSwitch_on = BitmapFactory.decodeResource(res, R.drawable.bg_switch_on);
mSwitch_thumb = BitmapFactory.decodeResource(res, R.drawable.switch_thumb);
mBmpWidth = mSwitch_on.getWidth();
mBmpHeight = mSwitch_on.getHeight();
mThumbWidth = mSwitch_thumb.getWidth();
}
@Override
public void setLayoutParams(LayoutParams params)
{
params.width = mBmpWidth;
params.height = mBmpHeight;
super.setLayoutParams(params);
}
/**
* 为开关控件设置状态改变监听函数
* @param onSwitchChangedListener 参见 {@link OnSwitchChangedListener}
*/
public void setOnSwitchChangedListener(OnSwitchChangedListener onSwitchChangedListener)
{
mOnSwitchChangedListener = onSwitchChangedListener;
}
/**
* 设置开关上面的文本
* @param onText 控件打开时要显示的文本
* @param offText 控件关闭时要显示的文本
*/
public void setText(final String onText, final String offText)
{
mOnText = onText;
mOffText =offText;
invalidate();
}
/**
* 设置开关的状态
* @param on 是否打开开关打开为true 关闭为false
*/
public void setStatus(boolean on)
{
mSwitchStatus = ( on ? SWITCH_ON : SWITCH_OFF);
}
@Override
public boolean onTouchEvent(MotionEvent event)
{
int action = event.getAction();
"onTouchEvent x=" + event.getX());
switch (action) {
case MotionEvent.ACTION_DOWN:
int) event.getX();
break;
case MotionEvent.ACTION_MOVE:
int) event.getX(), 10);
62);
if(mSrcX == mDstX)
return true;
true;
new AnimationTransRunnable(mSrcX, mDstX, 0);
new Thread(aTransRunnable).start();
mSrcX = mDstX;
break;
case MotionEvent.ACTION_UP:
if(mHasScrolled == false)//如果没有发生过滑动，就意味着这是一次单击过程
{
1);
int xFrom = 10, xTo = 62;
if(mSwitchStatus == SWITCH_OFF)
{
62;
10;
}
new AnimationTransRunnable(xFrom, xTo, 1);
new Thread(runnable).start();
}
else
{
invalidate();
false;
}
//状态改变的时候回调事件函数
if(mOnSwitchChangedListener != null)
{
this, mSwitchStatus);
}
break;
default:
break;
}
return true;
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh)
{
super.onSizeChanged(w, h, oldw, oldh);
}
@Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
//绘图的时候内部用到了一些数值的硬编码，其实不太好，
//主要是考虑到图片的原因，图片周围有透明边界，所以要有一定的偏移
//硬编码的数值只要看懂了代码，其实可以理解其含义，可以做相应改进。
14);
mPaint.setTypeface(Typeface.DEFAULT_BOLD);
if(mSwitchStatus == SWITCH_OFF)
{
null, null, mSwitch_off);
null, null, mSwitch_thumb);
105, 105, 105));
0);
0, 20, mPaint);
}
else if(mSwitchStatus == SWITCH_ON)
{
null, null, mSwitch_on);
int count = canvas.save();
0);
null, null, mSwitch_thumb);
mPaint.setColor(Color.WHITE);
canvas.restoreToCount(count);
17, 20, mPaint);
}
else //SWITCH_SCROLING
{
35 ? SWITCH_ON : SWITCH_OFF;
new Rect(0, 0, mDstX, mBmpHeight), new Rect(0, 0, (int)mDstX, mBmpHeight), mSwitch_on);
mPaint.setColor(Color.WHITE);
17, 20, mPaint);
int count = canvas.save();
0);
new Rect(mDstX, 0, mBmpWidth, mBmpHeight),
new Rect(0, 0, mBmpWidth - mDstX, mBmpHeight), mSwitch_off);
canvas.restoreToCount(count);
count = canvas.save();
0, mBmpWidth, mBmpHeight);
0);
105, 105, 105));
0, 20, mPaint);
canvas.restoreToCount(count);
count = canvas.save();
2, 0);
null, null, mSwitch_thumb);
canvas.restoreToCount(count);
}
}
public void drawBitmap(Canvas canvas, Rect src, Rect dst, Bitmap bitmap)
{
null ? new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()) : dst);
new Paint();
canvas.drawBitmap(bitmap, src, dst, paint);
}
/**
* AnimationTransRunnable 做滑动动画所使用的线程
*/
private class AnimationTransRunnable implements Runnable
{
private int srcX, dstX;
private int duration;
/**
* 滑动动画
* @param srcX 滑动起始点
* @param dstX 滑动终止点
* @param duration 是否采用动画，1采用，0不采用
*/
public AnimationTransRunnable(float srcX, float dstX, final int duration)
{
this.srcX = (int)srcX;
this.dstX = (int)dstX;
this.duration = duration;
}
@Override
public void run()
{
final int patch = (dstX > srcX ? 5 : -5);
if(duration == 0)
{
this.mSwitchStatus = SWITCH_SCROLING;
this.postInvalidate();
}
else
{
"start Animation: [ " + srcX + " , " + dstX + " ]");
int x = srcX + patch;
while (Math.abs(x-dstX) > 5)
{
mDstX = x;
this.mSwitchStatus = SWITCH_SCROLING;
this.postInvalidate();
x += patch;
try
{
10);
}
catch (InterruptedException e)
{
e.printStackTrace();
}
}
mDstX = dstX;
this.mSwitchStatus = mDstX > 35 ? SWITCH_ON : SWITCH_OFF;
this.postInvalidate();
}
}
}
public static interface OnSwitchChangedListener
{
/**
* 状态改变回调函数
* @param status SWITCH_ON表示打开 SWITCH_OFF表示关闭
*/
public abstract void onSwitchChanged(SlideSwitch obj, int status);
}
}