Material Design系列之Behavior上滑显示返回顶部按钮

概述效果预览源码在文章末尾。引文有时候我们的页面内容过长的时候，滑动到页面底部用户再滑动到顶部很麻烦，Android不像iOS可以点击statusBar回到顶部，一般都是双击Toolbar/ActionBar或者在底部放一个按钮。

效果预览

源码在文章末尾。

引文

有时候我们的页面内容过长的时候，滑动到页面底部用户再滑动到顶部很麻烦，AndroID不像iOS可以点击statusbar回到顶部，一般都是双击Toolbar/Actionbar或者在底部放一个按钮。

今天就底部放一个回到顶部按钮这个效果来做一个基于Behavior的实现。那么我们传统的方式来做就是监听这个滑动VIEw，比如：ScrollVIEw/ListVIEw/RecyclerVIEw/GrIDVIEw等，那么如果我们使用了CoordinatorLayout，那么一切将会变得非常so easy。

今天我们就利用自定义Behavior来实现这个回到顶部按钮的渐显的动画效果。如果对我的Behavior博文感兴趣的，那么看官可以在文章顶部找到我其它关于Behavior的博文。

自定义Bahavior的实现？

我们选中CoordinatorLayout.Behavior后ctrl + t后发现有很多实现类，哪么我们选用哪个呢？这里就要看我们要 *** 作（显示/隐藏）的按钮是谁了，到底能不能用系统已经实现了的基类？所以又抛出了以下问题。

自定义Behavior继承系统的哪个BaseBahavior？

这个问题其实就so easy了，只要接触过MD的人肯定听过一个FAB吧，也就是我们的floatingActionbutton了，所以我们这里也使用的是floatingActionbutton，所以我们自定义的Behavior也是基于floatingActionbutton的。

因此我们从中CoordinatorLayout.Behavior后ctrl + t的里面看到一个floatingActionbutton.Behavior，这个家伙就是我们要继承的，利用它来控制floatingActionbutton的显示和隐藏动画。

ScaleUpShowBehavior的实现

因为是向上滑动手指，出现下面部分的页面，显示button是，所以我们暂且把它叫ScaleUpShowBehavior的实现。

接下来一大波代码来袭，首先我们要继承floatingActionbutton.Behavior：

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

接下来实现这里面重要的三个方法：

// 页面开始滑动。onStartnestedScroll();// 页面正在滑动。onnestedScroll();// 页面停止滑动。onStopnestedScroll();

第一个方法onStartnestedScroll：

复制代码 代码如下:onStartnestedScroll(CoordinatorLayout l,floatingActionbutton c,VIEw directTargetChild,VIEw v,int nestedScrollAxes)

onStartnestedScroll望文生义啊，开始嵌套滚动的时候被调用，那么这个方法有一个boolean的返回值，是需要我们告诉CoordinatorLayout我这个Behavior要监听的滑动方向，因为我们是上下滑动时显示/隐藏FAB，所以这里我们返回return nestedScrollAxes == VIEwCompat.SCRolL_AXIS_VERTICAL;。

第二个方法onnestedScroll：

复制代码 代码如下:onnestedScroll(CoordinatorLayout l,floatingActionbutton child,VIEw target,int dxconsumed,int dyConsumed,int dxUnconsumed,int dyUnconsumed)

嗯，你猜的没错，这个方法在滑动期间被调用，也就是正在滑动了。so，我们在这里控制vIEw的动画。经过我的测试发现了一下规则：

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,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显示隐藏的实现

眼尖的人肯定看到了，我们上面冒出来的几票未知代码：

AnimatorUtil.scaleShow();AnimatorUtil.scaleHIDe();isAnimatingOut;vIEwPropertyAnimatorListener;

这是什么鬼呢？
AnimatorUtil.scaleShow()用来动画渐显FAB，这个不是系统的，而是我们自定义的：

// 显示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用来监听隐藏动画的执行，当动画执行完毕后才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的使用

首先我们学系统一样在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随便给点数据，跑起来看看哈哈，是不是完美啊？

对了，有的同学在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.jb51.net/201609/yuanma/AndroidBehavior(jb51.net).rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Material Design系列之Behavior上滑显示返回顶部按钮全部内容，希望文章能够帮你解决Material Design系列之Behavior上滑显示返回顶部按钮所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。