美文网首页
Floating Action Button 添加自定义动画

Floating Action Button 添加自定义动画

作者: HunSem | 来源:发表于2016-07-05 09:35 被阅读1005次

    在适当时机调用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;    
        }}
    

    相关文章

      网友评论

          本文标题:Floating Action Button 添加自定义动画

          本文链接:https://www.haomeiwen.com/subject/cojhjttx.html