几行代码实现一个横向滑动指示器(淘宝首页分类样式)

前言部分

一个类似淘宝首页分类的效果,可以横向滑动.但是不viewpager的那种效果.

地址放到文末了

内容部分

思路:

1. 横向滑动的滑块需要跟随RecyclerView滑动.
2. 我们可以让滑块和RecyclerView一起滑动,但是由于滑块下的轨道和RecyclerView的长度不一致的,所以需要转化一下RecyclerView的滑动距离.
3. 通过一个比例尺性质的参数,实现滑块和RecyclerView同步滑动.

上面思路出来,下面写起来就容易了.

1. 首先我们需要获取这个比例尺,如下:

//传入RecyclerView获取横向长度
distance = getDistance(eight_rv)

//计算RecyclerView的所有item的长度,这里除以2因为是两排,如果是多排就除以多少(方法网上找的,自己有改了一下)
    private fun getDistance(mRecyclerView: RecyclerView): Int {
       val layoutManager = mRecyclerView.layoutManager as LinearLayoutManager?
       val firstVisibItem = mRecyclerView.getChildAt(0)
       val firstItemPosition = layoutManager!!.findFirstVisibleItemPosition()
       var itemCount = layoutManager.itemCount
       if (itemCount % 2 != 0) {
           itemCount += 1
       }
       val itemWidth = firstVisibItem.width
       val firstItemBottom = layoutManager.getDecoratedRight(firstVisibItem)
       return (itemCount - firstItemPosition - 1) / 2 * itemWidth - getScreenWidth() + firstItemBottom
   }

2. 计算出了RecyclerView的宽度,我们在计算一下滑块的轨道长度,关于滑块轨道长度,多少都行我这是随便写了一个数值.
3. 上面两者进行比例求值,如下:

 //比例尺,我的滑块是30 轨道是60 他们的比值是1:2
    val rule = dpToPx(context, 30f) / distance

上面之所以要保持比值是1:2,是因为RecyclerView最终会滑动一个自身的长度.也就是说滑块要滑动一个自身的长度.所以把轨道设置成滑块的二倍,是刚好的距离.

4. 监控RecyclerView滑动,把它的滑动距离乘以比例尺,刚好就是滑块的滑动距离了.如下:

//滑动的总距离
  len += dx
  //乘以比例尺
  tv_scroll_bar.setTranslationX(len * rule)

方法就是上面这一些,效果可以实现.不知道有什么不对的地方不.

结束部分

demo地址

纸上得来终觉浅，绝知此事要躬行