Android仿天猫横向滑动指示器

Android开发中会有很多很新奇的交互,比如天猫商城的首页头部的分类,使用的是GridLayoutManager+横向指示器实现的,效果如下图。
在这里插入图片描述

那对于这种效果要如何实现呢?最简单的方式就是使用RecyclerView+GridLayoutManager,我们知道RecyclerView可以实现九宫格,接下来就是通过RecyclerView控制指示器的显示位置,逻辑实现如下:

  1. 计算出RecyclerView划出屏幕的距离w1和剩余宽度w2的比例y,y = w1 / (总宽度w3 - 可使视区域宽度w4)
  2. 计算出指示器该移动的距离w5 = y * (指示器的总宽度w6 - 滑块宽度w7)
  3. 指示器布局,并控制位置

首先,我们创建两个drawable文件,分别用于表示指示器的默认背景和选中的背景。
indicator_bg_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="5dp" />
    <solid android:color="@color/gray_9" />
</shape>

indicator_b