Android應用之——自訂控制項ToggleButton

標籤：android   style   blog   http   java   使用   

我們經常會看到很多優秀的app上面都有一些很漂亮的控制項，使用者體驗非常好，比如togglebutton就是一個很好的例子，IOS系統下面那個精緻的togglebutton如今在android下面也可以實現了，而且還可以自訂它的顏色文字背景圖，做出各種漂亮的開關按鍵出來。這裡就用到了android裡面一個比較常用的技術——自訂控制項。

先來看下我們實現的自訂的togglebutton：

    

自訂控制項的步驟：

1、首先，定義一個類繼承View 或者View的子類，這個取決於要定義的控制項的類型，本例中，繼承自View。

2、繼承了View後 就需要重寫建構函式，有三個方法，分別是

public MyView(Context context) {super(context);// TODO Auto-generated constructor stub}public MyView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);// TODO Auto-generated constructor stub}public MyView(Context context, AttributeSet attrs) {super(context, attrs);// TODO Auto-generated constructor stub

這三個方法，根據不同的情況來使用，如果自訂的控制項需要設定xml屬性那麼就要用到第三個建構函式，如果需要設定xml屬性並且定義樣式，那麼就需要實現第二個建構函式，使用其第三個參數defStyleAttr，如果沒有以上兩點要求，那麼直接重寫第一個建構函式即可。

這這個demo中，我們實現第一個建構函式即可

public ToggleButton(Context context, AttributeSet attrs) {super(context, attrs);initBitmap();//初始化bitmap}

重寫建構函式後，接下來就要根據不同控制項的要求來選擇是否重寫onDraw和onMeasure方法了。

如果自訂控制項的大小是需要自訂的，比如本例中的togglebutton，那麼首先需要重寫onMeasure方法，測算出自訂控制項的寬和高。

很明顯，我們這個togglebutton的寬和高是很容易得出來的，高度就是這個控制項背景圖的寬和高

      

所以onMeasure方法重寫如下，得到自訂控制項的寬和高

/** * 初始化開關圖片 */private void initBitmap() {background = BitmapFactory.decodeResource(getResources(),R.drawable.switch_background);slideBackground = BitmapFactory.decodeResource(getResources(),R.drawable.slide_button_background);}

/** * 設定當前控制項的寬和高 */@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);// 設定開關的寬和高setMeasuredDimension(background.getWidth(), background.getHeight());}

得到寬和高後，就需要繪製這個控制項了，利用View的onDraw方法

重寫onDraw方法，我們可以得到一個參數canvas
 

void onDraw(Canvas canvas)

有了這個canvas對象，就可以很方面的繪製出控制項的樣子

先繪製控制項的背景，因為togglebutton，其實就是一個button在一個背景圖上面來回滑動產生不同的效果，所以我們先繪製它的背景。

canvas.drawBitmap(background, 0, 0, null);

繪製完背景後，就要繪製小滑塊了。小滑塊有兩種狀態，一種是在滑動，另一種是靜止狀態，這兩種狀態我們需要分別進行處理。

當小滑塊在滑動的時候，背景圖是不會變的，而且它滑動到某個時刻的樣子也很明確，滑動了多少距離就繪製它在某距離的狀態，但是有一種情況需要進行處理，那就是滑塊滑出邊界的情況，如果是從左邊滑出邊界，那麼就應該將它離左邊的距離置為0，也就是不讓它繼續滑動，同理右邊也要進行相應的處理。

滑動過程代碼如下：

if(isSliding) {// 正在滑動中int left = currentX - slideBackground.getWidth() / 2;if(left < 0) {// 當前超出了左邊界, 賦值為0left = 0;} else if(left > (background.getWidth() - slideBackground.getWidth())) {// 當前超出了右邊界, 賦值為: 背景的寬度 - 滑動塊的寬度left = background.getWidth() - slideBackground.getWidth();}canvas.drawBitmap(slideBackground, left, 0, null);}

靜止狀態的話，很容易，根據不同的狀態將滑塊放置到控制項的左邊和右邊即可

if(currentState) {// 繪製開的狀態canvas.drawBitmap(slideBackground, 0, 0, null);} else {// 繪製關的狀態int left = background.getWidth() - slideBackground.getWidth();canvas.drawBitmap(slideBackground, left, 0, null);}

上面，我們就完成了自訂一個togglebutton的介面上的操作了，但是togglebutton的作用是用來控制開關的，所以還要對它的一些事件進行處理。

滑動事件的處理，捕獲使用者的操作，為它設定一個自訂的狀態改變監聽器

/** * 捕獲使用者操作的事件 */@Overridepublic boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:currentX = (int) event.getX();isSliding = true;break;case MotionEvent.ACTION_MOVE:currentX = (int) event.getX();break;case MotionEvent.ACTION_UP:isSliding = false;currentX = (int) event.getX();int center = background.getWidth() / 2;// 當前最新的狀態boolean state = currentX < center;// 如果兩個狀態不一樣並且監聽事件不為nullif (currentState != state && mOnToggleStateChangeListener != null) {// 調用使用者的回調事件mOnToggleStateChangeListener.onToggleStateChange(state);}currentState = state;break;default:break;}invalidate(); // 此方法被調用會使onDraw方法重繪return true;}

這裡自訂了一個狀態改變監聽器，用來監聽togglebutton的狀態改變，然後回調方法，進行相應的處理。

public interface OnToggleStateChangeListener {void onToggleStateChange(boolean state);}

最後，為這個控制項提供三個方法，設定狀態為開或關的方法，還有一個設定監聽事件的方法

/** * 設定開關的狀態 *  * @param state */public void setToggleState(boolean state) {currentState = state;}public boolean getToogleState() {return currentState;}public void setOnToggleStateChangeListener(OnToggleStateChangeListener listener) {mOnToggleStateChangeListener = listener;}

到這裡，整個自訂togglebutton的過程就算完了。接下來我們就可以在程式中使用自己定義的控制項了。

在xml檔案中，用全路徑名使用自訂控制項，然後在java代碼中就可以擷取到這個自訂控制項的對象 和相關的方法了

<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" >    <com.yang.togglebutton.ToggleButton        android:id="@+id/togglebutton"        android:layout_width="wrap_content"        android:layout_height="30dip"        android:layout_centerInParent="true" />    <com.yang.togglebutton.ToggleButtonVIPS        android:id="@+id/toggle2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@+id/togglebutton"        android:layout_centerHorizontal="true" /></RelativeLayout>

總結一下其實就是幾個步驟：

1、繼承View或者它的子類，根據不同的情況重寫不同的建構函式（必須）

2、重寫onMeasure方法，測量控制項的大小（非必須）

3、重寫onDraw方法，繪製控制項（非必須）
4、為控制項設定一些自訂方法和監聽器（非必須）

5、在xml中使用，或者直接在java代碼中使用

轉載請註明出處http://blog.csdn.net/csr_yang/article/details/37341221

Demo下載