廢話不多說，先上效果圖

• 在此特別感謝扔物線的HenCoder系列，目前已更新了8章內容，讓我從一個純canvas小白變成了canvas小菜。
• 刻度尺效果是仿寫HenCoder公眾號中《仿寫酷介面》中的薄荷健康的滑動捲尺效果，效果圖如下：
• 
• 網上已經有很多大神都寫過類似的刻度尺，我是抱著學習canvas的態度來寫的，做得不好還請指教

需求分析

1. 繪製刻度
2. 可滑動，滑動停止後自動移動到最近刻度
3. 增加了兩邊透明度變化

涉及知識點

1. canvas繪製
2. 屬性動畫
3. GestureDetector手勢識別器

大概的實現過程

首先放上所有成員變數

/**
 * 最大的滑動速度
 */
private static final int MAX_FLING_SPEED = 6000;

private static final String KG = "kg";
private static final int ONE_KG = 1000;
/**
 * 最大的可滑動過去的體重數 預設：3公斤
 */
private static final int MAX_FLING_WEIGHT = 3000;
/**
 * 最大的滑動動畫持續時間
 */
private static final int MAX_FLING_WEIGHT_DURATION = 1000;

private LinearOutSlowInInterpolator mLinearOutSlowInInterpolator = new LinearOutSlowInInterpolator();
/**
 * 最小體重：30kg
 */
private int minWeight = 30000;
/**
 * 最大體重：200.0kg
 */
private int maxWeight = 200000;
/**
 * 預設體重為60.0kg
 * 數字單位為g
 */
private int bodyWeight = 60000;
/**
 * 體重的文字大小
 */
private int textSizeWeight = sp2pix(22);
/**
 * kg字的文字大小
 */
private int textSizeKg = sp2pix(16);

/**
 * 刻度基線的寬度
 */
private int lineWidthBase = dp2pix(1);
/**
 * 刻度線g的寬度
 */
private int lineWidthG = dp2pix(2);
/**
 * 刻度線g的高度
 */
private int lineHeightG = dp2pix(20);
/**
 * 刻度線kg的寬度
 */
private int lineWidthKg = dp2pix(4);
/**
 * 刻度線kg的高度
 */
private int lineHeightKg = dp2pix(40);
/**
 * 每公斤中的刻度數量
 */
private int scaleTableGNum = 10;
/**
 * 每格的寬度
 */
private int scaleTableGWidth = dp2pix(10);

private Paint mWeightTextPain;
private Paint mScaleLinePain;
private Paint mScaleWeightTextPain;
/**
 * 遮罩的畫筆
 */
private Paint mForegroundPaint;
/**
 * 手勢識別器
 */
private GestureDetector mGesture;

/**
 * 平滑動畫
 */
private ObjectAnimator mFlingAnim;
private FlingAnimUpdateListener mFlingAnimUpdateListener = new FlingAnimUpdateListener();
private BodyWeightUpdateListener mBodyWeightUpdateListener;
 

1. 例項化畫筆，在onDraw中繪製最基本的元素
   

   //畫出當前公斤數
   int textLine = centerY - dp2pix(50);
   mWeightTextPain.setTextSize(textSizeWeight);
   mWeightTextPain.setTextAlign(Paint.Align.CENTER);
   canvas.drawText(weightStr, centerX, textLine, mWeightTextPain);
   mWeightTextPain.setTextSize(textSizeKg);
   canvas.drawText(KG, centerX + mWeightTextPain.measureText(weightStr),
        textLine - mWeightTextPain.getFontSpacing() / 2, mWeightTextPain);
   //畫刻度基準線
   mScaleLinePain.setStrokeWidth(lineWidthBase);
   canvas.drawLine(0, centerY, canvasWidth, centerY, mScaleLinePain);
    
   

2. 繪製刻度線
   

   //畫刻度線
   int everyScaleG = ONE_KG / scaleTableGNum;
   //這個求餘，是為了得到當前體重數和最小刻度的偏差，用於接下來繪製的時候進行位置修正
   float offset = bodyWeight % everyScaleG;
   //
   float handOffset = offset / everyScaleG * scaleTableGWidth;
   
   float currentLeftHandWeight;
   float currentRightHandWeight;
   float leftLineX;
   float rightLineX;
   if (offset == 0) {
       float lineX = centerX;
       float currentHandWeight = bodyWeight;
       drawScaleTable(canvas, centerY, lineX, currentHandWeight);
       currentLeftHandWeight = bodyWeight - everyScaleG;
       currentRightHandWeight = bodyWeight + everyScaleG;
       leftLineX = lineX - scaleTableGWidth;
       rightLineX = lineX + scaleTableGWidth;
   } else {
       currentLeftHandWeight = bodyWeight - offset % everyScaleG;
       currentRightHandWeight = bodyWeight + everyScaleG - offset % everyScaleG;
       leftLineX = centerX - handOffset;
       rightLineX = centerX + scaleTableGWidth - handOffset;
   }
   //這是為了不同寬度的螢幕適配，所以從中間往兩邊繪製
   while (rightLineX < canvasWidth + 2 * scaleTableGWidth) {
       //從中開始向左畫指標
       if (currentLeftHandWeight >= minWeight) {
           drawScaleTable(canvas, centerY, leftLineX, currentLeftHandWeight);
       }
       //從中開始向右畫指標
       if (currentRightHandWeight <= maxWeight) {
           drawScaleTable(canvas, centerY, rightLineX, currentRightHandWeight);
       }
       currentLeftHandWeight -= everyScaleG;
       currentRightHandWeight += everyScaleG;
       leftLineX -= scaleTableGWidth;
       rightLineX += scaleTableGWidth;
   }
    
   

