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);
然后就大功告成了
点击后会直接跳到顶部,没有过度过程
如果大佬有更好的方法欢迎评论指导下(非常感谢)
共有 0 条评论