android自定义控件滑动开关详解
该文章为原创，转载请注明出处http://1.crazychen.sinaapp.com/?p=600
最近研究了一下android的自定义滑动开关，查找了网上的文章，都说得不是很详细，虽然思路大致相同，但是要通过动手实验一下，整理出自己的思路才懂。这篇文章希望能帮助其他朋友，实现这个功能。
首先，让我们来创建一个SlipButton类，让它集成View类型和OnTouchListener接口，这个SlipButton就是我们自定义的滑动开关类，实现它的三个构造方法（必须哦），还有重载onTouch（）方法
public class SlipButton extends View implements OnTouchListener{
public SlipButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public SlipButton(Context context, AttributeSet attrs) {
super(context, attrs);
}
public SlipButton(Context context) {
super(context);
}
@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouch(View v, MotionEvent event) {
return false;
}
}
我们需要三张图片，分别是开（男），关（女），还有滑动的圆块
为此，我获取这个三个资源对象
private Bitmap bg_on, bg_off, slip_btn;
创建一个init()方法来初始化
@SuppressLint("ClickableViewAccessibility")
private void init(){
bg_on = BitmapFactory.decodeResource(getResources(), R.drawable.s_n_info_icon_men);
bg_off = BitmapFactory.decodeResource(getResources(), R.drawable.s_n_info_icon_women);
slip_btn = BitmapFactory.decodeResource(getResources(), R.drawable.s_btn_address_icon);
setOnTouchListener(this);
}
然后在每个构造方法里面，都调用init()。同时实现监听触摸事件
public class SlipButton extends View implements OnTouchListener{
private Bitmap bg_on, bg_off, slip_btn;
public SlipButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
public SlipButton(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public SlipButton(Context context) {
super(context);
init();
}
@SuppressLint("ClickableViewAccessibility")
private void init(){
bg_on = BitmapFactory.decodeResource(getResources(), R.drawable.s_n_info_icon_men);
bg_off = BitmapFactory.decodeResource(getResources(), R.drawable.s_n_info_icon_women);
slip_btn = BitmapFactory.decodeResource(getResources(), R.drawable.s_btn_address_icon);
setOnTouchListener(this);
}
@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouch(View v, MotionEvent event) {
return false;
}
}
接下面，我们先把开关画出来。创建activity_main.xml如下
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<com.example.androidtest.SlipButton
android:id="@+id/slipButton"
android:layout_width="80dip"
android:layout_height="30dip"
android:layout_marginTop="200dip"
android:layout_marginLeft="200dip"
/>
</LinearLayout>
至于Activity部分，只要setContentView(R.layout.activity_main);就好了，相信大家都明白
然后在，我们复写View的onDraw（）方法
@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Matrix matrix = new Matrix();
Paint paint = new Paint();
canvas.drawBitmap(bg_off, matrix, paint);//画出关闭时的背景
canvas.drawBitmap(slip_btn, 0, 0, paint);//画出按钮
}
我们启动程序，看看效果如下
接下来就是重头戏部分了哦，我们来理清楚逻辑。
定义两个属性
private float downX, nowX=0;// 按下时的x,当前的x
首先是开关的状态由什么决定？
有两种情况，一种是滑块在拖动过程中，这时如果当前的x坐标（nowX）大于背景图片的1/2，就应该是开状态，如果小于1/2，就是关状态
另外一种就是触摸抬起的时，如果抬起时的nowX大于背景图片的1/2，就应该是开状态，如果小于1/2，就是关状态
综上，我们可以知道1/2就是区分点，改写onDraw
@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Matrix matrix = new Matrix();
Paint paint = new Paint();
if(nowX>bg_on.getWidth()/2)
canvas.drawBitmap(bg_on, matrix, paint);//画出关闭时的背景
else
canvas.drawBitmap(bg_off, matrix, paint);//画出关闭时的背景
canvas.drawBitmap(slip_btn, 0, 0, paint);//画出按钮
}
然后我们在onTouch方法里面，来获得nowX
@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouch(View v, MotionEvent event) {
switch(event.getAction()){
case MotionEvent.ACTION_MOVE://滑动时
nowX = event.getX();
break;
case MotionEvent.ACTION_DOWN://按下
downX = event.getX();
nowX = downX;
break;
case MotionEvent.ACTION_UP://触摸抬起
nowX = event.getX();
break;
default:
return false;
}
invalidate();
return true;
}
这样我们就是实现了左右点击和滑动的背景切换了，大家可以看下效果。同时要说明，这里的ACTION_DOWN事件，其实没有实际作用。
背景切换了，下面我让滑块动起来，滑块的位置是由
canvas.drawBitmap(slip_btn, x, 0, paint);//画出按钮
其中的x决定的。为了却别滑动，和抬起，我创建一个标志
private boolean onSlip = false;
当onSlip=true时，说明是滑动状态。
我们分两种情况来讨论，先说抬起的情况。（抬起就是，你按按钮的另外一边，然后送手，状态就会切换，这个过程按钮没有滑动，而是从一边，直接到另外一边）
抬起要注意一个问题，就是你抬起时的nowX可能超出背景的宽度的1/2，这时，我们将nowX设置为bg_on.getWidth()-slip_btn.getWidth();就是背景长度减去按钮长度。也可能小于1/2，这时，我们将nowX设置为0
@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouch(View v, MotionEvent event) {
switch(event.getAction()){
case MotionEvent.ACTION_MOVE://滑动时
nowX = event.getX();
break;
case MotionEvent.ACTION_DOWN://按下
downX = event.getX();
nowX = downX;
break;
case MotionEvent.ACTION_UP://触摸抬起
onSlip = false;
if(event.getX()>= bg_on.getWidth()/2){//超出1/2
nowX = bg_on.getWidth() - slip_btn.getWidth();
}else{
nowX = 0;
}
break;
default:
return false;
}
invalidate();
return true;
}
然后稍微修改onDraw方法
@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Matrix matrix = new Matrix();
Paint paint = new Paint();
float x = slip_btn.getWidth();
if(nowX>bg_on.getWidth()/2)
canvas.drawBitmap(bg_on, matrix, paint);//画出关闭时的背景
else
canvas.drawBitmap(bg_off, matrix, paint);//画出关闭时的背景
if(onSlip){
}else{
x = nowX;
}
canvas.drawBitmap(slip_btn, x, 0, paint);//画出按钮
}
OK，这里的抬起事件解决了，大家可以试试效果。
但是我们很快发现，拖动有问题，虽然拖出界以后会弹回来，所以我接下去将拖动的情况
在拖动时，我们要限制按钮的位置，不能越界，首先是右边的界限，判断依据是nowX不能超过bg_on.getWidth() - slip_btn.getWidth()，超过是，我们就将x设置为bg_on.getWidth() - slip_btn.getWidth()
其他情况应该是x = nowX - slip_btn.getWidth()/2;,但是这时x不能小于0，小于时，我设置x=0
先修改一下onTouch方法，将滑动时的onSlip设置为true
@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouch(View v, MotionEvent event) {
switch(event.getAction()){
case MotionEvent.ACTION_MOVE://滑动时
onSlip = true;
nowX = event.getX();
break;
case MotionEvent.ACTION_DOWN://按下
onSlip = true;
downX = event.getX();
nowX = downX;
break;
case MotionEvent.ACTION_UP://触摸抬起
onSlip = false;
if(event.getX()>= bg_on.getWidth()/2){//超出1/2
nowX = bg_on.getWidth() - slip_btn.getWidth();
}else{
nowX = 0;
}
break;
default:
return false;
}
invalidate();
return true;
}
在修改ondraw方法
@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Matrix matrix = new Matrix();
Paint paint = new Paint();
float x = slip_btn.getWidth();
if(nowX>bg_on.getWidth()/2)
canvas.drawBitmap(bg_on, matrix, paint);//画出关闭时的背景
else
canvas.drawBitmap(bg_off, matrix, paint);//画出关闭时的背景
if(onSlip){
if(nowX>bg_on.getWidth() - slip_btn.getWidth()){
x = bg_on.getWidth()-slip_btn.getWidth();
} else{
x = nowX - slip_btn.getWidth()/2;
if(x<0) x=0;
}
}else{
x = nowX;
}
canvas.drawBitmap(slip_btn, x, 0, paint);//画出按钮
}
OK，到这里为止，我们成功实现了滑动按钮，应该说思路还是简单清晰的。是不是SOeasy!
再次贴出完整代码
public class SlipButton extends View implements OnTouchListener{
private Bitmap bg_on, bg_off, slip_btn;
private float downX, nowX=0;// 按下时的x,当前的x
private boolean onSlip = false;
public SlipButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
public SlipButton(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public SlipButton(Context context) {
super(context);
init();
}
@SuppressLint("ClickableViewAccessibility")
private void init(){
bg_on = BitmapFactory.decodeResource(getResources(), R.drawable.s_n_info_icon_men);
bg_off = BitmapFactory.decodeResource(getResources(), R.drawable.s_n_info_icon_women);
slip_btn = BitmapFactory.decodeResource(getResources(), R.drawable.s_btn_address_icon);
setOnTouchListener(this);
}
@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Matrix matrix = new Matrix();
Paint paint = new Paint();
float x = slip_btn.getWidth();
if(nowX>bg_on.getWidth()/2)
canvas.drawBitmap(bg_on, matrix, paint);//画出关闭时的背景
else
canvas.drawBitmap(bg_off, matrix, paint);//画出关闭时的背景
if(onSlip){
if(nowX>bg_on.getWidth() - slip_btn.getWidth()){
x = bg_on.getWidth()-slip_btn.getWidth();
} else{
x = nowX - slip_btn.getWidth()/2;
if(x<0) x=0;
}
}else{
x = nowX;
}
canvas.drawBitmap(slip_btn, x, 0, paint);//画出按钮
}
@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouch(View v, MotionEvent event) {
switch(event.getAction()){
case MotionEvent.ACTION_MOVE://滑动时
onSlip = true;
nowX = event.getX();
break;
case MotionEvent.ACTION_DOWN://按下
onSlip = true;
downX = event.getX();
nowX = downX;
break;
case MotionEvent.ACTION_UP://触摸抬起
onSlip = false;
if(event.getX()>= bg_on.getWidth()/2){//超出1/2
nowX = bg_on.getWidth() - slip_btn.getWidth();
}else{
nowX = 0;
}
break;
default:
return false;
}
invalidate();
return true;
}
}
下面我在为滑动按钮添加回调事件，便于Activity的监听
public interface OnChangedListener{
public void OnChanged(SlipButton slipButton, boolean checkState);
}
增加一个给外界的接口
然后Activity继承这个接口，实现接口里面的方法
package com.example.androidtest;
import java.io.File;
import org.apache.http.Header;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;
import com.example.androidtest.SlipButton.OnChangedListener;
import com.loopj.android.http.AsyncHttpClient;
import com.loopj.android.http.AsyncHttpResponseHandler;
import com.loopj.android.http.RequestParams;
public class MainActivity extends Activity implements OnChangedListener{
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if(keyCode == KeyEvent.KEYCODE_BACK){
GGView.enable=false;
System.exit(0);
}
return true;
}
@Override
public void OnChanged(SlipButton slipButton, boolean checkState) {
// TODO Auto-generated method stub
}
}
在Activity里面，我们再获得滑动按钮对象，
SlipButton slipButton = (SlipButton)findViewById(R.id.slipButton);
同时，我们在SlipButton里面，创建一个listener，还有一个表示按钮状态的boolean
private OnChangedListener listener; private boolean nowStatus = false;
初始化listner,我增加一个方法
public void setOnChangedListener(OnChangedListener listener){
this.listener = listener;
}
然后在Activity里面，就看把Activity传进去，当listner了
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SlipButton slipButton = (SlipButton)findViewById(R.id.slipButton);
slipButton.setOnChangedListener(this);
}
当然，每次状态改变的时候，我们要通知listner，在SlipeButton里面
@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouch(View v, MotionEvent event) {
switch(event.getAction()){
case MotionEvent.ACTION_MOVE://滑动时
onSlip = true;
nowX = event.getX();
break;
case MotionEvent.ACTION_DOWN://按下
onSlip = true;
downX = event.getX();
nowX = downX;
break;
case MotionEvent.ACTION_UP://触摸抬起
onSlip = false;
if(event.getX()>= bg_on.getWidth()/2){//超出1/2
nowStatus = true;
nowX = bg_on.getWidth() - slip_btn.getWidth();
}else{
nowStatus = false;
nowX = 0;
}
if(listener!=null)
listener.OnChanged(SlipButton.this, nowStatus);
break;
default:
return false;
}
invalidate();
return true;
}
把当前状态传给listener，这样Activity就可以获得当前状态了，然后在Activity里面覆写接口方法就可以了
public class MainActivity extends Activity implements OnChangedListener{
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SlipButton slipButton = (SlipButton)findViewById(R.id.slipButton);
slipButton.setOnChangedListener(this);
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if(keyCode == KeyEvent.KEYCODE_BACK){
GGView.enable=false;
System.exit(0);
}
return true;
}
@Override
public void OnChanged(SlipButton slipButton, boolean checkState) {
if(checkState){
System.out.println("男");
}else{
System.out.println("女");
}
}
}
完成监听了哦，这里的回调思想，大家好好体会。
下面贴出完整代码
package com.example.androidtest;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
public class SlipButton extends View implements OnTouchListener{
private Bitmap bg_on, bg_off, slip_btn;
private float downX, nowX=0;// 按下时的x,当前的x
private boolean onSlip = false;
private OnChangedListener listener;
private boolean nowStatus = false;
public SlipButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
public SlipButton(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public SlipButton(Context context) {
super(context);
init();
}
@SuppressLint("ClickableViewAccessibility")
private void init(){
bg_on = BitmapFactory.decodeResource(getResources(), R.drawable.s_n_info_icon_men);
bg_off = BitmapFactory.decodeResource(getResources(), R.drawable.s_n_info_icon_women);
slip_btn = BitmapFactory.decodeResource(getResources(), R.drawable.s_btn_address_icon);
setOnTouchListener(this);
}
@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Matrix matrix = new Matrix();
Paint paint = new Paint();
float x = slip_btn.getWidth();
if(nowX>bg_on.getWidth()/2)
canvas.drawBitmap(bg_on, matrix, paint);//画出关闭时的背景
else
canvas.drawBitmap(bg_off, matrix, paint);//画出关闭时的背景
if(onSlip){
if(nowX>bg_on.getWidth() - slip_btn.getWidth()){
x = bg_on.getWidth()-slip_btn.getWidth();
} else{
x = nowX - slip_btn.getWidth()/2;
if(x<0) x=0;
}
}else{
x = nowX;
}
canvas.drawBitmap(slip_btn, x, 0, paint);//画出按钮
}
@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouch(View v, MotionEvent event) {
switch(event.getAction()){
case MotionEvent.ACTION_MOVE://滑动时
onSlip = true;
nowX = event.getX();
break;
case MotionEvent.ACTION_DOWN://按下
onSlip = true;
downX = event.getX();
nowX = downX;
break;
case MotionEvent.ACTION_UP://触摸抬起
onSlip = false;
if(event.getX()>= bg_on.getWidth()/2){//超出1/2
nowStatus = true;
nowX = bg_on.getWidth() - slip_btn.getWidth();
}else{
nowStatus = false;
nowX = 0;
}
if(listener!=null)
listener.OnChanged(SlipButton.this, nowStatus);
break;
default:
return false;
}
invalidate();
return true;
}
public void setOnChangedListener(OnChangedListener listener){
this.listener = listener;
}
public interface OnChangedListener{
public void OnChanged(SlipButton slipButton, boolean checkState);
}
}
package com.example.androidtest;
import java.io.File;
import org.apache.http.Header;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;
import com.example.androidtest.SlipButton.OnChangedListener;
import com.loopj.android.http.AsyncHttpClient;
import com.loopj.android.http.AsyncHttpResponseHandler;
import com.loopj.android.http.RequestParams;
public class MainActivity extends Activity implements OnChangedListener{
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SlipButton slipButton = (SlipButton)findViewById(R.id.slipButton);
slipButton.setOnChangedListener(this);
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if(keyCode == KeyEvent.KEYCODE_BACK){
GGView.enable=false;
System.exit(0);
}
return true;
}
@Override
public void OnChanged(SlipButton slipButton, boolean checkState) {
if(checkState){
System.out.println("男");
}else{
System.out.println("女");
}
}
}