程序媛也話Android 之 自定義控件（垂直方向滑動條）

Android里已經有足夠多的控件供開發者使用，但有時候我們還是會想要一些不一樣的東西，比如一些UI特效，比如一些3D動畫，今天就講講比較basic的東西：自定義控件。

 

1.效果圖

如果項目里需要一個通用的控件，然后UI給你這樣一個效果圖，你接下來會打算怎么做？

  用戶可以按住拖動

點擊要切換的狀態，然后自動滑動到那一端

 

（本來是沒有這個效果圖的，又不想一張張貼不同的狀態，就畫了一下這個gif圖，關於怎么在ubuntu下畫gif圖，可以看一下下面這篇）

程序媛也會畫圖 之 在ubuntu下用GIMP制作gif

 

 

2.分析

看一下有沒有現成的widget，這似乎和android.widget.Switch有點類似，可是Swithc是水平的，水平沒有關系，改成垂直的問題不大，先來嘗試下好了，就先把背景和button的圖片換一下，來看一下結果是怎樣：

額。。。這個切換似乎生硬了點，沒有漸變的動畫。好吧，那還是重新自己寫一個控件吧。

 

 

3.創建Andriod自定義控件的步驟

怎么建立一個自定義的控件，說起來並不難，有三個內容需要實現：

3.1新建一個控件類，繼承android.view.View類：

public class XXXView extends View {
    ...
    protected void onDraw(Canvas canvas) {
        ...
    }
    
    public boolean onTouchEvent(MotionEvent event) {
        ...
    }

    public interface OnXXXListener { //狀態回調，同View.OnClickListener
        public abstract void xxx();
        public abstract void xxx();
    }
}

 

3.2 在布局文件xml里使用這個控件：

<com.xxx.xxx.XXXView  android:id=”@+id/xxx”
    android:layoutWidth=”...”
    android:layoutHeight=”...”>
</com.xxx.xxx.XXXView>

 

3.3 在Activity類里獲得這個控件：

mXXXView = (XXXView) findViewById(R.id.xxx);
mXXXView.setListener(mXXXViewListener)；

以上這簡單的3個步驟就是創建和使用控件的內容了，到這里，如果你是個喜歡着急寫代碼的人，你也可以先搭一個程序框架出來跑跑看啦。

 

 

 

4.考慮怎么畫？
4.1拖動
用戶需要能拖動Button，那也就是說我們在控件里需要捕獲用戶的touch event，知道用戶到底是做了什么動作(ACTION_DOWN, ACTION_MOVE, UP), 還有操作的位置在哪里（getX(), getY()）.
這些信息從哪里可以知道？--》onTouchEvent()回調！

4.2動畫
動畫的本質就是圖片+位置+時間差。
在效果圖中，用戶也可以點擊一個狀態，讓控件滑動。那這個滑動的過程就是一個動畫的。
圖片我們有，那怎么把圖片畫到Canvas上？-》在onDraw()回調里面畫。在主線程里只要調用invalidate()，就會重新觸發onDraw()的執行。如果我們在一定的時間間隔，在不同的位置重新畫圖片，不就是動畫了？
位置可以從用戶行為獲得，或者自己計算；
時間差，在Android里面控制時間最容易的是什么？當然是Handler啦，因為它可以發送delay的消息。

4.3漸變的實現
效果圖中還有個漸變的過程，這個看起來好像蠻麻煩，其實也好辦。因為有Alpha的存在。我們可以在畫的時候根據不同的位置，設置Paint不同的Alpha值，一個圖片Alpha慢慢減小，另一個圖片Alpha慢慢增大。

ok，分析到這里，就大概知道該怎么做了，在onTouchEvent()回調里，獲得用戶的行為和位置，並記錄下來，在適當的時候發送Message給Handler，或者直接調用invalidate()重新畫。在Handler里，接收到信息，就根據當前的狀態，更新圖片下一個應該出現的位置，然后調用invalidate()觸發重新畫。

 

 

 

5.計算位置
ok，上面已經確定以什么方式做了，接下來就要用到一點點數學的計算了。我們要確定圖片從哪里開始動，動到哪里結束，還有在什么位置開始切換狀態。

先切下圖：

         

