Android之MaterialDesign使用（三）——SwipeRefreshLayout+CoordinatorLayout+AppBarLayout+CollapsingT…

前面两篇对Material Design的基本控件做了介绍，但是那些相对来说都是比较孤立的，而且我们知道实践才是硬道理，所以，今天我们就利用前面学习到了简单的实现一个比较炫酷的效果，废话不多说，直接上效果图。

滚动悬停.gif

这个效果如果在不知道Material Design之前，可能实现起来会很麻烦，至少对于我来说会一时间感觉无从下手，很多人会说，可以使用事件分发来实现，但是看到这个效果我觉得光想想里面到底要触发多少事件头就大了，但是如果我们使用Material Design来实现的话不仅速度快，而且代码量很少，下面我们一起来看看吧。

效果分析

1.有一个下拉刷新的功能
2.书籍、乌托邦、播客是可以滑动切换的
3.上面背景图滑动到看不见的时候我的字眼会出来，而且整个View的背景会变成纯白
4.继续向上滑动最近、收藏、下载、订阅会悬停，而且将滑动事件交给底部的控件执行
5.向下滑动的时候会慢慢复原到之前的状态

大致分析后基本的效果就是这些，下面我们一个一个来实现

功能一：实现下拉刷新的功能

实现这个功能非常简单，利用系统提供的SwipeRefreshLayout就可以了，但是需要注意的是，在使用SwipeRefreshLayout的过程中，特别是在滑动的过程中，如果子View里面包含了AppBarLayout会产生滑动冲突，因为两者都支持滑动；同时需要注意的是如果子View里面包含了ViewPager，你在滑动的过程中同样会产生滑动冲突，因为系统会无法判断事件交给谁处理，针对这两个滑动冲突，解决的办法为：

AppBarLayout与SwipeRefreshLayout刷新滑动冲突解决

appbarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { @Override public void onOffsetChanged(AppBarLayout appBarLayout, final int verticalOffset) { mSwipeRefreshLayout.setEnabled(verticalOffset >= 0);//页面滑动到顶部，才可以下拉刷新 } });

ViewPager与SwipeRefreshLayout刷新滑动冲突解决
在SwipeRefreshLayout处理事件的监听

/** * author: zhoufan * data: 2021/4/28 17:34 * content: 解决ViewPager与SwipeRefreshLayout的滑动冲突 */ public class VpSwipeRefreshLayout extends SwipeRefreshLayout { private float startY; private float startX; // 记录viewPager是否拖拽的标记 private boolean mIsVpDragger; private final int mTouchSlop; public VpSwipeRefreshLayout(Context context, AttributeSet attrs) { super(context, attrs); mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop(); } @Override public boolean onInterceptTouchEvent(MotionEvent ev) { int action = ev.getAction(); switch (action) { case MotionEvent.ACTION_DOWN: // 记录手指按下的位置 startY = ev.getY(); startX = ev.getX(); // 初始化标记 mIsVpDragger = false; break; case MotionEvent.ACTION_MOVE: // 如果viewpager正在拖拽中，那么不拦截它的事件，直接return false； if(mIsVpDragger) { return false; } // 获取当前手指位置 float endY = ev.getY(); float endX = ev.getX(); float distanceX = Math.abs(endX - startX); float distanceY = Math.abs(endY - startY); // 如果X轴位移大于Y轴位移，那么将事件交给viewPager处理。 if(distanceX > mTouchSlop && distanceX > distanceY) { mIsVpDragger = true; return false; } break; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_CANCEL: // 初始化标记 mIsVpDragger = false; break; } // 如果是Y轴位移大于X轴，事件交给swipeRefreshLayout处理。 return super.onInterceptTouchEvent(ev); } }

功能二：书籍、乌托邦、播客是可以滑动切换的

滑动切换也是比较简单的，我们可以利用TabLayout+ViewPager来实现，具体的实现方式为:

定义布局：

代码实现：

String[] mTabList = new String[]{getString(R.string.book), getString(R.string.utopia), getString(R.string.podcast)}; ArrayList mTabFragmentList = new ArrayList(); mMineBookFragment = new MineBookFragment(); mMinePodCastFragment = new MinePodCastFragment(); mMineUtopiaFragment = new MineUtopiaFragment(); mTabFragmentList.add(mMineBookFragment); mTabFragmentList.add(mMineUtopiaFragment); mTabFragmentList.add(mMinePodCastFragment); mAdapter = new DynamicFragmentAdapter(getChildFragmentManager(), mTabFragmentList, mTabList); mMineViewPager.setAdapter(mAdapter); mMineTab.setViewPager(mMineViewPager); mMineViewPager.setOffscreenPageLimit(3);

功能三：上面背景图滑动到看不见的时候 我的 字眼会出来，而且整个View的背景会变成纯白。

我的 字眼的出现是由于手指在屏幕上面不断向上滑动，将背景图移出了整个屏幕，所以对于这种嵌套滑动而言，上面的那一部分一定是被AppBarLayout包裹的内容，所以我们只需要监听AppBarLayout的滑动事件就可以了

appBarLayout.addOnOffsetChangedListener((appBarLayout, verticalOffset) -> { // 解决AppBarLayout与SwipeRefreshLayout滑动冲突 mSwipeRefreshLayout.setEnabled(verticalOffset >= 0); // 判断appBarLayout被滑动的距离是否超过appBarLayout总高度的一半 if (-verticalOffset >= appBarLayout.getTotalScrollRange() / 2) { // 修改Toolbar的背景颜色 toolbar.setBackgroundColor(getResources().getColor(R.color.windowBackground)); // 设置 我的 透明度从而实现 我的 显示与隐藏 mTypeMine.setAlpha(1); } else { toolbar.setBackgroundColor(getResources().getColor(R.color.transparent)); mTypeMine.setAlpha(0); } });

功能四：继续向上滑动最近、收藏、下载、订阅会悬停，而且将滑动事件交给底部的控件执行

要实现上下滚动的嵌套配合，则需要使用到CoordinatorLayout控件，从前面两篇的分析可知，要实现这种滚动效果，我们的布局文件应该对应的结构是这样的

// 设置整个背景图 // 设置Toolbar(我的、以及右边设置等3个图标) // 设置最近、收藏、下载、订阅

整个结构虽然看起来像是挺复杂的，但是其实如果你仔细分析一下就会发现还是挺好懂的，基于上述的结构就可以实现滑动嵌套的效果啦，当然，向下滑动的时候也会慢慢呈现出初始的状态，最后看下整个XML的布局的效果。

代码实现

基于上面的XML布局文件，其实需要我们硬编码的就不是很多了

第一步：实现书籍、乌托邦、播客的滑动切换

String[] mTabList = new String[]{getString(R.string.book), getString(R.string.utopia), getString(R.string.podcast)}; ArrayList mTabFragmentList = new ArrayList(); mMineBookFragment = new MineBookFragment(); mMinePodCastFragment = new MinePodCastFragment(); mMineUtopiaFragment = new MineUtopiaFragment(); mTabFragmentList.add(mMineBookFragment); mTabFragmentList.add(mMineUtopiaFragment); mTabFragmentList.add(mMinePodCastFragment); mAdapter = new DynamicFragmentAdapter(getChildFragmentManager(), mTabFragmentList, mTabList); mMineViewPager.setAdapter(mAdapter); mMineTab.setViewPager(mMineViewPager); mMineViewPager.setOffscreenPageLimit(3);

第二步：实现AppBarLayout的滑动监听和SwipeRefreshLayout的监听

appBarLayout.addOnOffsetChangedListener((appBarLayout, verticalOffset) -> { mSwipeRefreshLayout.setEnabled(verticalOffset >= 0); if (-verticalOffset >= appBarLayout.getTotalScrollRange() / 2) { toolbar.setBackgroundColor(getResources().getColor(R.color.windowBackground)); mTypeMine.setAlpha(1); } else { toolbar.setBackgroundColor(getResources().getColor(R.color.transparent)); mTypeMine.setAlpha(0); } }); mSwipeRefreshLayout.setColorSchemeResources(R.color.colorE6B536); mSwipeRefreshLayout.setOnRefreshListener(() -> requestData());

就这两步就可以了，其他的效果在XML文件里面本身就已经实现了。哈哈哈，看来有了Material Design，实现嵌套滑动就容易多了。