自定義 view 之薄荷 app 的捲尺效果

wcode發表於2017-10-27
ViewAPP

本篇文章同時收錄在我的個人部落格：自定義 view 之薄荷 app 的捲尺效果

前幾天看到 HenCoder「仿寫酷介面」活動——徵稿 ，扔物線大大找了幾個很酷炫的效果讓讀者們仿寫，最後選出的作品效果也很好，但是沒有講解實現思路，很多人還是不知道怎麼做，所以我決定自己動手擼一篇文章記錄下學習過程，光看別人寫的，自己不動手永遠也學不會啊是吧。

我看了幾個薄荷捲尺的原始碼，這裡記錄下一種實現思路，不一定是最優的方法，僅供學習參考。

先看效果吧，

分析

先看張我畫的張圖，

可以想想成有一把尺子在螢幕上面左右滑動，需要繪製的部分就是尺子和螢幕重合的部分，那麼繪製的關鍵點就是找到第一個刻度線的位置。

那麼這裡就是計算線段 E 的長度了，思路如下：

E=F-D
D=C%F
C=A-B

所以化簡下就是：

E=F-((A-B)%F)

F: 最小刻度的寬度，已知條件。
A: 捲尺的偏移量，其實就是滑動偏移量，可以動態計算出結果。
B: 螢幕的一半，已知條件。

當然，也可以這樣算:
C 除以 F 向上取整就能得出第一個畫的刻度是第幾個刻度（比如這裡得出是第 N 個 刻度），然後再 N*F-C 就是 第一個刻度的座標了。

第一個刻度位置找到了，那後面的自然也就出來了，現在問題是一共畫多少個刻度呢，肯定只會畫卷尺落在螢幕上的部分對不對，思路有兩種:

  • 螢幕寬度 除以 最小刻度的寬度，結果就是需要繪製的刻度個數。
  • 在繪製每一個刻度的時候判斷橫座標是否超出了螢幕寬度，超出了則結束繪製。

好，分析的差不多了，下面開始計算。

計算偏移量

重寫 onTouchEvent 方法

@Override
public boolean onTouchEvent(MotionEvent event) {
  switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
      lastX = event.getX();
      break;
    case MotionEvent.ACTION_MOVE:
      float x = event.getX();
      offset+=(lastX - x);
      lastX = x;
      //偏移量改變後記得重新繪製刻度
      invalidate();
      break;
  }
  return true;
}複製程式碼

接下來就可以畫刻度了

繪製刻度

@Override
protected void onDraw(Canvas canvas) {
  // 繪製背景
  canvas.drawColor(0xffefefef);

  // 計算第一個刻度的座標
  float c = offset - mWidth / 2.0f;
  float fn = c / gapWidth;
  int n = (int) Math.ceil(fn);
  float startX = gapWidth * n - c;


  for (int i = 0; i < mLength; i++) {

    float x = startX + (i * gapWidth);

    if (n % 10 == 0) {

      mPaint.setColor(Color.GRAY);
      mPaint.setStrokeWidth(4);
      canvas.drawLine(x, 0, x, 60, mPaint);

      //繪製數字
      mPaint.setColor(Color.BLACK);
      mPaint.setTextSize(25);
      mPaint.setTextAlign(Paint.Align.CENTER);
      canvas.drawText((n ) + "", x, 120, mPaint);
    } else {

      mPaint.setColor(Color.GRAY);
      mPaint.setStrokeWidth(2);
      canvas.drawLine(x, 0, x, 30, mPaint);
    }

    n++;
  }

  // 繪製中線上的指標
  mPaint.setColor(Color.GREEN);
  mPaint.setStrokeWidth(8);
  canvas.drawLine(mWidth / 2, 0, mWidth / 2, 80, mPaint);

}複製程式碼

現在就可以初步看到效果了

滑動優化處理

現在雖然可以滑動，但是很生硬，當手指離開螢幕立馬就停止了。

需要讓它有慣性的效果，就算手指鬆開，它也能自己滑動一段距離，這裡就要用到 Scroller 和 VelocityTracker 。至於它們怎麼用，網上一堆資料。