(文字也做成了圖片，其實凡是涉及到文字的都不應該做成圖片，如果有人切換到中文，然后他又不認識on off呢，而且這些文字應該要可設置的才對。這里圖方便就做成圖片了。)

 

然后就是一些重要坐標位置啦：

圖1    藍色是那個長條的圖片，綠色兩塊是在兩個狀態下Button所在的位置。

 

圖2   黃色的區域是兩個小的灰色文字圖片

 

圖3   這個區域就是文字開始切換的區域

 

 

 

6.偽代碼

現在方法也有了，數據也有了，就可以開始寫代碼了。
為了敘述方便，就用偽代碼代替了，下面是最重要的三個部分的偽碼：

處理用戶行為的邏輯：

public boolean onTouchEvent(MotionEvent event) {  //處理用戶行為
    case ACTION_DOWN:
        if (坐標在圖1中藍色區域) { //touch在無效的區域
            return;
        }

        if (坐標在圖1中綠色區域中Button在的區域) { //當前狀態是on，就是上面的區域，否則，就是下面的區域
            獲得坐標與上邊緣的距離gap；
        } else {
            設置正在滑動標志；
            設置動畫的方向，發送Message；  //會執行到這里的情況是，比如當前狀態是on，用戶點擊了off那一端，那接下來控件就要自動滑動切換到off狀態。
        }
         break;
    
    case ACTION_MOVE:
         if (上次Down是在無效區域 | 正在切換狀態) { //此時不用響應Move動作。
             return;
         }

         if (根據當前的坐標計算，滑塊將不在背景區域) {
             return;
         }

         if (根據當前的坐標計算，在文字交換的區域) {
             設置交換標記；
         }
         記錄滑塊當前位置；
         invalidate();
         break;

    case ACTION_UP:
         if (上次Down是在無效區域 | 正在切換狀態) { //此時不用響應Up動作。
             return;
         }
 
         取消交換標識；
         if(根據當前坐標計算，最后的狀態是on) {
            設置滑塊位置為on狀態時的位置；
            修改狀態為on；
            invalidate();
         } else {
            設置滑塊位置為off狀態時的位置；
            修改狀態為off；
            invalidate();
         }
}

處理自動滑動：

private Handler mHandler = new Handler() {  //用於處理自動滑動那部分邏輯
    public void handleMessage(Message msg) {
         if (計數 > 20) {
             設置當前狀態；
             設置滑塊的位置；
             取消正在滑動的標志；
             計數歸0；
             return；
         }

         根據計數，獲得interpolator.getInterpolation；//這里用了AccelerateDecelerateInterpolator，讓動畫有一個加速的效果，其實這么短的距離效果看不出來。
         計算滑塊的位置；
         invalidate();
         計數+1；
         sendMessageDelayed(0, 20); //20ms后畫下一幀。
    }

};

 

畫：

protected void onDraw(Canvas canvas) { //具體畫的代碼
     畫背景；

     if (在狀態交換區域) {
         根據滑塊位置這是Paint的Alpha值；
         用上面設置的Paint畫那四個小圖； //在狀態交換的時候，四個小圖都是顯示的。
     } else {
         根據當前的狀態，畫on滑塊或off滑塊；
     }
}

 

ok，有上面3部分的內容，基本上就可以了。

下面就是運行起來的效果，（不好表示啦，其實就是效果圖那樣的）

 

貼個對應的代碼段：

Handler：

    private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            if (drawCount > 20) {
                if (button_status == STATUS_OFF) {
                    button_status = STATUS_ON;
                    buttonY = buttonTopY;
                    if (listener != null) {
                        listener.slipToTop();
                    }
                } else {
                    button_status = STATUS_OFF;
                    buttonY = buttonBottomY;
                    if (listener != null) {
                        listener.slipToBottom();
                    }
                }

                isTouchDownAnotherSide = false;
                drawCount = 0;
                return;
            }

            float p;
            if (isToBottom) {
                p = (float) (drawCount * 0.05);
            } else {
               p = (float) (1 - drawCount * 0.05);
            }
            float inter = interpolator.getInterpolation(p);
            buttonY = buttonTopY + (buttonBottomY - buttonTopY) * inter;

            if (buttonY >= exchangeBeginY && buttonY <= exchangeEndY) {
                isExchange = true;
            } else {
                isExchange = false;
            }
            invalidate();
            drawCount++;
            sendEmptyMessageDelayed(0, 20);
        }
    };

 

