android 自动向上滑动效果,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 控件的布局如下:

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:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/AppTheme.AppBarOverlay">

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:id="@+id/tab_layout"

app:tabIndicatorColor="#FFFFFF"

android:layout_width="match_parent"

android:layout_height="wrap_content">

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"/>

实现的 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 int dxConsumed,final int dyConsumed,final int dxUnconsumed,final int dyUnconsumed) {

super.onNestedScroll(coordinatorLayout,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 文件就可以了 :

android:toAlpha="1.0"/>

android:fromYScale="0.0"

android:toXScale="1.0"

android:toYScale="1.0"

android:pivotX="50%"

android:pivotY="50%"/>

android:toAlpha="0.0"/>

android:fromYScale="1.0"

android:toXScale="0.0"

android:toYScale="0.0"

android:pivotX="50%"

android:pivotY="50%"/>

大致效果就像上面。

总结

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

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！