recyclerView 横条指示器——仿淘宝菜单模块

电商首页菜单模块，可以横向滑动，底部的滑动位置指示器 如何实现呢？

下图是淘宝首页的示例。

首页思路很清晰：

1、横向滑动recyclerView： 内容长度w1 大于recyclerView的视图长度w2（这里就是屏幕宽度），两者差值就是在屏幕外的长度。

2、位置指示器： 固定的灰色背景 理解为 对应 recyclerView 内容长度w1，可滑动的 橙色指示器 对应recyclerView的视图长度w2

3、所以，固定的灰色背景宽- 橙色指示器宽，就对应w1-w2

4、所以，计算出比例关系，当recyclerView横向滑动了X，指示器就滑动 X*比例，即可。

代码如下：给recyclerView添加滚动监听，在onScrolled中计算 指示器要滑动的距离 然后滑动 即可。

recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
                @Override
                public void onScrolled(RecyclerView recyclerView, int dx, int dy) {


                    //当前RcyclerView显示区域的高度。水平列表屏幕从左侧到右侧显示范围
                    int extent = recyclerView.computeHorizontalScrollExtent();

                    //整体的高度，注意是整体，包括在显示区域之外的。
                    int range = recyclerView.computeHorizontalScrollRange();

                    //已经滚动的距离，为0时表示已处于顶部。
                    int offset = recyclerView.computeHorizontalScrollOffset();


                    //计算出溢出部分的宽度，即屏幕外剩下的宽度
                    float maxEndX = range - extent;

                    //计算比例
                    float proportion = offset / maxEndX;

                    int layoutWidth = mIndicatorLayout.getWidth();
                    int indicatorViewWidth = mIndicatorView.getWidth();
                    //可滑动的距离
                    int scrollableDistance = layoutWidth - indicatorViewWidth;

                    //设置滚动条移动
                    mIndicatorView.setTranslationX(scrollableDistance * proportion);
                }
            });