開源中國（oschina）Android客戶端主頁返回按鈕效果實現

原創

2020-02-22 21:01

先看看效果

開源中國的Android客戶端的返回按鈕就是這樣子的，剛開始看的時候感覺好酷，然後就看源碼，找着找着發現其實是Android封裝好了的一個控件DrawerArrowDrawable，但是這個只是在Android5.0才加入的，於是乎就看了一下這個控件的源碼，發現很容易就能摳出來單獨用。
於是，我用摳出來的DrawerArrowDrawable寫了個demo：https://github.com/brian512/TestDrawerArrowDrawable
當然我也把該控件加入到我的CodeBlog客戶端裏面了：

        mArrowDrawable = new DrawerArrowDrawable(this);
        mArrowDrawable.setColor(getResources().getColor(R.color.white));
        mTitleBar.setLeftDrawable(mArrowDrawable);
        sm.setOnScrollListener(new OnScrollListener() {

            @Override
            public void onScroll(float percentOpen) {
                mArrowDrawable.setProgress(percentOpen);
            }
        });

對，用起來就是這麼簡單。

其實，這個控件就是需要不斷的調用setProgress(percentOpen)來更新繪製的進度，然後在draw(Canvas canvas)方法裏面根據percentOpen計算當前應該繪製的位置和圖形：

            final float rotation = lerp(0, ARROW_HEAD_ANGLE, mProgress * 2 - 1);
            final float upStartX = Math.round(mSize/2 * Math.cos(rotation));
            final float upStartY = Math.round(mSize/2 * Math.sin(rotation));

            // 設置線條起點
            mPath.moveTo(mOffsetLeft + mSize/2 - upStartX, mOffsetTop + mSize - upStartY);
            // 設置線條需要繪製的dx、dy，也就是在x軸的偏移量和在y軸的偏移量
            mPath.rLineTo(2 * upStartX, upStartY * 2);

            mPath.moveTo(mOffsetLeft + mSize/2 - upStartX, mOffsetTop + mSize + upStartY);
            mPath.rLineTo(2 * upStartX, upStartY * -2);

其中，mProgress爲傳入的percentOpen值，即進度；ARROW_HEAD_ANGLE爲線條旋轉最大角度；

也就是說，這個類只能用於三槓和圖標的切換動作（其實旋轉角度及進度的計算是固定的，但是可以設置gap，size等參數實現其他類似的效果，但是變化不會太大），當然這個思路還是可以借鑑的：根據滑動的百分比來同步更新過度控件，其實在微信頁面滑動切換時下面tab漸隱漸顯的效果也是這個思路，當然還可以衍生出很多其他好玩的東西。

更新一個效果：

這個效果就是根據動畫更新傳過來的插入值來更新mArrowDrawable的狀態

        alphaAnimator.addUpdateListener(new AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (Float)animation.getAnimatedValue();
                mArrowDrawable.setProgress(value);
            }
        });

具體的可以看源碼：

demo：https://github.com/brian512/TestDrawerArrowDrawable