仿触手直播首页切换效果

博客地址

http://www.jianshu.com/u/7b186b7247c1

源码地址

https://github.com/1002326270xc/ChuShouView-master

文章目录

1. 前言
2. 效果图
3. 如何使用
4. 源码分析
5. 总结

1

前言

前几天在看手机直播的时候，自己就用上了触手app。一进到主页就看上了里面页面切换的效果，自己想这种效果用什么控件可以实现呢。不闲扯了，直接上图更有意思。

2

效果图

触手app主页效果图

看到这个效果图后，第一想到的就是RecyclerView貌似可以实现这种效果，但是用RecyclerView自己的api还是有很多问题的，先不说如何实现的吧，看下实现出来的效果图吧:

图片式

流式布局

多种样式

3

如何使用

gradle依赖:

设置Manager:

设置触摸辅助类ChuShouCallBack:

设置Adapter:

这里面的流式布局的Adapter和多种样式的Adapter有一个共同点，它们的item都是带有滑动结构的，因此这里我把它们的结构当成RecyclerView+RecyclerView来处理了，而上面的图片式结构就是RecyclerView+ImageView来处理了，大家可以着重看看ChuShouScrollAdapter和ChuShouGridAdapter代码：

ChuShouGridAdapter:

ChuShouScrollAdapter：

R.layout.scroll_item_layout:

使用方面就注意这些了，下面就讲讲是怎么实现。

4

源码分析

下面就来讲讲如何用RecyclerView如何实现上面的效果了:

先来张自己画的思路草图吧:

这里整体就是一个RecyclerView了，而且在初始的时候，需要定义我们自己的Layoutmanager，代码里面可见(ChuShouManager)该类,该Layoutmanager的功能就是让最后一个item在屏幕的上面显示，第一个item在屏幕中显示，第二个item到倒数第二个item在屏幕的下面显示。所以手机上面显示的永远是RecyclerView中第一个item了，只不过在手指滑动的时候，去改变数据源。

好了，第一步终于完成啦，下面就是RecyclerView的touch相关代码控制了，关于touch的控制，我们需要接触到android.support.v7.widget.helper.ItemTouchHelper.Callback该类了:

从源码截图中看到该类是一个静态的抽象类，说明我们要使用的时候，需要去实现该类了。这里定义了一个实现类ChuShouCallBack，CallBack抽象类定义了只是定义了我们的Drag(拖拽)动作，实际上我们要用的是SimpleCallback子类，该类实现了我们的Swipe(滑动)动作。因此这里需要屏蔽Drag动作，实现Swipe动作。

屏蔽Drag动作，实现Swipe动作:

下面看看RecyclerView滑动Item的监听

这里看似代码这么长，其实是在下拉的时候，获取到的nextView对应的是屏幕上方的item，也就是RecyclerView的最后一个item，因为最后一个item是放在了屏幕的上面；在上拉的时候，获取到的nextView对应的是屏幕下方的item，也就是RecyclerView的第二个item。

上面的代码只是处理我们的滑动，至于说松手的处理还没说呢。这里也正好说下onSwipe什么时候触发。这里需要介绍一个方法:

源码说是只要滑动位置超过了RecyclerView的width或height时就会触发onSwiped方法，我们这里不需要去动该值就可以了，默认就可以,这里也正好是RecyclerView高度一半的距离，在松手的时候就触发onSwipe方法

接下来看看onSwiped都做了些什么:

这里处理了数据跟接口的回调的监听，接下来看看refreshData方法做了些什么：

关于外层的RecyclerView滑动处理就先说这么多，下面来介绍如何处理内层带有滑动结构的RecyclerView,两个都有滑动结构，何时才让内层的RecyclerView,何时让外层的RecyclerView滑动呢：

这个时候来看下里面的SlideRecyclerView内部滑动的处理:

监听SlideRecyclerView滑动位置来动态设置外层的RecyclerView是否有滑动处理。总结下来是两种情况:一种是SlideRecyclerView滑动到了顶部，此时如果往上滑的时候，需要禁掉外层的RecyclerView的滑动，直接调用chuShouCallBack.setDefaultSwipeDirs(0)方法就可禁掉外层的滑动。另一种是SlideRecyclerView滑动到了底部，此时如果往下滑的时候，也需要禁掉外层的RecyclerView滑动。

说到这的时候很多人好奇为什么监听SlideRecyclerView滑动处理没有打开外层的RecyclerView代码呢。这里打开外层的RecyclerView滑动需要放在ontouch里面处理。因为在SlideRecyclerView滑动监听里面是无法监听到如果滑动到顶部时继续往下滑和滑动到底部时继续往上滑的操作，因此这里就通过ontouch的坐标该变量来是否打开外层的RecyclerView滑动:

这里涉及到了三种情况:

(1)SlideRecyclerView滑动到顶部的时候，继续往下滑的时候，需要打开外层的RecyclerView滑动

(2)SlideRecyclerView滑动到底部的时候，继续往上滑的时候，需要打开外层的RecyclerView滑动

(3)SlideRecyclerView滑动到中间某一个位置的时候，不管往上滑还是往下滑需要禁掉外层的RecyclerView滑动

核心代码就这么多了，关于使用方面如果还有什么疑问，可以直接看demo，也可以直接跟我探讨，欢迎提出issue

5

总结

结构分析:

整体外层是一个大的RecyclerView(这里定义成ScrollRecyclerView,为了对外提供自己的ChuShouCallBack),里面的item分两种情况，一种是带有滑动结构，一种是非滑动结构。滑动结构的话又定义了一个RecyclerView(这里定义成SlideRecyclerView,处理滑动的)。

分析item的排列: 这里就是ChuShouManager的职责了，它负责把最后一个item放在屏幕上方，第一个item放在屏幕中，从第二个item到倒数第二个item放在屏幕下方。

处理touch的动作: ChuShouCallBack就是扮演该角色了，用来处理上拉和下拉改变item的透明度和平移量。最后在onSwipe时恢复item状态及改变数据源

处理item本身带有滑动(SlideRecyclerView)和外层RecyclerView滑动冲突:

这里就是分析何时去禁掉外层RecyclerView滑动，何时打开滑动。原则是当item滑动到顶部时，若再继续往上滑禁掉外层RecyclerView滑动，若再继续往下滑打开外层RecyclerView滑动；当item滑动到中间某一个位置时，此时不管再继续往上滑还是往下滑都是禁掉外层RecyclerView滑动；当item滑动到底部时，若再继续往上滑打开外层RecyclerView滑动，若再继续往下滑禁掉外层RecyclerView滑动。