onDraw():

    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        canvas.drawBitmap(mBackBitmap, 0, 0, null);

        if (isExchange) {
            // in exchange area, we should set alpha
            Paint mPaint = new Paint();

            int alpha = (int) (255 - 255 * (buttonY - 25.5) / 50);
            mPaint.setAlpha(alpha);
            canvas.drawBitmap(mONBitmap, buttonTopX, buttonY, mPaint);
            canvas.drawBitmap(mOFFTextBitmap, textBottomX, textBottomY, mPaint);

            mPaint.setAlpha(255 - alpha);
            canvas.drawBitmap(mOFFBitmap, buttonBottomX, buttonY, mPaint);
            canvas.drawBitmap(mONTextBitmap, textTopX, textTopY, mPaint);
        } else {
            if (getNearLocation(0, buttonY) == STATUS_ON) {
                canvas.drawBitmap(mONBitmap, buttonTopX, buttonY, null);
                canvas.drawBitmap(mOFFTextBitmap, textBottomX, textBottomY, null);
            } else {
                canvas.drawBitmap(mOFFBitmap, buttonBottomX, buttonY, null);
                canvas.drawBitmap(mONTextBitmap, textTopX, textTopY, null);
            }
        }
    }

 

onTouchEvent():

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // TODO Auto-generated method stub

        float x = event.getX();
        float y = event.getY();
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:

            if (isTouchDownAnotherSide) {
                return true;
            }

            // check if touch right place
            if (isOutOfFrontBitmap(x, y)) {
                isTouchDownValid = false;
                return true;
            }

            if (listener != null) {
                listener.touchedDown();
            }

            if (isInFrontBitmap(x, y)) {
                // touch in current mode
                Log.e("Slip", "ACTION_DOWN : yes! infrontBitmap");
                isTouchDownValid = true;
                touchDownGap = getGap(x, y);
            } else {
                // touch anther side
                Log.e("Slip", "ACTION_DOWN : no! infrontBitmap");
                isTouchDownValid = false;
                isTouchDownAnotherSide = true;
                if (button_status == STATUS_ON) {
                    isToBottom = true;
                    mHandler.sendEmptyMessage(0);
                } else {
                    isToBottom = false;
                    mHandler.sendEmptyMessage(0);
                }
            }
            break;
        case MotionEvent.ACTION_MOVE:
            // if touch down wrong place, we ignore next action
            if (!isTouchDownValid || isTouchDownAnotherSide) {
                return true;
            }
            if (!isInBackBitmap(x, y)) {
                Log.e("Slip", "ACTION_MOVE : no! isInBackBitmap");
                return true;
            }
            if (isInExchangeArea(x, y)) {
                isExchange = true;
            } else {
                isExchange = false;
            }
            buttonY = y - touchDownGap;
            this.invalidate();

            break;
        case MotionEvent.ACTION_UP:
            // if touch down wrong place, we ignore next action
            if (!isTouchDownValid || isTouchDownAnotherSide) {
                Log.e("Slip", "ACTION_UP : no! isTouchDownValid");
                return true;
            }

            isExchange = false;

            if (getFinalLocation(x, y) == STATUS_ON) {
                buttonY = buttonTopY;
                if (button_status != STATUS_ON) {
                    button_status = STATUS_ON;
                    Log.e("Slip", "ACTION_UP : STATUS_ON! getFinalLocation");
                    if (listener != null) {
                        listener.slipToTop();
                    }
                } else {
                    if (listener != null) {
                        listener.touchedUp();
                    }
                }
                this.invalidate();

            } else {
                buttonY = buttonBottomY;
                if (button_status != STATUS_OFF) {
                    button_status = STATUS_OFF;
                    Log.e("Slip", "ACTION_UP : STATUS_OFF! getFinalLocation");
                    if (listener != null) {
                        listener.slipToBottom();
                    }
                } else {
                    if (listener != null) {
                        listener.touchedUp();
                    }
                }
                this.invalidate();
            }

            break;
        default:
            break;
        }

        return true;
    }

 

 

Over,Thanks.