Android中Fab(FloatingActionButton)实现上下滑动的渐变效果

前言

promoted actions是指一种操作按钮，它不是放在actionbar中，而是直接在可见的ui布局中（当然这里的ui指的是setcontentview所管辖的范围）。因此它更容易在代码中被获取到（试想如果你要在actionbar中获取一个菜单按钮是不是很难？），promoted actions往往主要用于一个界面的主要操作，比如在email的邮件列表界面，promoted action可以用于接受一个新邮件。promoted action在外观上其实就是一个悬浮按钮，更常见的是漂浮在界面上的圆形按钮，一般我直接将promoted action称作悬浮按钮，英文名称float action button 简称（fab，不是fbi哈）。

系统自带的 fab 也会随着页面上下滚动,但是淡出或者进入的效果太不自然。

这里记录一个小知识点,fab 随着页面的 recyclerview 上下滚动而渐变的动画效果。

包含 fab 控件的布局如下:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.coordinatorlayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".view.activity.mainactivity">

 <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"
  android:background="?attr/colorprimary"
  app:layout_scrollflags="scroll|enteralways"
  app:popuptheme="@style/apptheme.popupoverlay" />


 <android.support.design.widget.tablayout
  android:id="@+id/tab_layout"
  app:tabindicatorcolor="#ffffff"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">
 </android.support.design.widget.tablayout>
 </android.support.design.widget.appbarlayout>

 <include layout="@layout/content_main" />

 <android.support.design.widget.floatingactionbutton
 android:id="@+id/fab"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_margin="@dimen/fab_margin"
 android:src="@android:drawable/ic_dialog_email"
 app:layout_behavior="com.wu.allen.zhuanlan.util.scrollawarefabbehavior"/>

</android.support.design.widget.coordinatorlayout>

实现的 java 代码如下:

public class scrollawarefabbehavior extends floatingactionbutton.behavior {
 private static final interpolator interpolator = new fastoutslowininterpolator();
 private boolean misanimatingout = false;

 public scrollawarefabbehavior(context context, attributeset attrs) {
 super();
 }

 @override
 public boolean onstartnestedscroll(final coordinatorlayout coordinatorlayout, final floatingactionbutton child,
     final view directtargetchild, final view target, final int nestedscrollaxes) {
 // ensure we react to vertical scrolling
 return nestedscrollaxes == viewcompat.scroll_axis_vertical
  || super.onstartnestedscroll(coordinatorlayout, child, directtargetchild, target, nestedscrollaxes);
 }

 @override
 public void onnestedscroll(final coordinatorlayout coordinatorlayout, final floatingactionbutton child,
    final view target, final int dxconsumed, final int dyconsumed,
    final int dxunconsumed, final int dyunconsumed) {
 super.onnestedscroll(coordinatorlayout, child, target, dxconsumed, dyconsumed, dxunconsumed, dyunconsumed);
 if (dyconsumed > 0 && !this.misanimatingout && child.getvisibility() == view.visible) {
  // user scrolled down and the fab is currently visible -> hide the fab
  animateout(child);
 } else if (dyconsumed < 0 && child.getvisibility() != view.visible) {
  // user scrolled up and the fab is currently not visible -> show the fab
  animatein(child);
 }
 }

 // same animation that floatingactionbutton.behavior uses to hide the fab when the appbarlayout exits
 private void animateout(final floatingactionbutton button) {
 if (build.version.sdk_int >= 14) {
  viewcompat.animate(button).scalex(0.0f).scaley(0.0f).alpha(0.0f).setinterpolator(interpolator).withlayer()
   .setlistener(new viewpropertyanimatorlistener() {
   public void onanimationstart(view view) {
    scrollawarefabbehavior.this.misanimatingout = true;
   }

   public void onanimationcancel(view view) {
    scrollawarefabbehavior.this.misanimatingout = false;
   }

   public void onanimationend(view view) {
    scrollawarefabbehavior.this.misanimatingout = false;
    view.setvisibility(view.gone);
   }
   }).start();
 } else {
  animation anim = animationutils.loadanimation(button.getcontext(), r.anim.fab_out);
  anim.setinterpolator(interpolator);
  anim.setduration(200l);
  anim.setanimationlistener(new animation.animationlistener() {
  public void onanimationstart(animation animation) {
   scrollawarefabbehavior.this.misanimatingout = true;
  }

  public void onanimationend(animation animation) {
   scrollawarefabbehavior.this.misanimatingout = false;
   button.setvisibility(view.gone);
  }

  @override
  public void onanimationrepeat(final animation animation) {
  }
  });
  button.startanimation(anim);
 }
 }

 // same animation that floatingactionbutton.behavior uses to show the fab when the appbarlayout enters
 private void animatein(floatingactionbutton button) {
 button.setvisibility(view.visible);
 if (build.version.sdk_int >= 14) {
  viewcompat.animate(button).scalex(1.0f).scaley(1.0f).alpha(1.0f)
   .setinterpolator(interpolator).withlayer().setlistener(null)
   .start();
 } else {
  animation anim = animationutils.loadanimation(button.getcontext(), r.anim.fab_in);
  anim.setduration(200l);
  anim.setinterpolator(interpolator);
  button.startanimation(anim);
 }
 }
}

fab_in.xml 文件如下(fab_out.xml 同理),当然要改变淡出或者进入的样式,一般修改这里的 xml 文件就可以了 :

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

 <alpha android:fromalpha="0.0"
 android:toalpha="1.0"/>

 <scale android:fromxscale="0.0"
 android:fromyscale="0.0"
 android:toxscale="1.0"
 android:toyscale="1.0"
 android:pivotx="50%"
 android:pivoty="50%"/>
</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

 <alpha android:fromalpha="1.0"
 android:toalpha="0.0"/>

 <scale android:fromxscale="1.0"
 android:fromyscale="1.0"
 android:toxscale="0.0"
 android:toyscale="0.0"
 android:pivotx="50%"
 android:pivoty="50%"/>

</set>

大致效果就像上面。

总结

好了，以上就是这篇文章的全部内容了，希望本文的内容对各位android开发者们能带来一定的帮助，如果有疑问大家可以留言交流。