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

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();
    }
}

 

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;
        }
    }
}

 

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，用資源文件什么，將自定義類的路徑加進去即可。