一 基礎：

自定義View實現(xiàn)跟隨手指滾動的刻度尺，實現(xiàn)了類似SeekBar的滑動選中效果。項目地址，歡迎star！

UI圖：

功能：

• 通過設置最小值跟最大值的范圍，以及offset值。View將根據(jù)這些數(shù)據(jù)去計算出需要幾個小刻度和幾個長刻度，和每個長刻度上面顯示的數(shù)值。
• 指針可以隨意的定制。
• 當滑動停止后，刻度尺會根據(jù)四舍五入將距離指針最近的長刻度滑動到指針的位置。
• 支持范圍越界回彈。
• 支持設置默認值。

二 實現(xiàn)：

先扯一下，再看別人寫的控件的時候總有一種一臉懵逼的感覺，好多凌亂的變量和一大堆的計算邏輯都不知道干嘛用的。比如：PullToRefreshLayout。除非自己按著整體的設計流程寫一遍，一步步的寫，等出了bug你就明白那些操作的價值。結合之前讀第三方控件的經(jīng)驗，寫這個刻度尺控件的時候就一步步的去完成，從簡單的繪制，到點擊事件，再到滑動fling，最后滑動結束更正滑動位置。每一步遇到的問題都記錄下來，之后再補全解決方法，這就是成長。

1.繪制刻度

這里省略了onMeasure，這里的需求只是計算一下高度就好了。接著看onDraw方法:

 private void drawRuler(Canvas canvas) {
   mTextIndex = 0;
  for (int index = 0; index <= mRulerHelper.getCounts(); index++) {
   boolean longLine = mRulerHelper.isLongLine(index);
   int lineCount = mLineWidth * index;
   mRect.left = index * mLineSpace + lineCount + mMarginLeft;
   mRect.top = getStartY(longLine);
   mRect.right = mRect.left + mLineWidth;
   mRect.bottom = getEndY();
   if (longLine) {
    if (!mRulerHelper.isFull()) {
     mRulerHelper.addPoint(mRect.left);
    }
    String text = mRulerHelper.getTextByIndex(mTextIndex);
    mTextIndex++;
    canvas.drawText(text, mRect.centerX(), getMeasuredHeight() - dpFor14, mTextPaint);
   }
   canvas.drawRect(mRect, mLinePaint);
   mRect.setEmpty();
  }
 }

這里解釋一下為什么刻度采用Rect而不是設置line的寬度，其實最簡單的就是設置Paint的寬度然后canvas.drawLine()。剛繪制的時候就是采用的canvas.drawLine()，繪制完之后發(fā)現(xiàn)每個刻度的寬度都被削減了一半，canvas.drawLine()是在設置的（x，y）坐標開始平分line的寬度的（這個你要去體驗一下就會明白）。所以給定坐標之后每個刻度看起來就像是被擠了一樣，所以才采用Rect簡單方便一點。進入正題，繪制有幾個問題：

• 怎么確定要繪制幾個Rect？

這個比較靈活，要看具體的需求了。也就是一大格里面包含幾個刻度，一般是包含10個刻度，刻度包括長短刻度。然后一大格刻度表示多少數(shù)值，也就是offSet值是多少。之后刻度的范圍也要明確并且能被offSet整除，比如范圍是（low，height），那么（height-low）/（offSet/10）就是你需要繪制多少個刻度。

 public void setScope(int start, int count,int offSet) {
  if(offSet != 0) {
   this.offSet = offSet;
  }
  lineNumbers = (count - start) / (this.offSet / 10);
 }

• 怎么確定那個是長刻度？

這個問題要確定一大格之間有幾個小刻度了，一般為10個的話，那么當前的index/10能整除就是到了該繪制長刻度的時候了，mRulerHelper.getCounts()就是我們計算出的總共有幾個刻度。

for (int index = 0; index <= mRulerHelper.getCounts(); index++) {
   boolean longLine = mRulerHelper.isLongLine(index);
   ...
   if (longLine) {
    canvas.drawText(text, mRect.centerX(), getMeasuredHeight() - dpFor14, mTextPaint);
   }
   canvas.drawRect(mRect, mLinePaint);
}   