3. 繪製遮罩層，用來做兩邊透明度的效果
   

   //繪製遮罩層，用來進行兩端透明度的變化
   if (mForegroundPaint == null) {
       initForegroundPaint(canvasWidth);
   }
   canvas.drawRect(0, 0, canvas.getWidth(), canvas.getHeight(), mForegroundPaint);
   
   //初始化遮罩的畫筆
   private void initForegroundPaint(int w) {
       mForegroundPaint = new Paint();
       mForegroundPaint.setShader(new LinearGradient(0, 0, w / 2, 0, 0X00FFFFFF, 0XFFFFFFFF, Shader.TileMode.MIRROR));
       mForegroundPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY));
   }
   

4. 例項化手勢識別器GestureDetector，用它來接管View的onTouchEvent，並在onScroll和onFling中作出對應動作
   

   @Override
       public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
           if (mFlingAnim != null) {
               mFlingAnim.cancel();
           }
           //每次滾動的刻度
           bodyWeight += distanceX * scaleTableGWidth;
           if (bodyWeight >= maxWeight) {
               bodyWeight = maxWeight;
           } else if (bodyWeight <= minWeight) {
               bodyWeight = minWeight;
           }
           invalidate();
           return true;
   
       @Override
       public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
           int target;
           if (velocityX > 0) {
               target = bodyWeight - getTargetWeightByVelocityX(velocityX);
           } else {
               target = bodyWeight + getTargetWeightByVelocityX(velocityX);
           }
           startSmoothAnim(target, getDurationByVelocityX(velocityX));
           return true;
       }
   

   
   以上用到的方法
   

   //通過滑動速率來得到滑動動畫的目標體重值
   private int getTargetWeightByVelocityX(float velocityX) {
   return (int) (MAX_FLING_WEIGHT * mLinearOutSlowInInterpolator.getInterpolation(Math.abs(velocityX / MAX_FLING_SPEED)));
   }
   
   //通過滑動速率來得到滑動動畫持續時間
   private int getDurationByVelocityX(float velocityX) {
   return (int) (MAX_FLING_WEIGHT_DURATION * mLinearOutSlowInInterpolator.getInterpolation(Math.abs(velocityX / MAX_FLING_SPEED)));
   }
   
   //開始一個平滑動畫
   private void startSmoothAnim(int targetWeight, int duration) {
       if (targetWeight >= maxWeight) {
           targetWeight = maxWeight;
       } else if (targetWeight <= minWeight) {
           targetWeight = minWeight;
       } else {
           targetWeight = revisedTarget(targetWeight);
       }
       if (mFlingAnim != null) {
           mFlingAnim.cancel();
           mFlingAnim = null;
       }
       mFlingAnim = ObjectAnimator.ofInt(BodyWeightScaleTableView.this, "bodyWeight", this.bodyWeight, targetWeight);
       mFlingAnim.setInterpolator(mLinearOutSlowInInterpolator);
       mFlingAnim.setDuration(duration);
       mFlingAnim.addUpdateListener(mFlingAnimUpdateListener);
       mFlingAnim.start();
   

   }
   

實現思想

本Demo是使用Canvas進行繪製刻度，為了適配不同寬度的螢幕，所以小的刻度使用從中心指標處向兩邊繪製到螢幕邊界的方法，使用GestureDetector接管View的觸控事件，在onScroll中修改體重值並不斷進行重繪，達到刻度尺滾動的效果。並在onFling中接收拋動的事件，開啟一個屬性動畫達到平滑的效果。由於我沒有在GestureDetector中找到能響應不fling的up事件，所以要自己手動在onTouchEvent中寫ACIONT_UP時的動作

@Override
public boolean onTouchEvent(MotionEvent event) {
    mGesture.onTouchEvent(event);
    if (event.getAction() == MotionEvent.ACTION_UP) {
        if (mFlingAnim != null && !mFlingAnim.isRunning()) {
            startSmoothAnim(revisedTarget(bodyWeight), 100);
        }
    }
    return true;
}

遮罩層的實現方式，是drawRec 一個整個畫布大小的白色矩形，使用線性漸變，兩邊不透明到中間透明。注意，由於使用了PorterDuff.Mode.MULTIPLY來合成，所以需要使用到離屏緩衝，關於離屏緩衝可以看看HenCoder
最後附上github：https://github.com/Pro47x/BodyWeightScaleTableView
寫的很簡陋，輕噴