Material Design系列之Behavior上滑显示返回顶部按钮
效果预览
源码在文章末尾。
引文
有时候我们的页面内容过长的时候，滑动到页面底部用户再滑动到顶部很麻烦，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望文生义啊，开始嵌套滚动的时候被调用，那么这个方法有一个boolean的返回值，是需要我们告诉coordinatorlayout我这个behavior要监听的滑动方向，因为我们是上下滑动时显示/隐藏fab，所以这里我们返回return nestedscrollaxes == viewcompat.scroll_axis_vertical;。
第二个方法onnestedscroll：
嗯，你猜的没错，这个方法在滑动期间被调用，也就是正在滑动了。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中定义一个值：
然后在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);
}
完美啊!
源码下载：http://xiazai.jb51.net/201609/yuanma/androidbehavior(jb51.net).rar
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。