Android 自定义组件_开关控件

Google 在 API 14 开始才新增了Switch 控件。

因此，我们可以选择自己封装一个Switch 。

效果如图：

View主要代码：

[java]  view plain copy

1. public class SwitchView extends LinearLayout {  
2.     private ImageView maskImage;              // 开关遮盖图片  
3.     private boolean open;                     // 开关当前状态  
4.     private boolean isAninFinish = true;      // 动画是否结束  
5.     private float x;                          // 记录ACTION_DOWN时候的横坐标  
6.     private boolean isChangedByTouch = false; // 是否在一次事件中已经切换过状态  
7.     private OnSwitchChangeListener switchChangeListener; // 监控开关状态  
8.     public interface OnSwitchChangeListener {  
9.         void onSwitchChanged(boolean open);  
10.     }  
11.     public SwitchView(Context context, AttributeSet attrs) {  
12.         super(context, attrs);  
13.         init();  
14.     }  
15.     public SwitchView(Context context) {  
16.         super(context);  
17.         init();  
18.     }  
19.     private void init() {  
20.         setBackgroundResource(R.drawable.switch_bg);  
21.         maskImage = new ImageView(getContext());  
22.         maskImage.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));  
23.         maskImage.setImageResource(R.drawable.switch_mask);  
24.         addView(maskImage);  
25.     }  
26.     public boolean getSwitchStatus() {  
27.         return open;  
28.     }  
29.     public void setSwitchStatus(boolean isOpen) {  
30.         this.open = isOpen;  
31.         if (isOpen) {  
32.             setGravity(Gravity.RIGHT);  
33.         } else {  
34.             setGravity(Gravity.LEFT);  
35.         }  
36.     }  
37.     @Override  
38.     public boolean onTouchEvent(MotionEvent event) {  
39.         switch (event.getAction()) {  
40.         case MotionEvent.ACTION_DOWN: {  
41.             x = event.getX();  
42.             break;  
43.         }  
44.         case MotionEvent.ACTION_MOVE: {  
45.             if (event.getX() - x > 5 && !open) { // 向右  
46.                 changeStatus();  
47.             } else if (event.getX() - x < -5 && open) { // 向左  
48.                 changeStatus();  
49.             }  
50.             break;  
51.         }  
52.         case MotionEvent.ACTION_UP: {  
53.             if (Math.abs(event.getX() - x) <= 5) {  
54.                 changeStatus();  
55.             }  
56.             isChangedByTouch = false;  
57.             break;  
58.         }  
59.         case MotionEvent.ACTION_CANCEL: {  
60.             isChangedByTouch = false;  
61.             break;  
62.         }  
63.         }  
64.         return true;  
65.     }  
66.     private void changeStatus() {  
67.         if (isAninFinish && !isChangedByTouch) {  
68.             isChangedByTouch = true;  
69.             open = !open;  
70.             isAninFinish = false;  
71.             if (switchChangeListener != null) {  
72.                 switchChangeListener.onSwitchChanged(open);  
73.             }  
74.             changeOpenStatusWithAnim(open);  
75.         }  
76.     }  
77.     private void changeOpenStatusWithAnim(boolean open) {  
78.         if (open) {  
79.             // 左到右  
80.             Animation leftToRight = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0,   
81.                     Animation.ABSOLUTE, getWidth() - maskImage.getWidth(),   
82.                     Animation.RELATIVE_TO_SELF, 0,   
83.                     Animation.RELATIVE_TO_SELF, 0);  
84.             leftToRight.setDuration(300);  
85.             leftToRight.setAnimationListener(new AnimationListener() {  
86.                 @Override  
87.                 public void onAnimationStart(Animation animation) {  
88.                 }  
89.                 @Override  
90.                 public void onAnimationRepeat(Animation animation) {  
91.                 }  
92.                 @Override  
93.                 public void onAnimationEnd(Animation animation) {  
94.                     maskImage.clearAnimation();  
95.                     setGravity(Gravity.RIGHT);  
96.                     isAninFinish = true;  
97.                 }  
98.             });  
99.             maskImage.startAnimation(leftToRight);  
100.         } else {  
101.             // 右到左  
102.             Animation rightToLeft = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0,  
103.                     Animation.ABSOLUTE, maskImage.getWidth() - getWidth(),   
104.                     Animation.RELATIVE_TO_SELF, 0,   
105.                     Animation.RELATIVE_TO_SELF, 0);  
106.             rightToLeft.setDuration(300);  
107.             rightToLeft.setAnimationListener(new AnimationListener() {  
108.                 @Override  
109.                 public void onAnimationStart(Animation animation) {  
110.                 }  
111.                 @Override  
112.                 public void onAnimationRepeat(Animation animation) {  
113.                 }  
114.                 @Override  
115.                 public void onAnimationEnd(Animation animation) {  
116.                     maskImage.clearAnimation();  
117.                     setGravity(Gravity.LEFT);  
118.                     isAninFinish = true;  
119.                 }  
120.             });  
121.             maskImage.startAnimation(rightToLeft);  
122.         }  
123.     }  
124.     public OnSwitchChangeListener getSwitchChangeListener() {  
125.         return switchChangeListener;  
126.     }  
127.     public void setOnSwitchChangeListener(OnSwitchChangeListener switchChangeListener) {  
128.         this.switchChangeListener = switchChangeListener;  
129.     }  
130. }  

测试用代码：

[java]  view plain copy

1. public class MainActivity extends Activity {  
2.     @Override  
3.     protected void onCreate(Bundle savedInstanceState) {  
4.         super.onCreate(savedInstanceState);  
5.         setContentView(R.layout.activity_main);  
6.         SwitchView switchView = (SwitchView) findViewById(R.id.switchview);  
7.         switchView.setSwitchStatus(true);  
8.         switchView.setOnSwitchChangeListener(new OnSwitchChangeListener() {  
9.             @Override  
10.             public void onSwitchChanged(boolean open) {  
11.                 Toast.makeText(MainActivity.this, "开关状态:" + open, Toast.LENGTH_SHORT).show();  
12.             }  
13.         });  
14.     }  
15. }  

测试用布局：

[html]  view plain copy

1. <LinearLayout 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.     android:padding="20dp"  
6.     >  
7.     <TextView   
8.         android:layout_width="wrap_content"  
9.         android:layout_height="wrap_content"  
10.         android:text="自定义开关状态:"  
11.         />  
12.     <com.fancyy.switchview.SwitchView  
13.         android:layout_marginLeft="20dp"  
14.         android:id="@+id/switchview"  
15.         android:layout_width="wrap_content"  
16.         android:layout_height="wrap_content" />  
17. </LinearLayout>  

测试代码下载：http://download.csdn.net/detail/a105865708/6800519