Android自定义控件（一）——开关控件

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

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

效果如图：

View主要代码：

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. }

测试用代码：

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. }

测试用布局：

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