Floating Action Button 添加自定义动画

2016-07-05  本文已影响1005人  HunSem

在适当时机调用hide()和show()方法可以隐藏和显示FAB按钮,但是要如何添加自定义的动画效果呢?

自定义Behavior.gif
1. 在FAB的布局文件中指定behavior属性

app:layout:behavior指定要对该FAB绑定的动画效果, 也就是接下来要自定义的behavior,通过包名锁定到这个自定义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="@dimen/fab_margin"    
  android:src="@drawable/add_icon"        
 app:layout_behavior="com.huan.percy.FABBehaviorTest.behavior.ScrollAwareFABBehavior"/>
2. 编写自定义动画

新建一个自定义behavior类,继承自FloatingActionButton.Behavior

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).translationY(button.getHeight() + getMarginBottom(button)).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 {        
  }    
 }    
// 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).translationY(0)                    
      .setInterpolator(INTERPOLATOR).withLayer().setListener(null)                    
      .start();        
    } else {        
    }    
}    
  private int getMarginBottom(View v) {        
      int marginBottom = 0;        
      final ViewGroup.LayoutParams layoutParams = v.getLayoutParams();        
      if (layoutParams instanceof ViewGroup.MarginLayoutParams) {            
        marginBottom = ((ViewGroup.MarginLayoutParams) 
        layoutParams).bottomMargin;        
      }        
      return marginBottom;    
    }}
上一篇下一篇

猜你喜欢

热点阅读