效果图
如图SectionListView.gif,为了方便下面讲解实现原理,所以进行了着色。
![](https://img.haomeiwen.com/i1087027/5dd357d8deaec0e9.gif)
实现原理
1.代码请点击我;
2.实现原理同我的上一篇随笔移花接木1-仿百度外卖悬浮选项中的第一种实现方法,可以看完上篇随笔再来看本篇随笔。这里同样是两层布局,不过逻辑更复杂一些。效果图中着蓝色的就是悬浮的布局。
核心代码:ListView的OnScrollListener中的onScroll方法
前提
通过效果图,可以知道这个ListView有两种布局:分组(section)布局和普通布局。这里通过ListView多类型实现,而不是显示隐藏布局。为了下面讲解方便,我们将悬浮布局及着蓝色的布局叫做sectionView。
三种情况:
情况1,如下图。此时也就是ListView的header可见的情况下,sectionView不可见;
![](https://img.haomeiwen.com/i1087027/bfe866de46dd916f.png)
情况2,如下图。一个section到达顶部,此时将sectionView替换成当前section的布局,并将其完全显示出来。
(问题1:怎么将sectionView替换成当前section的布局);
![](https://img.haomeiwen.com/i1087027/ba35c3c7a56c9b9e.png)
情况3,如下图。即在sectionView没有完全隐藏的情况下,一个section遇到上一个section,两者应该是吸引关系,即一个往下,另一个也往下。(问题2:当一个section下滑拖出上一个"section"时,sectionView中的布局如何替换成上一个section的布局)
![](https://img.haomeiwen.com/i1087027/a5054722f48862d5.png)
问题解决
1.问题1:sectionView其实是一个ViewGroup。而获取section的布局则是通过调用现成的adapter.getView方法;
2.问题2:我这里是通过从当前position向上遍历直到找到上一个section,然后通过问题1的方法刷新布局。
网友评论