仿微信的滑動按鈕

前言

前幾天寫過一篇文章View的工作原理，有原理不行，還要有實踐，剛好把以前項目寫過的仿微信滑動按鈕控件封裝一下，所以本文記錄一下我實現這個控件的細節。

地址：SwitchButton

效果圖

控件使用效果如下：

除了顏色，看起來和微信的還是挺像的。

準備

1、選擇自定義View的方式

自定義View有3種途徑實現：1、組合控件；2、繼承現有控件(如Button)；3、繼承View。下面分別介紹一下：

1、組合控件：我們並不需要自己去繪製視圖上顯示的內容，而是將幾個系統原生的控件組合到一起，這樣創建出的控件就被稱爲組合控件，比如標題欄就是個很常見的組合控件。
2、繼承現有控件：我們並不需要自己重新去實現一個控件，只需要去繼承一個現有的控件，然後在這個控件上增加一些新的功能。它的優點就是不僅能夠按照我們的需求加入相應的功能，並且還可以繼承現有控件已經封裝好的屬性，同時不用自己定義測量流程。
3、繼承View：我們繼承View，重寫相應的方法，重新去實現一個控件。它的優點就是靈活性高，它給你一張白紙，你用畫筆盡情發揮。

現實情況使用什麼方式根據實際情況考慮，我這個控件的選擇是方式3: 繼承View，重寫onMeasure方法定義它的測量流程，重寫onDraw()方法定義它的繪製流程。

2、選擇讓控件內容滑動的方式

既然是滑動按鈕，肯定有滑動，當我點擊按鈕時，如果是打開，按鈕的小圓會滑向右邊，如果是關閉，按鈕的小圓會滑向左邊。讓控件的內容滑動起來我想到的有3種方式：

1、通過Scroller：調用Scroller的startScroll()方法，傳入起始點座標和終點座標，然後重寫View的computeScroll()方法，在這個方法裏面調用Scroller的computeScrollOffset()方法開始滑動計算，然後調用View的scrollTo()或scrollBy()方法完成View的滑動距離的更新，然後調用View的invalidate()或postInvalidate()方法重繪View。
2、通過Handler不斷的發送延時消息：通過Handler的 sendMessageDelayed(Message msg, long delayMillis)方法不斷的發送延時消息，在Handler的handlerMessage()中收到消息後，完成滑動距離的更新，然後調用View的invalidate()或postInvalidate()方法重繪View。
3、通過動畫：利用補間動畫或屬性動畫的平移動畫可以讓View動起來，或者通過ValueAnimator，設定一個初始值和結點值，當調用ValueAnimator的start()方法後，就可以在回調中獲取動畫的進度，然後根據動畫的進度更新滑動距離，然後調用View的invalidate()或postInvalidate()方法重繪View。

對於方法1，它更適用於自定義ViewGroup的情景，如果自定義ViewGroup中有許多子View需要滑動起來，就可以考慮使用Scroller，例如Android的ViewPager內部就是使用了Scroller；而對於自定義View，可能方法2和3更適用，我這個控件的選擇是方式3: 通過ValueAnimator動畫，在構造ValueAnimator時傳入起點和終點，然後開啓動畫，根據動畫進度計算滑動距離，讓按鈕的小圓滑動起來。

3、要不要考慮padding屬性

如果你在自定義控件中沒有考慮padding屬性，那麼用戶定義控件的padding值就會失效，我的選擇是不考慮用戶的padding值，因爲滑動按鈕中的內容只有一個小圓，且只在一邊，padding的意義不大，考慮padding會讓很多地方的座標計算複雜，我還不如讓用戶直接控制小圓的半徑，這樣也類似於padding的效果，也簡化了計算。

所以現實情況要不要考慮padding屬性需要根據實際情況考慮。而margin值是由父ViewGroup決定，不是由View控制的，我們不用考慮margin值。

實現

1、定義控件屬性

在自定義滑動按鈕之前，我們先思考可以讓用戶自定義這個控件的什麼屬性，如按鈕顏色，打開狀態和關閉狀態的顏色等，在 res -> values 中，右鍵新建一個名爲attrs的xml文件，在這個文件中定義控件屬性，如下：

<resources>

    <declare-styleable name="SwitchButton" >
        <attr name="sb_openBackground" format="color"/>
        <attr name="sb_closeBackground" format="color"/>
        <attr name="sb_circleColor" format="color"/>
        <attr name="sb_circleRadius" format="dimension"/>
        <attr name="sb_status">
            <enum name="close" value="0"/>
            <enum name="open" value="1"/>
        </attr>
        <attr name="sb_interpolator">
            <enum name="Linear" value="0"/>
            <enum name="Overshoot" value="1"/>
            <enum name="Accelerate" value="2"/>
            <enum name="Decelerate" value="3"/>
            <enum name="AccelerateDecelerate" value="4"/>
            <enum name="LinearOutSlowIn" value="5"/>
        </attr>
    </declare-styleable>

