Android中Fab(FloatingActionButton)實現上下滑動的漸變效果

2019-12-12 03:46:00

字體：大中小

來源：轉載

供稿：網友

前言

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>