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(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,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);
}

完美啊!

源码下载:http://xiazai.jb51.net/201609/yuanma/AndroidBehavior(jb51.net).rar

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


文章浏览阅读8.8k次,点赞9次,收藏20次。本文操作环境:win10/Android studio 3.21.环境配置 在SDK Tools里选择 CMAKE/LLDB/NDK点击OK 安装这些插件. 2.创建CMakeLists.txt文件 在Project 目录下,右键app,点击新建File文件,命名为CMakeLists.txt点击OK,创建完毕! 3.配置文件 在CMa..._link c++ project with gradle
文章浏览阅读1.2w次,点赞15次,收藏69次。实现目的:由mainActivity界面跳转到otherActivity界面1.写好两个layout文件,activity_main.xml和otherxml.xmlactivity_main.xml&lt;?xml version="1.0" encoding="utf-8"?&gt;&lt;RelativeLayout ="http://schemas..._android studio 界面跳转
文章浏览阅读3.8w次。前言:最近在找Android上的全局代理软件来用,然后发现了这两款神作,都是外国的软件,而且都是开源的软件,因此把源码下载了下来,给有需要研究代理这方面的童鞋看看。不得不说,国外的开源精神十分浓,大家相互使用当前基础的开源软件,然后组合成一个更大更强的大开源软件。好吧,废话不多说,下面简单介绍一下这两款开源项目。一、ProxyDroid:ProxyDroid功能比较强大,用到的技术也比较多,源码也_proxydroid
文章浏览阅读2.5w次,点赞17次,收藏6次。创建项目后,运行项目时Gradle Build 窗口却显示错误:程序包R不存在通常情况下是不会出现这个错误的。我是怎么遇到这个错误的呢?第一次创建项目,company Domain我使用的是:aven.com,但是创建过程在卡在了Building 'Calculator' Gradle Project info这个过程中,于是我选择了“Cancel”第二次创建项目,我还是使用相同的项目名称和项目路_r不存在
文章浏览阅读8.9w次,点赞4次,收藏43次。前言:在Android上使用系统自带的代理,限制灰常大,仅支持系统自带的浏览器。这样像QQ、飞信、微博等这些单独的App都不能使用系统的代理。如何让所有软件都能正常代理呢?ProxyDroid这个软件能帮你解决!使用方法及步骤如下:一、推荐从Google Play下载ProxyDroid,目前最新版本是v2.6.6。二、对ProxyDroid进行配置(基本配置:) (1) Auto S_proxydroid使用教程
文章浏览阅读1.1w次,点赞4次,收藏17次。Android Studio提供了一个很实用的工具Android设备监视器(Android device monitor),该监视器中最常用的一个工具就是DDMS(Dalvik Debug Monitor Service),是 Android 开发环境中的Dalvik虚拟机调试监控服务。可以进行的操作有:为测试设备截屏,查看特定进程中正在运行的线程以及堆栈信息、Logcat、广播状态信息、模拟电话_安卓摄像头调试工具
文章浏览阅读2.1k次。初学Android游戏开发的朋友,往往会显得有些无所适从,他们常常不知道该从何处入手,每当遇到自己无法解决的难题时,又往往会一边羡慕于 iPhone下有诸如Cocos2d-iphone之类的免费游戏引擎可供使用,一边自暴自弃的抱怨Android平台游戏开发难度太高,又连个像样的游 戏引擎也没有,甚至误以为使用Java语言开发游戏是一件费力不讨好且没有出路的事情。事实上,这种想法完全是没有必_有素材的游戏引擎
文章浏览阅读3.2k次,点赞2次,收藏2次。2014年12月从csdn专家福利获得的一本书《Android游戏开发技术实战详解》,尘封了一年多的时间,今天才翻开来看。我认识中的Android,提到Android最先浮现在我脑海中的是那可爱的机器人图标:这个Logo是由Ascender公司设计的,诞生于2010年,其设计灵感源于男女厕所门上的图形符号(真的是灵感无处不在),于是布洛克绘制了一个简单的机器人,它的躯干就像锡罐的形状,头上还有两根_智能手机的特点有哪些?
文章浏览阅读8.1k次,点赞9次,收藏11次。首先,Android是不是真的找工作越来越难呢?这个可能是大家最关心的。这个受大的经济环境以及行业发展前景的影响,同时也和个人因素有关。2016-08-26近期一方面是所在的公司招聘Java开发人员很难招到合适的,投简历的人很少;而另一方面,经常听身边的人说Android、iOS方面找工作不好找,特别是没什么经验的,经验比较少的!说是不好找,但在我家所在的吉林省省会长春,会Unity3D+Maya_android 开发和asp.net哪个好 site:blog.csdn.net
文章浏览阅读6.1k次。在上篇“走进Android开发的世界,HelloWorld”,我们创建了一个Android 项目 HelloWorld,并演示了如何通过USB连接手机查看运行效果;而如果没有手机或没有对应型号的手机,又想做对应型号(屏幕尺寸、Android系统版本)的适配,应该怎么办呢?这时Android模拟器就派上用场了。Android模拟器Android SDK自带一个移动模拟器。它是一个可以运行在你电脑上的_安卓移动开发软件怎样预览
文章浏览阅读8.9k次。Google IO 2017 上宣布,将Kotlin语言作为安卓开发的官方语言。Kotlin由JetBrains公司开发,与Java 100%互通,并具备诸多Java尚不支持的新特性。谷歌称还将与JetBrains公司合作,为Kotlin设立一个非盈利基金会。Kotlin 是一个基于 JVM 的静态类型编程语言,Kotlin可以编译成Java字节码,也可以编译成JavaScript,方便在没有JV_kotlin为什么被嫌弃
文章浏览阅读9.6w次,点赞17次,收藏35次。有些情况下,不方便使用断点的方式来调试,而是希望在控制台打印输出日志,使用过Eclipse的同学都知道Java可以使用 System.out.println(""); 来在控制台打印输出日志,但是在android studio中却是不行的,还是有差别的,那应该用什么呢?android.util.Log在调试代码的时候我们需要查看调试信息,那我们就需要用Android Log类。android.ut_andirod.studio 为什么不在控制台打印输出
文章浏览阅读8.2k次,点赞2次,收藏8次。在上篇“走进Android开发的世界,HelloWorld”,我们创建了一个Android 项目 HelloWorld,并演示了如何通过USB连接手机查看运行效果;这里讲一下如何为应用添加一个按钮,并为按钮添加Click单击事件处理程序,显示/隐藏另一个按钮。添加按钮在HelloWorld项目的基础上,打开界面布局文件:activity_main.xml切换到Design(设计)模式;在组件But_activity_main.xml按钮隐藏
文章浏览阅读2.9k次,点赞3次,收藏9次。android 开发工具主流的还是Android Studio,当然也有很多人喜欢用Eclipse,也有人喜欢用IntelliJ IDEA ;还有Xamarin这种只需要编写一次代码,可以编译多种平台可运行的强大工具。但是它又真的强大吗?就我看来没有,身边很多人还是在用Android Studio、XCode开发应用,没见谁在用Xamarin之类的工具。系统要求WindowsMicrosoft®_android开发下载安装
文章浏览阅读4.2k次,点赞7次,收藏26次。你知道Hello World程序的由来吗?对于大多数编程语言的学习来说,真正入门的一课就是 Hello World!会而不难,难而不会。虽然很多人写过关于Android开发Hello World的文章,但随着时间的推移,开发工具、技术的进步,可能有些已经过时了。我就记录一下当下我所经历的第一个Android APP HelloWorld。一、准备1、开发环境参考:Android Studio 下载_android helloworld textview 句柄获取
这篇“android轻量级无侵入式管理数据库自动升级组件怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定...
今天小编给大家分享一下Android实现自定义圆形进度条的常用方法有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文...
这篇文章主要讲解了“Android如何解决字符对齐问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Android...
这篇文章主要介绍“Android岛屿数量算法怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Android岛屿数量算...
本篇内容主要讲解“Android如何开发MQTT协议的模型及通信”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Andro...