美文网首页自定义控件
CoordinatorLayout使用AppBarLayout+

CoordinatorLayout使用AppBarLayout+

作者: DunerGee | 来源:发表于2022-05-09 17:57 被阅读0次

    如何写一个折叠布局
    相信大部分人都会首先想到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);
    

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

    相关文章

      网友评论

        本文标题:CoordinatorLayout使用AppBarLayout+

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