具體步驟:

  • 初始化 Scroller ，VelocityTracker。
  • 在手指鬆開時用 VelocityTracker 計算出速度。
  • 用得到的速度結合 Scroller 滑動一段距離（記得重寫 computeScroll ）。

Scroller 是用來輔助計算滑動距離的，並不是直接操作滑動，就是說你告訴 Scroller 滑動的目標距離或者速度，Scroller 告訴你每個時間點應該滑動的距離，你再不斷的根據這個距離重繪 view，就產生了滑動的效果。

初始化

mScroller = new OverScroller(getContext());
mVelocityTracker = VelocityTracker.obtain();
//獲得允許執行一個fling手勢動作的最大速度值
maximumFlingVelocity = ViewConfiguration.get(getContext()).getScaledMaximumFlingVelocity();
//獲得允許執行一個fling手勢動作的最小速度值
minimumFlingVelocity = ViewConfiguration.get(getContext()).getScaledMinimumFlingVelocity();複製程式碼

手指鬆開時計算速度

@Override
public boolean onTouchEvent(MotionEvent event) {
  // 把事件交給 VelocityTracker 處理
  mVelocityTracker.addMovement(event);
  switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
      lastX = event.getX();
        // 當手指按下的時候，讓滑動停止
      if (!mScroller.isFinished()) {
        mScroller.abortAnimation();
      }
      //手指按下的時 重新進行速度追蹤
      mVelocityTracker.clear();
      mVelocityTracker.addMovement(event);
      break;
    case MotionEvent.ACTION_MOVE:
      float x = event.getX();
      offset += (lastX - x);
      lastX = x;
      invalidate();
      break;
    case MotionEvent.ACTION_UP:
        // 計算 1000 毫秒內的速度，maximumFlingVelocity 用來限定速度的最大值
      mVelocityTracker.computeCurrentVelocity(1000, maximumFlingVelocity);
      // 獲取速度
      int xVelocity = (int) mVelocityTracker.getXVelocity();
      // 大於最小速度才滑動
      if (Math.abs(xVelocity) > minimumFlingVelocity) {
        // 讓 Scroller 開始計算滑動
        mScroller.fling((int) offset, 0, -xVelocity / 2, 0, Integer.MIN_VALUE, Integer.MAX_VALUE, 0, 0);
        invalidate();

      }
      break;
  }
  return true;
}複製程式碼

這裡我把計算出來的速度除了2，不然感覺太快了，後面 MIN_VALUE 和 MAX_VALUE，是滑動的最小和最大偏移量，這裡我沒做限制，所以用的 int 型別的最大最小值，記住了，呼叫完mScroller.fling()方法後一定要invalidate() 方法，Scroller 是不會自己幫你重新整理的。

重寫 computeScroll 方法

@Override
public void computeScroll() {
    if (mScroller.computeScrollOffset()) {
        //獲取當前計算出的偏移量
        offset = mScroller.getCurrX();
        invalidate();
    }
}複製程式碼

再來看看效果

接下來要在滑動停止時讓指標和最近的刻度對齊，也就是在停止時再讓捲尺自動滑動一段距離。

這裡有兩個地方要處理:

  • 手指離開後觸發了 fling，在 fling 結束後需要處理。
  • 手指離開後速度不夠，沒有觸發 fling ，也需要處理。

不多說，請看圖

需要滑動的距離 = Math.round（當前便偏移量 / 最小刻度）* 最小刻度 - 當前便偏移量

下面看程式碼

int des = Math.round(offset / gapWidth) * (int) gapWidth;
mScroller.startScroll((int) offset, 0, (int) (des - offset), 0);
invalidate();複製程式碼

具體位置大家可以去檢視整個原始碼。這裡就不在全部貼出來了。

看看效果吧

最後就是最大值和最小值的限制了，這個在繪製的時候判斷一下偏移量就可以了，大家可以自己動手試試哦。

哦，還有滑動時候的監聽，這個在偏移量改變的時候呼叫自定義的回撥函式就好了。

原始碼地址:github.com/jianshijiuy… 。

原始碼僅供學習使用，如果要在專案中使用不妨看看下面這個:

github.com/totond/Booh…

同時，實現思路也參考了下面這篇部落格:

www.jianshu.com/p/06e65ef3f…

相關文章