CoordinatorLayout使用AppBarLayout+ViewPager点击按钮回到顶部

如何写一个折叠布局
相信大部分人都会首先想到CoordinatorLayout
没错,使用CoordinatorLayout,然后再使用AppBarLayout很容易就能实现优雅的折叠布局

但是如果产品要你在右下角加一个按钮点击回到顶部呢,并且滑动到一定距离才会显示,默认不显示。
我最先想到的是ScrollView,但是很遗憾会滑动冲突,然后我尝试了重写onTouchEvent和onInterceptTouchEvent但是都不是很好。
最后放弃ScrollView,退而求其次实现了一个没有滚动效果的回到顶部(个人感觉很不优雅)

显示与隐藏

显示与隐藏这个很简单可以写一个View也可以使用一张图片,主要看你的需求
那么距离如何判断呢?
使用AppBarLayout的addOnOffsetChangedListener方法
直接上代码

mBinding.appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                if (verticalOffset >=0 ){
                    mBinding.toTop.setVisibility(View.GONE);
                }else {
                    mBinding.toTop.setVisibility(View.GONE);
                    if (verticalOffset < -1250){
                        mBinding.toTop.setVisibility(View.VISIBLE);
                    }
                }
            }
        });

判断verticalOffset的值就行了
最顶部的值是0,越往下滑值越小

回到顶部

滑动距离我们已经得出,那么只需要实现点击后的回到顶部就行了
使用AppBarLayout的behavior属性,详细只是建议另找大佬的文章学习,我就不多写了,免得暴露自己水平
直接看代码

ViewGroup.LayoutParams layoutParams = mBinding.appBarLayout.getLayoutParams();
            AppBarLayout.Behavior behavior = (AppBarLayout.Behavior) ((CoordinatorLayout.LayoutParams) layoutParams).getBehavior();
            if (behavior != null) {
                behavior.setTopAndBottomOffset(0);
                mBinding.toTop.setVisibility(View.GONE);
            }

最主要的就是这句behavior.setTopAndBottomOffset(0);
因为我是直接回到顶部,所以直接使用了0
如果你想回到某个组件的位置,在这句前面加上获取组件位置的代码:

float y = mBinding.tvTop.getY();//获取组件的位置
behavior.setTopAndBottomOffset((int) -y);

然后就大功告成了
点击后会直接跳到顶部,没有过度过程
如果大佬有更好的方法欢迎评论指导下(非常感谢)

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值