</resources>

這樣用戶在引用這個控件時就能使用這些屬性，如下：

    <com.example.library.SwitchButton
            android:id="@+id/sb_button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:sb_interpolator="Accelerate"
            app:sb_status="open"
            app:sb_circleRadius="10dp"
            app:sb_closeBackground="@android:color/black"
            app:sb_openBackground="@android:color/holo_blue_bright"
            app:sb_circleColor="@android:color/white" />

屬性的名稱要做到見名知意，app只是一個命名空間，取什麼名字都可以，不要和系統android相同就行。關於這些屬性什麼意思可以看SwitchButton。

2、初始化控件屬性

重寫View的3個構造方法，分別在3個構造函數中調用init()方法獲取控件屬性並初始化控件，如下：

public class SwitchButton extends View {
    public SwitchButton(Context context) {
        super(context);
        init(context, null);
    }

    public SwitchButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public SwitchButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(Context context, @Nullable AttributeSet attrs) {
        TypedArray typedValue = context.obtainStyledAttributes(attrs, R.styleable.SwitchButton);
        mOpenBackground = typedValue.getColor(R.styleable.SwitchButton_sb_openBackground, DEFAULT_OPEN_BACKGROUND);
        mCloseBackground = typedValue.getColor(R.styleable.SwitchButton_sb_closeBackground, DEFAULT_CLOSE_BACKGROUND);
        //...
        typedValue.recycle();
         //...
        //初始畫筆，動畫等
    }
}

我們在attrs中定義的控件屬性都在AttributeSet這個集合中，然後通過TypedArray這個類幫助我們把值獲取出來，最後一定要記得調用 typedValue.recycle() 方法回收資源。

爲什麼要重寫3個構造函數呢？因爲你的控件有可能在代碼中引用或者在xml佈局中引用，如果你的控件在xml佈局中被引用，那麼系統就會調用含有兩個參數的構造函數來初始化控件；如果你直接在代碼中 new 一個控件然後 add 到容器中，那麼大多數情況你會使用含有一個參數的構造函數來初始化控件，如：SwitchButton button = new SwitchButton(this)，而不管一個參數的還是兩個參數的系統最終都會調用含有三個參數的構造函數，以防萬一，3個構造函數都要重寫。

3、重寫onMeasure方法，設定按鈕的測量寬高

重寫onMeasure方法在這個方法設定滑動控件的測量寬高，如下：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int measuredWidthMode = MeasureSpec.getMode(widthMeasureSpec);
    int measuredHeightMode = MeasureSpec.getMode(heightMeasureSpec);
    //取出系統測量寬高
    int measuredWidth = MeasureSpec.getSize(widthMeasureSpec);
    int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
    
    int defaultWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 60, getResources().getDisplayMetrics());//控件的默認寬
    int defaultHeight = (int) (defaultWidth *  0.5f);//控件的默認高是默認寬的一半
    
    //OFFSET == 6
    int offset = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, OFFSET * 2 * 1.0f, getResources().getDisplayMetrics());//控件寬和高的差距不能小於12dp, 否則按鈕就不好看了
    
    //考慮wrap_content情況
    if(measuredWidthMode == MeasureSpec.AT_MOST && measuredHeightMode == MeasureSpec.AT_MOST){
        measuredWidth = defaultWidth;
        measureHeight = defaultHeight;
    }else if(measuredHeightMode == MeasureSpec.AT_MOST){
        measureHeight = defaultHeight;
        if(measuredWidth - measureHeight < offset)
            measuredWidth = defaultWidth;
    }else if(measuredWidthMode == MeasureSpec.AT_MOST){
        measuredWidth = defaultWidth;
        if(measuredWidth - measureHeight < offset)
            measureHeight = defaultHeight;
    }else {
        //處理輸入非法的寬高情況，即高度大於寬度，把它們交換就行
        if(measuredWidth < measureHeight){
            int temp = measuredWidth;
            measuredWidth = measureHeight;
            measureHeight = temp;
        }
    }
    
    if(Math.abs(measureHeight - measuredWidth) < offset) throw new IllegalArgumentException("layout_width cannot close to layout_height nearly, the diff must less than 12dp!");
    
    setMeasuredDimension(measuredWidth, measureHeight);
    
}

如果知道View的工作原理，那麼理解上面的代碼就很簡單，主要是考慮wrap_content情況，我們要給滑動按鈕設置一個默認的寬或高，默認的寬是60dp，默認高是30dp即寬的一半，如果不是wrap_content情況就讓View直接使用系統測量的寬或高，最後一定要記得調用setMeasuredDimension()設定View的測量寬高。

