ViewPager+GridView实现水平滑动和点击背景色切换

需求

实现2行4列,可以水平滑动的列表,有指示器提示当前页,同时点击切换背景色,如下图:

image.png

分析

  • 2行4列,水平滑动

GridView实现网格效果,水平滑动用ViewPager实现

  • 指示器指示当前页

直接在ViewPager下方设置一个ViewGroup,用于动态显示指示器

  • 点击当前页的某一项,更换这一项的背景色(这里有个坑,下文分析)

给数据设置一个标志参数,选中设置为true ,未选中设置为false ,选中后刷新页面

实现

网上有大神已经实现了基本的效果,,我这里分析上面说到的一个坑

网上大神实现的效果(没有实现点击切换背景色),链接如下:

https://www.cnblogs.com/wangfengdange/archive/2016/10/27/6004576.html

上面链接实现的效果有人说可以在adapter中设置一个临时变量,然后点击的时候改变这个临时变量,在adapter 的getVIew()方法中判断这个变量去显示背景色,这中方法在这里我没实现出效果,可能是我姿势不对吧,有实现的可以告知一下谢谢。邮箱:Aller_Dong@163.com

网上实现点击切换背景色的办法(我没实现出来)猜测可能原因是GridView是动态添加到ViewPager中导致

https://yq.aliyun.com/wenzhang/show_48022

当然了,需求下来肯定要实现的。点击切换背景(这里需要感谢成哥的指导)。话不多说我的实现如下:

  • 设置一个全局变量用于存储点击的position
  • 设置一个Map集合,用于存储点击的position所在ViewPager的页码,key为页码,value为对应的position
  • 用一个集合去存储adapter
  • ViewPagersetOnPageChangeListener方法中去监听滑动,如果当前页没有Item被点击,那么遍历所有的数据,给数据的标志设为false,如果有点击项,给点击的数据的标志设置为true,最后notifyDataSetChange()

源码地址

代码主要在viewpager_gridview包下,这是个需求demo的测试项目,代码很乱,请见谅!

GitHub

小额支持我写出更好的文章~