1. 程式人生 > >Android 浮動按鈕+上滑隱藏按鈕+下滑顯示按鈕

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

nbut etc win cti turn else http alpha targe

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 浮動按鈕+上滑隱藏按鈕+下滑顯示按鈕