同時我們還要考慮理輸入非法的寬高情況，一定要保證寬 > 高，如果用戶輸入的寬高是寬 < 高，這樣會導致按鈕豎起來，這種情況，我直接讓高度與寬度交換；如果用戶輸入的寬高是寬 > 高，但是如果高很接近寬甚至相等，那麼導致滑動控件就是一個圓形，按鈕就不好看了，所以我們還要控制寬高不能相差得太近，爲了美觀，我設定閾值是12dp，如果寬高相差小於12dp，我就拋個異常提示用戶。

4、在onLayout()方法中根據View的寬高計算座標

滑動控件被分爲4個部分：左圓、矩形、右圓、小圓，如下：

在onDraw()方法中也會按順序繪製滑動按鈕的4個部分，在View的工作原理中講到，onMeasure()有可能會被系統調用多次，所以最好在onLayout()方法中通過getHeight()和getWidth()方法獲得View的真實寬高，所以在onLayout()方法中首先根據View的寬高計算出左圓的半徑，小圓的半徑，矩形左邊界的x座標，矩形右邊界的x座標，還有小圓圓心的x座標，如下：

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    super.onLayout(changed, left, top, right, bottom);
    //得出左圓的半徑
    mLeftSemiCircleRadius = getHeight() / 2;
    //小圓的半徑 = 大圓半徑減OFFER，OFFER = 6
    if(!checkCircleRaduis(mCircleRadius)) mCircleRadius = mLeftSemiCircleRadius - OFFSET;
    //矩形左邊的x座標
    mLeftRectangleBolder = mLeftSemiCircleRadius;
    //矩形右邊的x座標
    mRightRectangleBolder = getWidth() - mLeftSemiCircleRadius;
    //小圓的圓心x座標一直在變化
    mCircleCenter = isOpen ? mRightRectangleBolder : mLeftRectangleBolder;
}

可以看到左圓的半徑等於View高的一半，然後基於左圓的半徑得出其他座標，小圓與左圓之間會有一些空隙，所以左圓半徑減去offset值得出小圓半徑，矩形左邊的x座標直接等於左圓的半徑，矩形右邊的x座標View的寬度減左圓的半徑，小圓圓心的x座標根據初始狀態是開啓還是關閉，決定它的圓心的初始座標是在矩形的右邊界還是左邊界。

在接下來只要你不斷的改變小圓圓心的x座標並重繪View，就可以讓滑動按鈕滑動起來。

5、重寫onDraw()方法，繪製按鈕內容

View的工作原理中我們知道，View會在onDraw()方法中繪製自己，所以我們重寫onDraw()方法，繪製滑動按鈕的四個部分，如下：

@Override
protected void onDraw(Canvas canvas) {
    //左圓
    canvas.drawCircle(mLeftRectangleBolder, mLeftSemiCircleRadius, mLeftSemiCircleRadius, mPathWayPaint);
    //矩形
    canvas.drawRect(mLeftRectangleBolder, 0, mRightRectangleBolder, getMeasuredHeight(), mPathWayPaint);
    //右圓
    canvas.drawCircle(mRightRectangleBolder, mLeftSemiCircleRadius, mLeftSemiCircleRadius, mPathWayPaint);
    //小圓
    canvas.drawCircle(mCircleCenter, mLeftSemiCircleRadius, mCircleRadius, mCirclePaint);
}

canvas是系統提供給我們的畫布，在canvas繪製的東西就是View顯示的內容，根據在onLayout中的計算，我們用畫筆Paint在canvas中繪製出滑動按鈕的4個部分，繪製後顯示如下：

接下來就是讓它滑動起來，這樣就能達到效果圖的效果。

6、重寫onTouchEvent()方法，讓按鈕滑動起來

在View的事件分發機制講到，觸摸事件如果不被攔截，最終會分發到View的onTouchEvent()方法中，在這個方法中我們可以根據事件的類型做出滑動按鈕的不同行爲，我們知道當手指按下按鈕然後擡起，滑動按鈕的小圓就會滑動到另一邊；當手指按下按鈕然後移動，滑動按鈕的小圓也會跟隨手指移動，知道了這兩個行爲後，我們看onTouchEvent()方法如下：

