Material Design系列之Behavior上滑顯示返回頂部按鈕

2019-12-12 05:17:39

字體：大中小

供稿：網(wǎng)友

效果預覽

源碼在文章末尾。

引文

有時候我們的頁面內(nèi)容過長的時候，滑動到頁面底部用戶再滑動到頂部很麻煩，Android不像iOS可以點擊statusBar回到頂部，一般都是雙擊Toolbar/ActionBar或者在底部放一個按鈕。

今天就底部放一個回到頂部按鈕這個效果來做一個基于Behavior的實現(xiàn)。那么我們傳統(tǒng)的方式來做就是監(jiān)聽這個滑動View，比如：ScrollView/ListView/RecyclerView/GridView等，那么如果我們使用了CoordinatorLayout，那么一切將會變得非常so easy。

今天我們就利用自定義Behavior來實現(xiàn)這個回到頂部按鈕的漸顯的動畫效果。如果對我的Behavior博文感興趣的，那么看官可以在文章頂部找到我其它關于Behavior的博文。

自定義Bahavior的實現(xiàn)？

我們選中CoordinatorLayout.Behavior后ctrl + t后發(fā)現(xiàn)有很多實現(xiàn)類，哪么我們選用哪個呢？這里就要看我們要操作（顯示/隱藏）的按鈕是誰了，到底能不能用系統(tǒng)已經(jīng)實現(xiàn)了的基類？所以又拋出了以下問題。

自定義Behavior繼承系統(tǒng)的哪個BaseBahavior？

這個問題其實就so easy了，只要接觸過MD的人肯定聽過一個FAB吧，也就是我們的FloatingActionButton了，所以我們這里也使用的是FloatingActionButton，所以我們自定義的Behavior也是基于FloatingActionButton的。

因此我們從中CoordinatorLayout.Behavior后ctrl + t的里面看到一個FloatingActionButton.Behavior，這個家伙就是我們要繼承的，利用它來控制FloatingActionButton的顯示和隱藏動畫。

ScaleUpShowBehavior的實現(xiàn)

因為是向上滑動手指，出現(xiàn)下面部分的頁面，顯示Button是，所以我們暫且把它叫ScaleUpShowBehavior的實現(xiàn)。

接下來一大波代碼來襲，首先我們要繼承FloatingActionButton.Behavior：

public class ScaleUpShowBehavior extends FloatingActionButton.Behavior {  public ScaleUpShowBehavior(Context context, AttributeSet attrs) {    super();  }}

接下來實現(xiàn)這里面重要的三個方法：

// 頁面開始滑動。onStartNestedScroll();// 頁面正在滑動。onNestedScroll();// 頁面停止滑動。onStopNestedScroll();

第一個方法onStartNestedScroll：

復制代碼代碼如下:

onStartNestedScroll(CoordinatorLayout l, FloatingActionButton c, View directTargetChild, View v, int nestedScrollAxes)

onStartNestedScroll望文生義啊，開始嵌套滾動的時候被調(diào)用，那么這個方法有一個boolean的返回值，是需要我們告訴CoordinatorLayout我這個Behavior要監(jiān)聽的滑動方向，因為我們是上下滑動時顯示/隱藏FAB，所以這里我們返回return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL;。

第二個方法onNestedScroll：

復制代碼代碼如下:

onNestedScroll(CoordinatorLayout l, FloatingActionButton child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed)

嗯，你猜的沒錯，這個方法在滑動期間被調(diào)用，也就是正在滑動了。so，我們在這里控制view的動畫。經(jīng)過我的測試發(fā)現(xiàn)了一下規(guī)則：

if (dyConsumed > 0 && dyUnconsumed == 0) {  System.out.println("上滑中。。。");}if (dyConsumed == 0 && dyUnconsumed > 0) {  System.out.println("到邊界了還在上滑。。。");}if (dyConsumed < 0 && dyUnconsumed == 0) {  System.out.println("下滑中。。。");}if (dyConsumed == 0 && dyUnconsumed < 0) {  System.out.println("到邊界了，還在下滑。。。");}

因此我們在的時候上滑，也就是用戶需要看頁面的下部分的時候顯示FAB：

