自定义滑动开关控件的实现与使用

自定义滑动开关控件的实现与使用

标签： 控件滑动开关自定义

2014-06-17 15:05  2207人阅读  评论(0)  收藏  举报

  分类：

Android自定义控件使用（16） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

在IPhone中，滑动开关控件非常常见，而且效果也非常好，但是在Android平台下，却没有自带的这种控件，只有功能类似的ToggleButton控件。本篇文章主要介绍自定义的滑动开关控件的实现与使用。在实现的过程中，也参考了其他类似自定义控件的实现，同时对代码进行了优化。

首先看实现的效果图

下面讲解这个自定义控件如何实现

[java]  view plain  copy

 

1. /** 
2.  * 滑动控件 
3.  *  
4.  * @Time 2014-6-17 下午2:35:17 
5.  */  
6. public class SlipSwitch extends View implements OnTouchListener {  
7.   
8.     // 开关开启时的背景，关闭时的背景，滑动按钮  
9.     private Bitmap switch_on_bg, switch_off_bg, slip_Btn;  
10.     // 是否正在滑动  
11.     private boolean isSlipping = false;  
12.     // 当前开关状态，true为开启，false为关闭  
13.     private boolean isSwitchOn = false;  
14.     // 手指按下时的水平坐标X，当前的水平坐标X  
15.     private float previousX, currentX;  
16.     // 开关监听器  
17.     private OnSwitchListener onSwitchListener;  
18.     // 是否设置了开关监听器  
19.     private boolean isSwitchListenerOn = false;  
20.     // 矩阵  
21.     private Matrix matrix = new Matrix();  
22.     // 画笔  
23.     private Paint paint = new Paint();  
24.     // 滑动按钮的左边坐标  
25.     private float left_SlipBtn;  
26.     // 松开前开关的状态  
27.     private boolean previousSwitchState;  
28.   
29.     public SlipSwitch(Context context) {  
30.         super(context);  
31.         init();  
32.     }  
33.   
34.     public SlipSwitch(Context context, AttributeSet attrs) {  
35.         super(context, attrs);  
36.         init();  
37.     }  
38.     //初始化  
39.     protected void init() {  
40.         setOnTouchListener(this);  
41.         setSwitchState(true);  
42.     }  
43.   
44.     @Override  
45.     protected void onDraw(Canvas canvas) {  
46.         super.onDraw(canvas);  
47.         // 手指滑动到左半边的时候表示开关为关闭状态，滑动到右半边的时候表示开关为开启状态  
48.         if (currentX < (switch_on_bg.getWidth() / 2)) {  
49.             canvas.drawBitmap(switch_off_bg, matrix, paint);  
50.         } else {  
51.             canvas.drawBitmap(switch_on_bg, matrix, paint);  
52.         }  
53.   
54.         // 判断当前是否正在滑动  
55.         if (isSlipping) {  
56.             if (currentX > switch_on_bg.getWidth()) {  
57.                 left_SlipBtn = switch_on_bg.getWidth() - slip_Btn.getWidth();  
58.             } else {  
59.                 left_SlipBtn = currentX - slip_Btn.getWidth() / 2;  
60.             }  
61.         } else {  
62.             // 根据当前的开关状态设置滑动按钮的位置  
63.             if (isSwitchOn) {  
64.                 left_SlipBtn = switch_off_bg.getWidth();  
65.             } else {  
66.                 left_SlipBtn = 0;  
67.             }  
68.         }  
69.   
70.         // 对滑动按钮的位置进行异常判断  
71.         if (left_SlipBtn < 0) {  
72.             left_SlipBtn = 0;  
73.         } else if (left_SlipBtn > switch_on_bg.getWidth() - slip_Btn.getWidth()) {  
74.             left_SlipBtn = switch_on_bg.getWidth() - slip_Btn.getWidth();  
75.         }  
76.   
77.         canvas.drawBitmap(slip_Btn, left_SlipBtn, 0, paint);  
78.     }  
79.   
80.     // 告诉父控件，要占多大的空间  
81.     @Override  
82.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
83.         setMeasuredDimension(switch_on_bg.getWidth(), switch_on_bg.getHeight());  
84.     }  
85.   
86.     @Override  
87.     public boolean onTouch(View v, MotionEvent event) {  
88.         switch (event.getAction()) {  
89.         // 滑动  
90.         case MotionEvent.ACTION_MOVE:  
91.             currentX = event.getX();  
92.             break;  
93.         // 按下  
94.         case MotionEvent.ACTION_DOWN:  
95.             isSlipping = true;  
96.             previousX = event.getX();  
97.             currentX = previousX;  
98.             break;  
99.         // 松开  
100.         case MotionEvent.ACTION_UP:  
101.             isSlipping = false;  
102.             previousSwitchState = isSwitchOn;  
103.             if (event.getX() >= (switch_on_bg.getWidth() / 2)) {  
104.                 isSwitchOn = true;  
105.             } else {  
106.                 isSwitchOn = false;  
107.             }  
108.             // 如果设置了监听器，则调用此方法  
109.             if (isSwitchListenerOn && (previousSwitchState != isSwitchOn)) {  
110.                 onSwitchListener.onSwitched(isSwitchOn);  
111.             }  
112.             break;  
113.         }  
114.         // 重新绘制控件  
115.         invalidate();  
116.         return true;  
117.     }  
118.   
119.     protected void setImageResource(int switchOnBkg, int switchOffBkg,  
120.             int slipBtn) {  
121.         switch_on_bg = BitmapFactory  
122.                 .decodeResource(getResources(), switchOnBkg);  
123.         switch_off_bg = BitmapFactory.decodeResource(getResources(),  
124.                 switchOffBkg);  
125.         slip_Btn = BitmapFactory.decodeResource(getResources(), slipBtn);  
126.   
127.     }  
128.   
129.     protected void setSwitchState(boolean switchState) {  
130.         isSwitchOn = switchState;  
131.     }  
132.   
133.     protected boolean getSwitchState() {  
134.         return isSwitchOn;  
135.     }  
136.   
137.     protected void updateSwitchState(boolean switchState) {  
138.         isSwitchOn = switchState;  
139.         invalidate();  
140.     }  
141.   
142.     public void setOnSwitchListener(OnSwitchListener listener) {  
143.         onSwitchListener = listener;  
144.         isSwitchListenerOn = true;  
145.     }  
146.   
147.     // 监听器接口  
148.     public interface OnSwitchListener {  
149.         abstract void onSwitched(boolean isSwitchOn);  
150.     }  
151. }  

