当前位置： 移动技术网 > IT编程>移动开发>Android > Material Design系列之Behavior上滑显示返回顶部按钮

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

2019年07月24日  | 移动技术网IT编程  | 我要评论

火影之伪鸣人下载,袁奇峰,女狐们的末路

效果预览

源码在文章末尾。

引文

有时候我们的页面内容过长的时候，滑动到页面底部用户再滑动到顶部很麻烦，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);
    }

那么这里的完整的代码就是：

@override
public 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显示隐藏的实现

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

animatorutil.scaleshow();
animatorutil.scalehide();
isanimatingout;
viewpropertyanimatorlistener;

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

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

animatorutil.scalehide()用来渐渐隐藏fab，当然也是我们自定义的动画啦：

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

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;

@override
public 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);
}

完美啊!

源码下载：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网