之后呢就是我們計算Rect的左邊跟繪制Text的坐標了。。。不細講。。。具體可看這里啊。

有個問題就是你得明白Rect的left top right bottom分別表示那個區(qū)間：

[圖片上傳失敗...(image-5d1f26-1554206618213)]

2.處理點擊事件

目前采取的是點擊該View的事件全攔截，感覺也沒別的什么需求需要過濾事件了。事件處理起來很簡單的就是計算出每次移動的差值就好了：

   case MotionEvent.ACTION_DOWN:
    mPressUp = false;
    isFling = false;
    startX = event.getX();
    break;
   case MotionEvent.ACTION_MOVE:
    mPressUp = false;
    float distance = event.getX() - startX;
    if (mPreDistance != distance) {
     doScroll((int) -distance, 0, 0);
     invalidate();
    }
    startX = event.getX();
    break;

問題就是：

• 怎么實現(xiàn)滑動的效果？

刻度尺如果范圍很大的話總寬度肯定會超出屏幕的，但是Canvas不會繪制屏幕之外的部分，除非等到屏幕之外的部分顯示出來。另外讓View滑動的方法很多，最初使用的是scrollTo方法，該方法滑動的是View的內容，也符合我們要的效果，不過結果查強人意。差值計算之后稍微一滑動，刻度直接沒了，成了一片空白，看起來那個變化值也不大，ok！這是一個疑問ScrollTo+invalidate內容不會顯示，直接沒了。之后呢換成了Scroller，這個玩意不用太多的介紹了，使用之后便達到了我們想要的效果，一樣的變化值。

 private void doScroll(int dx, int dy, int duration) {
  mScroller.startScroll(mScroller.getFinalX(), mScroller.getFinalY(), dx, dy, duration);
 }

是否有疑問？既然屏幕之外的東西Canvas不會去繪制，那么滑動的時候肯定是將屏幕之外的部分滑到屏幕中，也就是在滑動的過程中要繼續(xù)繪制。從上面的繪制代碼能看到這個繪制過程中跟滑動并沒有任何的聯(lián)系，只是單純的for循環(huán)繪制而已，為什么呢？第一 我們scrollTo移動的是View的內容，一開始View的實際寬度會超過屏幕的寬度，當沒有滑動的時候，View只會繪制屏幕中的可見區(qū)域，即使for循環(huán)依然執(zhí)行也不會繪制到屏幕外面，然后在滑動的時候會不斷的觸發(fā)invalidate()方法，也就是for循環(huán)會被觸發(fā)，View開始在新出現(xiàn)的未繪制的區(qū)域繪制。已經(jīng)繪制過的區(qū)域會被滑出屏幕，這樣就會給用戶一個平滑的效果。做完以上兩步你的刻度尺已經(jīng)有了滑動的效果了。下面就是解決邊界的問題。

3.邊界的處理

UI說當超過邊界之后松手回彈，這樣的交互效果好。這種交互其實最簡單了，在手指離開的時候計算當前的x坐標距離中心指針的x坐標的距離，然后讓Scroller去執(zhí)行回彈的效果。不過這個操作是整個控件中最為重要的一步，因為當手指抬起的時候，中間指針必須指向一個長刻度，不能停留再短刻度上面，那這個操作就跟邊界回彈的操作重合了，邊界回彈也是讓最小或者最大長刻度滑動到中間指針的位置。所以松手之后的操作就分為三種：

currentX ：滑動停止時的x坐標。

Point：中間指針位置。

low：刻度尺的最小邊界。

height：刻度尺的最大邊界。

• 當前的currentX小于中間指針刻度Point的x坐標，并且小于刻度的最小值low的x坐標。

-----------------Point-currentX--low------height----------

• 當前的currentX小于中間指針刻度Point的x坐標，并且大于刻度的最小值low表示的x坐標小于刻度尺的最大刻度height的x坐標。

------low-------currentX--Point--------height----------

• 當前的currentX大于中間指針刻度Point的x坐標，并且大于刻度的最大值height表示的x坐標。

