android 返回顶部按钮,Material Design系列之Behavior上滑显示返回顶部按钮

文章介绍了在Android中利用自定义Behavior实现底部返回顶部按钮渐显动画效果。先分析了传统实现方式,接着阐述自定义Behavior继承FloatingActionButton.Behavior,实现相关方法控制按钮显示隐藏,还给出动画实现代码及使用方法,最后解决初始显示问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

效果预览

bd1e73d37f63bcb3f559669df51bc362.gif

源码在文章末尾。

引文

有时候我们的页面内容过长的时候,滑动到页面底部用户再滑动到顶部很麻烦,Android不像iOS可以点击statusBar回到顶部,一般都是双击Toolbar/ActionBar或者在底部放一个按钮。

今天就底部放一个回到顶部按钮这个效果来做一个基于Behavior的实现。那么我们传统的方式来做就是监听这个滑动View,比如:ScrollView/ListView/RecyclerView/GridView等,那么如果我们使用了CoordinatorLayout,那么一切将会变得非常so easy。

今天我们就利用自定义Behavior来实现这个回到顶部按钮的渐显的动画效果。如果对我的Behavior博文感兴趣的,那么看官可以在文章顶部找到我其它关于Behavior的博文。

自定义Bahavior的实现?

我们选中CoordinatorLayout.Behavior后ctrl + t后发现有很多实现类,哪么我们选用哪个呢?这里就要看我们要操作(显示/隐藏)的按钮是谁了,到底能不能用系统已经实现了的基类?所以又抛出了以下问题。

自定义Behavior继承系统的哪个BaseBahavior?

这个问题其实就so easy了,只要接触过MD的人肯定听过一个FAB吧,也就是我们的FloatingActionButton了,所以我们这里也使用的是FloatingActionButton,所以我们自定义的Behavior也是基于FloatingActionButton的。

因此我们从中CoordinatorLayout.Behavior后ctrl + t的里面看到一个FloatingActionButton.Behavior,这个家伙就是我们要继承的,利用它来控制FloatingActionButton的显示和隐藏动画。

ScaleUpShowBehavior的实现

因为是向上滑动手指,出现下面部分的页面,显示Button是,所以我们暂且把它叫ScaleUpShowBehavior的实现。

接下来一大波代码来袭,首先我们要继承FloatingActionButton.Behavior:

public class ScaleUpShowBehavior extends FloatingActionButton.Behavior {

public ScaleUpShowBehavior(Context context, AttributeSet attrs) {

super();

}

}

接下来实现这里面重要的三个方法:

// 页面开始滑动。

onStartNestedScroll();

// 页面正在滑动。

onNestedScroll();

// 页面停止滑动。

onStopNestedScroll();

第一个方法onStartNestedScroll:

onStartNestedScroll(CoordinatorLayout l, FloatingActionButton c, View directTargetChild, View v, int nestedScrollAxes)

onStartNestedScroll望文生义啊,开始嵌套滚动的时候被调用,那么这个方法有一个boolean的返回值,是需要我们告诉CoordinatorLayout我这个Behavior要监听的滑动方向,因为我们是上下滑动时显示/隐藏FAB,所以这里我们返回return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL;。

第二个方法onNestedScroll:

onNestedScroll(CoordinatorLayout l, FloatingActionButton child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed)

嗯,你猜的没错,这个方法在滑动期间被调用,也就是正在滑动了。so,我们在这里控制view的动画。经过我的测试发现了一下规则:

if (dyConsumed > 0 && dyUnconsumed == 0) {

System.out.println("上滑中。。。");

}

if (dyConsumed == 0 && dyUnconsumed > 0) {

System.out.println("到边界了还在上滑。。。");

}

if (dyConsumed < 0 && dyUnconsumed == 0) {

System.out.println("下滑中。。。");

}

if (dyConsumed == 0 && dyUnconsumed < 0) {

System.out.println("到边界了,还在下滑。。。");

}

因此我们在的时候上滑,也就是用户需要看页面的下部分的时候显示FAB:

if (((dyConsumed > 0 && dyUnconsumed == 0) || (dyConsumed == 0 && dyUnconsumed > 0))

&& child.getVisibility() != View.VISIBLE) {// 显示

AnimatorUtil.scaleShow(child, null);

}

那么相反的,在用户手指下滑,显示页面上半部分的时候隐藏FAB:

if (((dyConsumed < 0 && dyUnconsumed == 0) || (dyConsumed == 0 && dyUnconsumed < 0))

&& child.getVisibility() != View.GONE && !isAnimatingOut) {

AnimatorUtil.scaleHide(child, viewPropertyAnimatorListener);

}

那么这里的完整的代码就是:

@Override