if (((dyConsumed > 0 && dyUnconsumed == 0) || (dyConsumed == 0 && dyUnconsumed > 0))&& child.getVisibility() != View.VISIBLE) {// 顯示      AnimatorUtil.scaleShow(child, null);    }

那么相反的，在用戶手指下滑，顯示頁面上半部分的時候隱藏FAB：

if (((dyConsumed < 0 && dyUnconsumed == 0) || (dyConsumed == 0 && dyUnconsumed < 0))&& child.getVisibility() != View.GONE && !isAnimatingOut) {      AnimatorUtil.scaleHide(child, viewPropertyAnimatorListener);    }

那么這里的完整的代碼就是：

@Overridepublic void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {//    if (dyConsumed > 0 && dyUnconsumed == 0) {//      System.out.println("上滑中。。。");//    }//    if (dyConsumed == 0 && dyUnconsumed > 0) {//      System.out.println("到邊界了還在上滑。。。");//    }//    if (dyConsumed < 0 && dyUnconsumed == 0) {//      System.out.println("下滑中。。。");//    }//    if (dyConsumed == 0 && dyUnconsumed < 0) {//      System.out.println("到邊界了，還在下滑。。。");//    }  if (((dyConsumed > 0 && dyUnconsumed == 0) || (dyConsumed == 0  && dyUnconsumed > 0)) && child.getVisibility() != View.VISIBLE) {// 顯示    AnimatorUtil.scaleShow(child, null);  } else if (((dyConsumed < 0 && dyUnconsumed == 0) || (dyConsumed == 0  && dyUnconsumed < 0)) && child.getVisibility() != View.GONE && !isAnimatingOut) {    AnimatorUtil.scaleHide(child, viewPropertyAnimatorListener);  }}

動畫的與FAB顯示隱藏的實現(xiàn)

眼尖的人肯定看到了，我們上面冒出來的幾票未知代碼：

AnimatorUtil.scaleShow();AnimatorUtil.scaleHide();isAnimatingOut;viewPropertyAnimatorListener;

這是什么鬼呢？
AnimatorUtil.scaleShow()用來動畫漸顯FAB，這個不是系統(tǒng)的，而是我們自定義的：

// 顯示viewpublic 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();}

AnimatorUtil.scaleHide()用來漸漸隱藏FAB，當然也是我們自定義的動畫啦：

// 隱藏viewpublic 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();}

viewPropertyAnimatorListener和isAnimatingOut用來監(jiān)聽隱藏動畫的執(zhí)行，當動畫執(zhí)行完畢后才view.setVisibility(View.GONE);了，這就是套路啊哈哈：

private boolean isAnimatingOut = false;ViewPropertyAnimatorListener viewPropertyAnimatorListener = new ViewPropertyAnimatorListener() {  @Override  public void onAnimationStart(View view) {    isAnimatingOut = true;  }  @Override  public void onAnimationEnd(View view) {    isAnimatingOut = false;    view.setVisibility(View.GONE);  }  @Override  public void onAnimationCancel(View arg0) {    isAnimatingOut = false;  }};

ScaleUpShowBehavior的使用

首先我們學系統(tǒng)一樣在String.xml中定義一個值：

復制代碼代碼如下:

 <string name="scale_up_show_behavior">com.yanzhenjie.definebehavior.behavior.ScaleUpShowBehavior</string>

然后在xml布局中使用：

<android.support.design.widget.FloatingActionButton  android:id="@+id/fab"  ...  app:layout_behavior="@string/scale_up_show_behavior" />

當然你也完全在xml布局中直接寫這個類的全類名，但是這樣子不利于以后修改這個類所在的包：

app:layout_behavior="com.yanzhenjie.definebehavior.behavior.ScaleUpShowBehavior"

好了，瑣碎的扯完了，把這個布局的完整代碼擼上來：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"  xmlns:app="http://schemas.android.com/apk/res-auto"  android:layout_width="match_parent"  android:layout_height="match_parent">  <android.support.design.widget.AppBarLayout    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:theme="@style/AppTheme.AppBarOverlay">    <android.support.v7.widget.Toolbar      android:id="@+id/toolbar"      android:layout_width="match_parent"      android:layout_height="?attr/actionBarSize"      app:popupTheme="@style/AppTheme.PopupOverlay" />  </android.support.design.widget.AppBarLayout>  <android.support.v7.widget.RecyclerView    android:id="@+id/recyclerView"    android:layout_width="match_parent"    android:layout_height="match_parent"    app:layout_behavior="@string/appbar_scrolling_view_behavior" />  <android.support.design.widget.FloatingActionButton    android:id="@+id/fab"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_gravity="bottom|end"    android:layout_margin="16dp"    android:src="@mipmap/abc_ic_ab_back_top"    app:layout_behavior="@string/scale_up_show_behavior"    app:layout_scrollFlags="scroll|enterAlways|snap" /></android.support.design.widget.CoordinatorLayout>

然后給RecyclerView隨便給點數(shù)據(jù)，跑起來看看哈哈，是不是完美啊？

對了，有的同學在activity一運行起來就看到了這個FAB，所以我們需要在onWindowFocusChanged()中隱藏下：

private boolean isInitializeFAB = false;@Overridepublic void onWindowFocusChanged(boolean hasFocus) {  super.onWindowFocusChanged(hasFocus);  if (!isInitializeFAB) {    isInitializeFAB = true;    hideFAB();  }}private void hideFAB() {  FAB.postDelayed(new Runnable() {    @Override    public void run() {      AnimatorUtil.scaleHide(FAB, new ViewPropertyAnimatorListener() {        @Override        public void onAnimationStart(View view) {        }        @Override        public void onAnimationEnd(View view) {          FAB.setVisibility(View.GONE);        }        @Override        public void onAnimationCancel(View view) {        }      });    }  }, 500);}

完美啊!

源碼下載：http://xiazai.VeVB.COm/201609/yuanma/AndroidBehavior(VeVB.COm).rar

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。

上一篇：Material Design系列之Behavior實現(xiàn)Android知乎首頁

下一篇：Android Studio添加第三方庫的注意事項