@Override
public boolean onTouchEvent(MotionEvent event) {
    //不在動畫的時候可以點擊
    if(isAnim) return false;
    switch(event.getAction()){
        case MotionEvent.ACTION_DOWN:
            //開始的x座標
            startX = event.getX();
            break;
        case MotionEvent.ACTION_MOVE:
            float distance = event.getX() - startX;
            //更新小圓圓心座標
            mCircleCenter += distance / 10;
            //控制範圍
            if (mCircleCenter > mRightRectangleBolder) {//最右
                mCircleCenter = mRightRectangleBolder;
            } else if (mCircleCenter < mLeftRectangleBolder) {//最左
                mCircleCenter = mLeftRectangleBolder;
            }
            invalidate();
            break;
        case MotionEvent.ACTION_UP:
            float offset = Math.abs(event.getX() - Math.abs(startX));
            float diff;
            //分2種情況
            if (offset < mMinDistance) { //1.點擊, 按下和擡起的距離小於mMinDistance確定是點擊了
                if(isOpen){
                    diff = mLeftRectangleBolder - mCircleCenter;
                }else{
                    diff = mRightRectangleBolder - mCircleCenter;
                }
            } else {//2.滑動
                if (mCircleCenter > getWidth() / 2) {//滑過中點，滑到最右
                    this.isOpen = false;
                    diff = mRightRectangleBolder - mCircleCenter;
                } else{//沒滑過中點,迴歸原點
                    this.isOpen = true;
                    diff = mLeftRectangleBolder - mCircleCenter;
                }
            }
            mValueAnimator.setFloatValues(0, diff);
            mValueAnimator.start();
            startX = 0;
            break;
        default:
            break;
    }
    return true;
}

我們先看ACTION_DOWN，當手指按下，我們記錄手指按下的x座標。

接着看ACTION_MOVE，如果按下後移動，我們就讓小圓跟隨手指移動即可，所以ACTION_MOVE中先計算出手指移動的距離distance，往右移distance是正數，往左移distance是負數，然後加到小圓的圓心座標，還要控制小圓的圓心座標的範圍，不要超出矩形左右邊界，最後調用 invalidate()重繪View，這樣onDraw()方法就會重新執行，更新小圓的位置，就會讓小圓慢慢滑動起來。

最後看ACTION_UP，mMinDistance = new ViewConfiguration().getScaledTouchSlop()，它是系統定義的臨界值，當擡起手指時，如果移動的距離offset大於mMinDistance ，就認爲擡起手指前，手指在移動，否則就認爲在點擊。如果手指在移動後擡起，這時就判斷小圓圓心是否滑過中點算出滑動距離，如果滑過中點(getWidth() / 2)，就讓小圓滑到最右，如果沒有滑過中點，就讓小圓滑到最左；如果手指只是在點擊控件，這時就根據控件目前處於開啓還是關閉狀態算出滑動距離，如果目前處於開啓狀態，就讓小圓滑到最左，如果目前處於關閉狀態就讓小圓滑到最右；而這個滑動距離diff就是小圓圓心到矩形邊界的距離，至於是距離左邊界還是右邊界，就看上述情況了，計算出滑動距離後設置給ValueAnimator，最後開啓動畫，在ValueAnimator的updateListener中接收動畫進度，如下：

mValueAnimator.addUpdateListener(animation -> {
    float value = (float)animation.getAnimatedValue();
    mCircleCenter -= mPreAnimatedValue;
    //更新小圓圓心座標
    mCircleCenter += value;
    mPreAnimatedValue = value;
    invalidate();
});

在裏面根據動畫進度更新小圓圓心座標，然後調用 invalidate()重繪View，這樣onDraw()方法就會重新執行，更新小圓的位置，這樣重複執行直到動畫結束，就會讓小圓慢慢滑動起來。

結語

到最後就已經實現了效果圖的效果，整個過程的原理還是挺簡單，使用到了動畫還有自定義View的基礎知識，趕快動手實踐一下。

地址：SwitchButton

仿微信的滑動按鈕

前言

效果圖

準備

1、選擇自定義View的方式

2、選擇讓控件內容滑動的方式

3、要不要考慮padding屬性

實現

1、定義控件屬性

2、初始化控件屬性

3、重寫onMeasure方法，設定按鈕的測量寬高

4、在onLayout()方法中根據View的寬高計算座標

5、重寫onDraw()方法，繪製按鈕內容

6、重寫onTouchEvent()方法，讓按鈕滑動起來

結語

MySQL 核心模塊揭祕 | 18 期 | 鎖在內存里長什麼樣*

使用perf工具生成火焰圖

HttpSecurity 是如何組裝過濾器鏈的

數說海南——近6年海南各市縣人口簡單看

長序列中Transformers的高級注意力機制總結

WebStorm 創建 Vue 項目

大齡程序員思考

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

解決AndroidStudio的Flutter插件無法顯示已連接的設備，一直是loading狀態的問題

java學習總結之反射

仿微信的滑動按鈕

java學習總結之面向對象

java學習總結之基礎

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結