public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {

// if (dyConsumed > 0 && dyUnconsumed == 0) {

// System.out.println("上滑中。。。");

// }

// if (dyConsumed == 0 && dyUnconsumed > 0) {

// System.out.println("到边界了还在上滑。。。");

// }

// if (dyConsumed < 0 && dyUnconsumed == 0) {

// System.out.println("下滑中。。。");

// }

// if (dyConsumed == 0 && dyUnconsumed < 0) {

// System.out.println("到边界了,还在下滑。。。");

// }

if (((dyConsumed > 0 && dyUnconsumed == 0) || (dyConsumed == 0

&& dyUnconsumed > 0)) && child.getVisibility() != View.VISIBLE) {// 显示

AnimatorUtil.scaleShow(child, null);

} else if (((dyConsumed < 0 && dyUnconsumed == 0) || (dyConsumed == 0

&& dyUnconsumed < 0)) && child.getVisibility() != View.GONE && !isAnimatingOut) {

AnimatorUtil.scaleHide(child, viewPropertyAnimatorListener);

}

}

动画的与FAB显示隐藏的实现

眼尖的人肯定看到了,我们上面冒出来的几票未知代码:

AnimatorUtil.scaleShow();

AnimatorUtil.scaleHide();

isAnimatingOut;

viewPropertyAnimatorListener;

这是什么鬼呢?AnimatorUtil.scaleShow()用来动画渐显FAB,这个不是系统的,而是我们自定义的:

// 显示view

public static void scaleShow(View view, ViewPropertyAnimatorListener viewPropertyAnimatorListener) {

view.setVisibility(View.VISIBLE);

ViewCompat.animate(view)

.scaleX(1.0f)

.scaleY(1.0f)

.alpha(1.0f)

.setDuration(800)

.setListener(viewPropertyAnimatorListener)

.setInterpolator(FAST_OUT_SLOW_IN_INTERPOLATOR)

.start();

}

AnimatorUtil.scaleHide()用来渐渐隐藏FAB,当然也是我们自定义的动画啦:

// 隐藏view

public static void scaleHide(View view, ViewPropertyAnimatorListener viewPropertyAnimatorListener) {

ViewCompat.animate(view)

.scaleX(0.0f)

.scaleY(0.0f)

.alpha(0.0f)

.setDuration(800)

.setInterpolator(FAST_OUT_SLOW_IN_INTERPOLATOR)

.setListener(viewPropertyAnimatorListener)

.start();

}

viewPropertyAnimatorListener和isAnimatingOut用来监听隐藏动画的执行,当动画执行完毕后才view.setVisibility(View.GONE);了,这就是套路啊哈哈:

private boolean isAnimatingOut = false;

ViewPropertyAnimatorListener viewPropertyAnimatorListener = new ViewPropertyAnimatorListener() {

@Override

public void onAnimationStart(View view) {

isAnimatingOut = true;

}

@Override

public void onAnimationEnd(View view) {

isAnimatingOut = false;

view.setVisibility(View.GONE);

}

@Override

public void onAnimationCancel(View arg0) {

isAnimatingOut = false;

}

};

ScaleUpShowBehavior的使用

首先我们学系统一样在String.xml中定义一个值:

com.yanzhenjie.definebehavior.behavior.ScaleUpShowBehavior

然后在xml布局中使用:

android:id="@+id/fab"

...

app:layout_behavior="@string/scale_up_show_behavior" />

当然你也完全在xml布局中直接写这个类的全类名,但是这样子不利于以后修改这个类所在的包:

app:layout_behavior="com.yanzhenjie.definebehavior.behavior.ScaleUpShowBehavior"

好了,琐碎的扯完了,把这个布局的完整代码撸上来:

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent">

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"

app:popupTheme="@style/AppTheme.PopupOverlay" />

android:id="@+id/recyclerView"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior" />

android:id="@+id/fab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|end"

android:layout_margin="16dp"

android:src="@mipmap/abc_ic_ab_back_top"

app:layout_behavior="@string/scale_up_show_behavior"

app:layout_scrollFlags="scroll|enterAlways|snap" />

然后给RecyclerView随便给点数据,跑起来看看哈哈,是不是完美啊?

对了,有的同学在activity一运行起来就看到了这个FAB,所以我们需要在onWindowFocusChanged()中隐藏下:

private boolean isInitializeFAB = false;

@Override

public void onWindowFocusChanged(boolean hasFocus) {

super.onWindowFocusChanged(hasFocus);

if (!isInitializeFAB) {

isInitializeFAB = true;

hideFAB();

}

}

private void hideFAB() {

FAB.postDelayed(new Runnable() {

@Override

public void run() {

AnimatorUtil.scaleHide(FAB, new ViewPropertyAnimatorListener() {

@Override

public void onAnimationStart(View view) {

}

@Override

public void onAnimationEnd(View view) {

FAB.setVisibility(View.GONE);

}

@Override

public void onAnimationCancel(View view) {

}

});

}

}, 500);

}

完美啊!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值