android 自定义滑动按钮控件

在很多时候我们看到在iphone手机应用中都有滑动开启和关闭这个功能，在android40以下的版本中且没有这个功能，但是android手机在使用的多是4.0以下的系统，所以为了满足需求，我们自己设计自定的滑动开启和关闭按钮。

 

 

第一步：创建一个打开关闭的状态接口函数OnChangedListener主要创建一个打开关闭状态的抽象方法OnChanged(boolean CheckState)，本接口主要是用于空间跟activity之间的状态回调，代码如下：

 

 

Java代码

1. public interface  OnChangedListener {     
2.  abstract void OnChanged(boolean CheckState);   
3. }  

public interface  OnChangedListener {  
 abstract void OnChanged(boolean CheckState);
}

 

第二步：创建SlipButton类继承View类（基本上android的空间都是继承这个类的，所以如果我们想自己设计出好看或者有特别用途的空间都可以继承这个类然后根据需求设计和实现重写相关方法）实现OnTouchListener接口实现手势触控和滑动的控制，本类的实现在代码中有详细的描述，代码如下：

 

Java代码

1. import android.content.Context;   
2. import android.graphics.Bitmap;   
3. import android.graphics.BitmapFactory;   
4. import android.graphics.Canvas;   
5. import android.graphics.Matrix;   
6. import android.graphics.Paint;   
7. import android.graphics.Rect;   
8. import android.util.AttributeSet;   
9. import android.view.MotionEvent;   
10. import android.view.View;   
11. import android.view.View.OnTouchListener;   
12. import com.example.slidebutton.R;   
13.     
14. public class SlipButton extends View implements OnTouchListener {   
15.     
16.     private boolean NowChoose = false;// 记录当前按钮是否打开,true为打，flase为关   
17.     private boolean OnSlip = false;// 记录用户是否在滑动的变量   
18.     private float DownX, NowX;// 按下时的x,当前的x,   
19.     private Rect Btn_On, Btn_Off;// 打开和关闭状态下,游标的Rect   
20.     private boolean isChgLsnOn = false;   
21.     private OnChangedListener ChgLsn;    
22.     private Bitmap bg_on, bg_off, slip_btn;    
23.     //此构造函数在直接new控件时调用   
24.     public SlipButton(Context context) {   
25.         super(context);   
26.         // TODO Auto-generated constructor stub   
27.         init();   
28.     }   
29.        
30.     public boolean isChecked(){   
31.         return NowChoose;   
32.     }   
33.     
34.     public void setChecked(boolean check){   
35.         NowChoose = check;   
36.         invalidate();   
37.     }   
38.        
39.   //此构造函数在xml中使用控件时调用   
40.     public SlipButton(Context context, AttributeSet attrs) {   
41.         super(context, attrs);   
42.         // TODO Auto-generated constructor stub   
43.         init();   
44.     }   
45.     
46.     private void init() {// 初始资源   
47.         // 载入图片资源   
48.         bg_on = BitmapFactory.decodeResource(getResources(),   
49.                 R.drawable.images_on);   
50.         bg_off = BitmapFactory.decodeResource(getResources(),   
51.                 R.drawable.images_off);   
52.         slip_btn = BitmapFactory.decodeResource(getResources(),   
53.                 R.drawable.split_button);   
54.         // 获得�?��的Rect数据   
55.         Btn_On = new Rect(0, 0, slip_btn.getWidth(), slip_btn.getHeight());   
56.         Btn_Off = new Rect(bg_off.getWidth() - slip_btn.getWidth(), 0,   
57.                 bg_off.getWidth(), slip_btn.getHeight());   
58.         setOnTouchListener(this);// 设置触控监听，也可以直接复写OnTouchEvent   
59.     }   
60.     
61.        
62.     protected void onDraw(Canvas canvas) {// 绘图函数   
63.         // TODO Auto-generated method stub   
64.         super.onDraw(canvas);   
65.         Matrix matrix = new Matrix();   
66.         Paint paint = new Paint();   
67.         float x;   
68.         {   
69.             if ((NowX < (bg_on.getWidth() / 2))&&!NowChoose)// 滑动到前半段与后半段的背景时在此做判是否关闭或打开   
70.             {   
71.                 canvas.drawBitmap(bg_off, matrix, paint);// 画出关闭时的背景   
72.             }   
73.             else{   
74.                 canvas.drawBitmap(bg_on, matrix, paint);// 画出打开时的背景   
75.             }   
76.     
77.             if (OnSlip)// 是否是在滑动状   
78.             {   
79.                 if (NowX >= bg_on.getWidth())// 是否划出指定范围,不能让游标跑到绘制控件范围外?必须做这个判?   
80.                     x = bg_on.getWidth() - slip_btn.getWidth() / 2;// 减去游标1/2的长度   
81.                 else  
82.                     x = NowX - slip_btn.getWidth() / 2;   
83.             } else {// 非滑动状   
84.                 if (NowChoose)// 根据现在的开关状态设置画游标的位   
85.                     x = Btn_Off.left;   
86.                 else  
87.                     x = Btn_On.left;   
88.             }   
89.             if (x < 0)// 对游标位置进行异常判   
90.                 x = 0;   
91.             else if (x > bg_on.getWidth() - slip_btn.getWidth())   
92.                 x = bg_on.getWidth() - slip_btn.getWidth();   
93.             canvas.drawBitmap(slip_btn, x, 0, paint);// 画出游标.   
94.         }   
95.     }   
96.     
97.        
98.     public boolean onTouch(View v, MotionEvent event) {   
99.         // TODO Auto-generated method stub   
100.         switch (event.getAction())// 根据动作来执行代   
101.         {   
102.         case MotionEvent.ACTION_MOVE:// 滑动   
103.             NowX = event.getX();   
104.             break;   
105.         case MotionEvent.ACTION_DOWN:// 按下   
106.             if (event.getX() > bg_on.getWidth()   
107.                     || event.getY() > bg_on.getHeight())   
108.                 return false;   
109.             OnSlip = true;   
110.             DownX = event.getX();   
111.             NowX = DownX;   
112.             break;   
113.         case MotionEvent.ACTION_UP:// 松开   
114.             OnSlip = false;   
115.             boolean LastChoose = NowChoose;   
116.             if (event.getX() >= (bg_on.getWidth() / 2))   
117.                 NowChoose = true;   
118.             else  
119.                 NowChoose = false;   
120.             if (isChgLsnOn && (LastChoose != NowChoose))// 如果设置了监听器,就调用其方法..   
121.                 ChgLsn.OnChanged(NowChoose);   
122.             break;   
123.         default:   
124.     
125.         }   
126.         invalidate();// 重画控件   
127.         return true;   
128.     }   
129.     
130.     public void SetOnChangedListener(OnChangedListener l) {// 设置监听?当状态修改的时?   
131.         isChgLsnOn = true;   
132.         ChgLsn = l;   
133.     }  

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.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import com.example.slidebutton.R;
 
public class SlipButton extends View implements OnTouchListener {
 
    private boolean NowChoose = false;// 记录当前按钮是否打开,true为打，flase为关
    private boolean OnSlip = false;// 记录用户是否在滑动的变量
    private float DownX, NowX;// 按下时的x,当前的x,
    private Rect Btn_On, Btn_Off;// 打开和关闭状态下,游标的Rect
    private boolean isChgLsnOn = false;
    private OnChangedListener ChgLsn; 
    private Bitmap bg_on, bg_off, slip_btn; 
    //此构造函数在直接new控件时调用
    public SlipButton(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
        init();
    }
    
    public boolean isChecked(){
    	return NowChoose;
    }
 
    public void setChecked(boolean check){
    	NowChoose = check;
    	invalidate();
    }
    
  //此构造函数在xml中使用控件时调用
    public SlipButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        init();
    }
 
    private void init() {// 初始资源
        // 载入图片资源
        bg_on = BitmapFactory.decodeResource(getResources(),
                R.drawable.images_on);
        bg_off = BitmapFactory.decodeResource(getResources(),
                R.drawable.images_off);
        slip_btn = BitmapFactory.decodeResource(getResources(),
                R.drawable.split_button);
        // 获得�?��的Rect数据
        Btn_On = new Rect(0, 0, slip_btn.getWidth(), slip_btn.getHeight());
        Btn_Off = new Rect(bg_off.getWidth() - slip_btn.getWidth(), 0,
                bg_off.getWidth(), slip_btn.getHeight());
        setOnTouchListener(this);// 设置触控监听，也可以直接复写OnTouchEvent
    }
 
    
    protected void onDraw(Canvas canvas) {// 绘图函数
        // TODO Auto-generated method stub
        super.onDraw(canvas);
        Matrix matrix = new Matrix();
        Paint paint = new Paint();
        float x;
        {
            if ((NowX < (bg_on.getWidth() / 2))&&!NowChoose)// 滑动到前半段与后半段的背景时在此做判是否关闭或打开
            {
                canvas.drawBitmap(bg_off, matrix, paint);// 画出关闭时的背景
            }
            else{
                canvas.drawBitmap(bg_on, matrix, paint);// 画出打开时的背景
            }
 
            if (OnSlip)// 是否是在滑动状
            {
                if (NowX >= bg_on.getWidth())// 是否划出指定范围,不能让游标跑到绘制控件范围外?必须做这个判?
                    x = bg_on.getWidth() - slip_btn.getWidth() / 2;// 减去游标1/2的长度
                else
                    x = NowX - slip_btn.getWidth() / 2;
            } else {// 非滑动状
                if (NowChoose)// 根据现在的开关状态设置画游标的位
                    x = Btn_Off.left;
                else
                    x = Btn_On.left;
            }
            if (x < 0)// 对游标位置进行异常判
                x = 0;
            else if (x > bg_on.getWidth() - slip_btn.getWidth())
                x = bg_on.getWidth() - slip_btn.getWidth();
            canvas.drawBitmap(slip_btn, x, 0, paint);// 画出游标.
        }
    }
 
    
    public boolean onTouch(View v, MotionEvent event) {
        // TODO Auto-generated method stub
        switch (event.getAction())// 根据动作来执行代
        {
        case MotionEvent.ACTION_MOVE:// 滑动
            NowX = event.getX();
            break;
        case MotionEvent.ACTION_DOWN:// 按下
            if (event.getX() > bg_on.getWidth()
                    || event.getY() > bg_on.getHeight())
                return false;
            OnSlip = true;
            DownX = event.getX();
            NowX = DownX;
            break;
        case MotionEvent.ACTION_UP:// 松开
            OnSlip = false;
            boolean LastChoose = NowChoose;
            if (event.getX() >= (bg_on.getWidth() / 2))
                NowChoose = true;
            else
                NowChoose = false;
            if (isChgLsnOn && (LastChoose != NowChoose))// 如果设置了监听器,就调用其方法..
                ChgLsn.OnChanged(NowChoose);
            break;
        default:
 
        }
        invalidate();// 重画控件
        return true;
    }
 
    public void SetOnChangedListener(OnChangedListener l) {// 设置监听?当状态修改的时?
        isChgLsnOn = true;
        ChgLsn = l;
    }

 

 

第三步：设计xml文件（控件的使用也可以直接在activity中直接实例化的如：SlipButton mSlipButton=new SlipButton(this)）,在xml中使用如下：

 

Xml代码  

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent" >  
5.     <RelativeLayout  
6.         android:id="@+id/setlayout"  
7.         android:layout_width="fill_parent"  
8.         android:layout_height="wrap_content"  
9.         android:background="@drawable/ic_preference_one_normal"  
10.         android:gravity="center" >  
11.         <TextView  
12.             android:id="@+id/d_name"  
13.             android:layout_width="wrap_content"  
14.             android:layout_height="wrap_content"  
15.             android:layout_alignParentLeft="true"  
16.             android:gravity="center_vertical"  
17.             android:paddingBottom="10dip"  
18.             android:paddingTop="10dip"  
19.             android:singleLine="true"  
20.             android:text="免打扰"  
21.             android:textColor="#000000"  
22.              />  
23. <!--使用SlipButton的方法这里必须是类的包名加.类名  -->  
24.         <com.example.widget.SlipButton  
25.             android:id="@+id/on"  
26.             android:layout_width="60dip"  
27.             android:layout_height="25dip"  
28.             android:layout_alignParentRight="true"  
29.             android:layout_marginBottom="8dip"  
30.             android:layout_marginTop="8dip"  
31.             />  
32.     </RelativeLayout>  
33. </RelativeLayout>  

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <RelativeLayout
        android:id="@+id/setlayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_preference_one_normal"
        android:gravity="center" >
        <TextView
            android:id="@+id/d_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:gravity="center_vertical"
            android:paddingBottom="10dip"
            android:paddingTop="10dip"
            android:singleLine="true"
            android:text="免打扰"
            android:textColor="#000000"
             />
<!--使用SlipButton的方法这里必须是类的包名加.类名  -->
        <com.example.widget.SlipButton
            android:id="@+id/on"
            android:layout_width="60dip"
            android:layout_height="25dip"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="8dip"
            android:layout_marginTop="8dip"
            />
    </RelativeLayout>
</RelativeLayout>

 

 

第四步：编写MainActivity实现OnChangedListener接口，以便于监听打开和关闭时需要处理的事情。代码如下：

 

Java代码  

1. import android.app.Activity;   
2. import android.os.Bundle;   
3. import android.widget.Toast;   
4. import com.example.widget.OnChangedListener;   
5. import com.example.widget.SlipButton;   
6. public class MainActivity extends Activity implements OnChangedListener {   
7. private SlipButton mSlipButton;   
8.     @Override  
9.     public void onCreate(Bundle savedInstanceState) {   
10.         super.onCreate(savedInstanceState);   
11.         setContentView(R.layout.activity_main);   
12.         mSlipButton = (SlipButton) this.findViewById(R.id.on);   
13.         mSlipButton.SetOnChangedListener(this);//设置事件监听   
14.            
15.     }   
16.     //这里为开或者关时自己所需要做的动作或实现的内容处理   
17. public void OnChanged(boolean CheckState) {   
18. if (CheckState) {   
19. Toast.makeText(this, "打开了", Toast.LENGTH_LONG).show();   
20. } else {   
21. Toast.makeText(this, "关闭了", Toast.LENGTH_LONG).show();   
22. }   
23. }   
24.        
25. }  

import android.app.Activity;
import android.os.Bundle;
import android.widget.Toast;
import com.example.widget.OnChangedListener;
import com.example.widget.SlipButton;
public class MainActivity extends Activity implements OnChangedListener {
private SlipButton mSlipButton;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mSlipButton = (SlipButton) this.findViewById(R.id.on);
        mSlipButton.SetOnChangedListener(this);//设置事件监听
        
    }
    //这里为开或者关时自己所需要做的动作或实现的内容处理
public void OnChanged(boolean CheckState) {
if (CheckState) {
Toast.makeText(this, "打开了", Toast.LENGTH_LONG).show();
} else {
Toast.makeText(this, "关闭了", Toast.LENGTH_LONG).show();
}
}
    
}

 

 

第五步：运行效果如图：

 

 

第六步: 附上源码，为有需要的提供下载参考