在这个实现过程中，有几个方法至关重要。

一个是onMeasure()，这个方法主要是告诉父控件，自定义控件要占多大的控件，我们把背景图片的宽高设置即可。

另外一个onDraw()，这个方法负责自定义界面的绘制，当手指按下、滑动、松开的时候，这个方法都需要对更改后的界面进行重新的绘制。

最后一个方法便是onTouch(),因为自定义控件实现了OnTouchListener接口，所以要重写这个方法。当手指在屏幕点击和滑动的时候，就会出发这个事件，我们需要根据用户操作的不同，对按下、放开、滑动等事件，进行不一样的处理。但是无论如何处理，在方法的最后，我们都要调用invalidate();方法，对界面进行刷新，我们可以看到这个方法的介绍

Invalidate the whole view. If the view is visible, onDraw(android.graphics.Canvas) will be called at some point in the future. This must be called from a UI thread. To call from a non-UI thread, call postInvalidate().

意思就是说，如果控件可见，我们在调用这个方法之后，系统会调用onDraw方法进行界面的刷新，而且这个方法必须在主线程调用，如果在非主线程想完成界面刷新的功能，我们可以调用postInvalidate()这个方法实现。

而且onTouch()的返回值为true，我们可以看一下这个方法的介绍

True if the listener has consumed the event, false otherwise. 就是说，如果返回的是true，那么这个触摸事件就不会继续往下传递，这个事件就被当前的监听器消耗了，也就是吃掉了。

好了，通过这几个方法，我们就实现了一个简单的自定义的滑动开关控件，下面我们看一下如何使用这个自定义的控件。

布局文件

[html]  view plain  copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:background="@android:color/white"  
6.     android:gravity="center"  
7.     android:orientation="vertical" >  
8.   
9.     <edu.qust.SlipSwitch  
10.         android:id="@+id/main_myslipswitch"  
11.         android:layout_width="wrap_content"  
12.         android:layout_height="wrap_content" />  
13.   
14.   
15. </LinearLayout>  

Activity中的代码

[java]  view plain  copy

 

1. public class MainActivity extends Activity {  
2.   
3.     private SlipSwitch slipswitch;  
4.   
5.     @Override  
6.     public void onCreate(Bundle savedInstanceState) {  
7.         super.onCreate(savedInstanceState);  
8.         setContentView(R.layout.main);  
9.   
10.         slipswitch = (SlipSwitch) findViewById(R.id.main_myslipswitch);  
11.         slipswitch.setImageResource(R.drawable.bkg_switch,  
12.                 R.drawable.bkg_switch, R.drawable.btn_slip);  
13.         slipswitch.setOnSwitchListener(new OnSwitchListener() {  
14.   
15.             @Override  
16.             public void onSwitched(boolean isSwitchOn) {  
17.                 if (isSwitchOn) {  
18.                     Toast.makeText(MainActivity.this, "开关已经开启",  
19.                             Toast.LENGTH_SHORT).show();  
20.                 } else {  
21.                     Toast.makeText(MainActivity.this, "开关已经关闭",  
22.                             Toast.LENGTH_SHORT).show();  
23.                 }  
24.             }  
25.         });  
26.   
27.     }  
28. }  

使用非常简单，不过多介绍了

使用到的素材文件