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);
                }
            });