------low-------height-----currentX-Point-------

簡單的表示了一下三種位置。

處理就是，先計算出滑動結束之后的當前x坐標跟中間Point的x坐標的距離，然后不為0就使用Scroller滑動：

//計算距離
public int getScrollDistance(int x) {
  for (int i = 0; i < mPoints.size(); i++) {
   int pointX = mPoints.get(i);
   if (0 == i && x < pointX) {
    //當前的x比第一個位置的x坐標都小 也就是需要往右移動到第一個長線的位置.
    setCurrentText(0);
    return x - pointX;
   } else if (i == mPoints.size() - 1 && x > pointX) {
    //當前的x比最后一個左邊的x都大,也就是需要往左移動到最后一個長線位置.
    setCurrentText(texts.size() - 1);
    return x - pointX;
   } else {
    if (i + 1 < mPoints.size()) {
     int nextX = mPoints.get(i + 1);
     if (x > pointX && x <= nextX) {
      int distance = (nextX - pointX) / 2;
      int dis = x - pointX;
      if (dis > distance) {
       //說明往下一個移動
       setCurrentText(i + 1);
       return x - nextX;
      } else {
       setCurrentText(i);
       //往前一個移動
       return x - pointX;
      }
     }
    }
   }
  }
  return 0;
 }

開始執(zhí)行滑動:

 public void scrollFinish() {
  int finalX = mScroller.getFinalX();
  int centerPointX = mRulerHelper.getCenterPointX();
  int currentX = centerPointX + finalX;
  int scrollDistance = mRulerHelper.getScrollDistance(currentX);
  if (0 != scrollDistance) {
   //第一個參數(shù)是滾動開始時的x的坐標
   //第二個參數(shù)是滾動開始時的y的坐標
   //第三個參數(shù)是在X軸上滾動的距離, 負數(shù)向右滾動.
   //第四個參數(shù)是在Y軸上滾動的距離,負數(shù)向下滾動.
   mScroller.startScroll(mScroller.getFinalX(), mScroller.getFinalY(), -scrollDistance, 0, 300);
   invalidate();
   if (scrollSelected != null) {
    scrollSelected.selected(getCurrentText());
   }
  }
 }

這樣已經(jīng)可以使用了，滑動的刻度尺已經(jīng)完成了。不過交給UI一看，人家說這東西怎么那么難滑動呢，每次怎么只能滑一大格呢，我要那種fling的感覺。確實，因為在MotionEvent.ACTION_UP的時候都會去矯正一下位置，所以給使用者的感覺就是一次只能滑一格，滑動體驗很不好，只能去增加fling。。。

4.fling

增加fling多簡單啊，Scroller不是有這個方法嗎mScroller.fling()，使用方法這里不再介紹了。fling增加之后，用戶的體驗確實好了很多，不過一個新的問題出現(xiàn)了，就是在fling停止之后怎么矯正位置呢？這是個大問題，卡住了好大一會兒，最終找到了解決方法：

 @Override
 public void computeScroll() {
  if (mScroller.computeScrollOffset()) {
   //這里是結束之后調用矯正位置的方法。scrollFinish（）。
   if (mScroller.getCurrX() == mScroller.getFinalX() && mPressUp && isFling) {
    mPressUp = false;
    isFling = false;
    scrollFinish();
   }
   scrollTo(mScroller.getCurrX(), 0);
   invalidate();
  }
  super.computeScroll();
 }

三 結束

效果在文章一開始已經(jīng)展示出來了，指針并沒有在該自定義View中繪制，底部的線也是，因為對于指針的需求是多變的，所以用了一個自定義的ViewGroup去完成剩余的指針和底部的實線。底部的實線放在Group中是因為我們的UI效果，底部的實線上面可以沒有刻度，也就是這個底部的線是固定在底部，比我畫在刻度下面跟隨刻度滑動要簡單的多。想到之后的變體，感覺刻度本身的View跟指針分開是比較好擴展的，Group只需要給刻度尺控件傳入中間指針的（x，y）坐標就好了。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。