幾行代碼實現一個橫向滑動指示器(淘寶首頁分類樣式)

前言部分

一個類似淘寶首頁分類的效果,可以橫向滑動.但是不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地址

紙上得來終覺淺，絕知此事要躬行