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.Toolbarandroid: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.TabLayoutandroid: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 FABanimateOut（child）; } else if （dyConsumed < 0 && child.getVisibility（） ！= View.VISIBLE） {// User scrolled up and the FAB is currently not visible -> show the FABanimateIn（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）;}@Overridepublic 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开发者们能带来一定的帮助，如果有疑问大家可以留言交流。