Custom Control -- ToggleButton, togglebutton

Custom Control -- ToggleButton, togglebutton

Implement a ToggleButton-like switch button

:

　　

Resource image:

　　

1. Custom Controls

　　

1 package com. dc. customview. view; 2 3 import com. dc. customview. r; 4 5 import android. content. context; 6 import android. graphics. bitmap; 7 import android. graphics. bitmapFactory; 8 import android. graphics. canvas; 9 import android. util. attributeSet; 10 import android. view. motionEvent; 11 import android. view. view; 12 13 public class CustomToggleButton extends View {14 private boolean state; // Switch Status, default value: false, off 15 private boolean isTounching; // whether to touch status 16 private int currentX; 17 private Bitmap backBitmap; 18 private Bitmap overBitmap; 19 20/** 21 * Call 22 * @ param context 23 * @ param attrs 24 * @ param defStyle 25 */26 public CustomToggleButton (Context context, AttributeSet attrs, int defStyle) {27 super (context, attrs, defStyle ); 28} 29 30/** 31 * xml calls 32 * @ param context 33 * @ param attrs 34 */35 public CustomToggleButton (Context context, AttributeSet attrs) {36 super (context, attrs); 37} 38/** 39 * calls 40 * @ param context 41 */42 public CustomToggleButton (Context context) in java code) {43 super (context); 44} 45 46/** 47 * set the switch status 48 * @ param value 49 */50 public void setState (boolean value) {51 this. state = value; 52} 53/** 54 * obtain the switch status 55 * @ param value 56 * @ return 57 */58 public boolean getState (boolean value) {59 return state; 60} 61 62/** 63 * Get the two images required by the custom control, and set the width and height of the custom control to 64 * if not set, the custom control can receive full-screen touch events, that is, the custom control occupies the full screen 65 * @ param widthMeasureSpec 66 * @ param heightMeasureSpec 67 */68 @ Override 69 protected void onMeasure (int widthMeasureSpec, int heigmeasurespec) {70 super. onMeasure (widthMeasureSpec, heightMeasureSpec); 71 // underlying image 72 backBitmap = BitmapFactory. decodeResource (getResources (), R. drawable. switch_background); 73 // The upper-layer image 74 overBitmap = BitmapFactory. decodeResource (getResources (), R. drawable. slide_button_background); 75 76 // same width and height as the underlying image 77 setMeasuredDimension (backBitmap. getWidth (), backBitmap. getHeight (); 78} 79 80/** 81 * drawing switch 82 * @ param canvas 83 */84 @ Override 85 protected void onDraw (Canvas canvas) {86 super. onDraw (canvas); 87 // 1. draw the underlying image 88 canvas. drawBitmap (backBitmap, 0, 0, null); 89 90 // 2. draw upper layer images 91 if (isTounching) {// The upper-layer image slides 92 93/* 94 * to prevent the upper-layer image from moving out of the lower-layer image range 95 */96 // calculates that the current touch point is the center point of the Upper-layer image, the left coordinate of the Upper-layer image is 97 int left = currentX-overBitmap.getWidth ()/2; 98 99 if (left <0) {// prevents the left-side exit from 100 left = 0; 101} else if (left> backBitmap. getWidth ()-overBitmap. getWidth () {// prevents the right side from going out of bounds 102 left = backBitmap. getWidth ()-overBitmap. getWidth (); 103} 104 canvas. drawBitmap (overBitmap, left, 0, null); 105 106} else {// upper layer image directly jumps to the ON or OFF position 107 if (state) {108 // open 109 canvas. drawBitmap (overBitmap, backBitmap. getWidth ()-overBitmap. getWidth (), 0, null); 110} else {111 // close 112 canvas. drawBitmap (overBitmap, 0, 0, null ); 113} 114} 115 116} 117/** 118 * Touch slide switch 119 * @ param event120 * @ return121 */122 @ Override123 public boolean onTouchEvent (MotionEvent event) {124 switch (event. getAction () {125 case MotionEvent. ACTION_DOWN: 126 // when pressed, the touch state is true127 isTounching = true; 128 // The x coordinate of the current touch point is 129 currentX = (int) event. getX (); 130 break; 131 case MotionEvent. ACTION_MOVE: 132 isTounching = true; 133 currentX = (int) event. getX (); 134 break; 135 case MotionEvent. ACTION_UP: 136 // The touch status is falsew.istounching = false; 138 currentX = (int) event. getX (); 139 break; 140} 141 142 // If the touch point is more than half of the underlying image, the state is true, and the open state is 143 state = currentX> backBitmap. getWidth ()/2; 144 // redraw 145 invalidate (); 146 return true; // handle touch events by yourself 147} 148 149 150 151}

2. Reference in 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 android: paddingBottom = "@ dimen/activity_vertical_margin" 6 android: paddingLeft = "@ dimen/users" 7 android: paddingRight = "@ dimen/activity_horizontal_margin" 8 android: paddingTop = "@ Dimen/activity_vertical_margin "9 tools: context =". MainActivity "> 10 <! -- Full Class Name of the custom control class --> 11 <com. dc. customview. view. customToggleButton12 android: layout_width = "wrap_content" 13 android: layout_height = "wrap_content" 14 android: layout_centerInParent = "true"> 15 16 </com. dc. customview. view. customToggleButton> 17 18 </RelativeLayout>

Run the Demo on the simulator.

Illustration: