Android 浮動按鈕+上滑隱藏按鈕+下滑顯示按鈕

標籤：extend   boolean   axis   使用者   android   監聽   行為控制   fast   art   

1.效果示範

1.1.關注這個紅色的浮動按鈕

　　、

　　可以看到，上滑的時候浮動按鈕消失，因為使用者迫切想知道下面的東西，而不是回到頂部。

　　當下滑的時候，使用者想回到原來的位置，就可以點擊浮動按鈕，快速回到頂部。所以浮動按鈕彈上來了。

 

2.定義一個動畫通用類AnimatorUtil

2.1.原始碼如下

public class AnimatorUtil {    private static LinearOutSlowInInterpolator FAST_OUT_SLOW_IN_INTERPOLATOR = new LinearOutSlowInInterpolator();    private static AccelerateInterpolator LINER_INTERPOLATOR = new AccelerateInterpolator();    // 顯示view    public static void scaleShow(View view, ViewPropertyAnimatorListener viewPropertyAnimatorListener) {        view.setVisibility(View.VISIBLE);        ViewCompat.animate(view)                .scaleX(1.0f)                .scaleY(1.0f)                .alpha(1.0f)                .setDuration(800)                .setListener(viewPropertyAnimatorListener)                .setInterpolator(FAST_OUT_SLOW_IN_INTERPOLATOR)                .start();    }    // 隱藏view    public static void scaleHide(View view, ViewPropertyAnimatorListener viewPropertyAnimatorListener) {        ViewCompat.animate(view)                .scaleX(0.0f)                .scaleY(0.0f)                .alpha(0.0f)                .setDuration(800)                .setInterpolator(FAST_OUT_SLOW_IN_INTERPOLATOR)                .setListener(viewPropertyAnimatorListener)                .start();    }    // 顯示view    public static void translateShow(View view, ViewPropertyAnimatorListener viewPropertyAnimatorListener) {        view.setVisibility(View.VISIBLE);        ViewCompat.animate(view)                .translationY(0)                .setDuration(400)                .setListener(viewPropertyAnimatorListener)                .setInterpolator(FAST_OUT_SLOW_IN_INTERPOLATOR)                .start();    }    // 隱藏view    public static void translateHide(View view, ViewPropertyAnimatorListener viewPropertyAnimatorListener) {        view.setVisibility(View.VISIBLE);        ViewCompat.animate(view)                .translationY(260)                .setDuration(400)                .setInterpolator(FAST_OUT_SLOW_IN_INTERPOLATOR)                .setListener(viewPropertyAnimatorListener)                .start();    }}

View Code

 

2.2. 成員變數分析

　　

　　這裡定義了一個LinearOutSlowInInterpolator，系統類別。

　　然後定義了一個AccelerateInterpolator，通用系統類別。

 

2.3.顯示View方法一

　　

　　ViewCompat系統類別。動態地顯示這個view。設定周期為800ms。

 

2.4.隱藏View方法一

　　

　　ViewCompat系統類別，這裡動態地隱藏這個View。設定周期為800ms。

 

2.5.顯示View方法二

　　

　　方法類似，不過這裡微調了一下。

 

2.6.隱藏View方法二

　　

　　方法類似，不過這裡微調了一下。

3.浮動按鈕行為控制器

3.1.原始碼如下。

// FAB 行為控制器public class ScaleDownShowBehavior extends FloatingActionButton.Behavior {    public ScaleDownShowBehavior(Context context, AttributeSet attrs) {        super();    }    @Override    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout,                                       FloatingActionButton child, View directTargetChild,                                       View target, int nestedScrollAxes) {        if (nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL){            return true;        }        return super.onStartNestedScroll(coordinatorLayout, child, directTargetChild,                target, nestedScrollAxes);    }    private boolean isAnimateIng = false;   // 是否正在動畫    private boolean isShow = true;  // 是否已經顯示    public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child,                               View target, int dxConsumed, int dyConsumed,                               int dxUnconsumed, int dyUnconsumed) {        if ((dyConsumed > 0 || dyUnconsumed > 0) && !isAnimateIng && isShow) {// 手指上滑，隱藏FAB            AnimatorUtil.translateHide(child, new StateListener() {                @Override                public void onAnimationStart(View view) {                    super.onAnimationStart(view);                    isShow = false;                }            });        } else if ((dyConsumed < 0 || dyUnconsumed < 0 && !isAnimateIng && !isShow)) {            AnimatorUtil.translateShow(child, new StateListener() {                @Override                public void onAnimationStart(View view) {                    super.onAnimationStart(view);                    isShow = true;                }            });// 手指下滑，顯示FAB        }    }    class StateListener implements ViewPropertyAnimatorListener {        @Override        public void onAnimationStart(View view) {            isAnimateIng = true;        }        @Override        public void onAnimationEnd(View view) {            isAnimateIng = false;        }        @Override        public void onAnimationCancel(View view) {            isAnimateIng = false;        }    }}

View Code

 

3.2.建構函式。

　　

　　這裡繼承了浮動按鈕的行為FloatingActionButton.Behavior，建構函式直接繼承基類即可。

 

3.3.這裡重寫第一個函數onStartNestedScroll

　　

　　這裡還是主要繼承原來的即可。

 

3.4.定義兩個變數

　　

 

3.5.監聽手指上滑和手指下滑

　　

　　手指上滑是通過dyConsumed>0判斷的，執行AnimatorUtil隱藏函數即可。

　　手指下滑是通過dyConsumed<0判斷的，執行AnimatorUtil顯示函數即可。

 

3.6.AnimatorUtil自訂類函數需要傳入一個監聽器

　　

　　如果動畫開始，則設定是否正在動畫為true

　　如果動畫結束，則設定是否正在動畫為false

　　如果動畫取消，則設定是否正在動畫為false 

4.布局中配置浮動按鈕行為

4.1.在浮動按鈕的布局中設定app:layout_behavior

　　

 

4.2.然後在資源檔中定義自訂的路徑，在上面直接寫也可以。

　　

5.總結一下

5.1.首先自訂一個動畫通用類AnimatorUtil，用來動態顯示或隱藏view。

 

5.2.然後定義一個浮動按鈕的行為控制器，繼承FloatingActionButton.Behavior，實現兩個重寫的方法。

　　在重寫的onNestedScroll中，判斷手指上滑，然後調用通用類實現隱藏view。判斷手指下滑，然後

　　調用通用類實現顯示view。

 

5.3.然後在浮動按鈕的布局中定義一個app:layout_behavior，用資源檔什麼，將自訂類的路徑加進去即可。

Android 浮動按鈕+上滑隱藏按鈕+下滑顯示按鈕