效果圖

前言

篇幅有限，本文只講解關鍵關鍵思路，伸手黨和想看詳細思路的請移步 傳送門點我點我！！，如果喜歡，歡迎 Star 和 Fork ！

實現思路

本控制元件其實奔著雙向滑動的SeekBar實現的，不過相容了單向滑動（隱藏一個拖動按鈕不就是單向的了嘛），所以我以 雙向滑動思路為例。

RangeSeekBar主要包括兩個類，一個是RangeSeekbar類，主要負責繪製進度條以及處理滑動相關邏輯，計算當前滑動值；另一個是SeekBar類，主要負責繪製拖動按鈕相關，如繪製背景以及提示資訊等。我們用RangeSeekBar初始化控制元件的一些屬性，並且生成兩個SeekBar物件，協調他們之間的關係。

關鍵程式碼及解析

主要包括控制元件繪製、兩個拖動按鈕的滑動邏輯及進度的計算。

控制元件繪製

繪製原理很簡單，計算 –> 定位 –> 繪製。講之前先放一張圖，你就能理解Android是如何定位的了。

繪製進度條

計算：

lineLeft = 2 * DEFALT_PADDING;
lineRight = View的寬度 - 2 * DEFALT_PADDING;
lineTop = (int)mHintBGHeight+ mThumbSize/2 -mSeekbarHight/2 + DEFALT_PADDING;
lineBottom = lineTop + mSeekbarHight;
 

lineWidth = lineRight - lineLeft;
lineCorners = (int) ((lineBottom - lineTop) * 0.45f);

定位：

RectF line = new RectF();
line.set(lineLeft, lineTop, lineRight, lineBottom);

繪製：

canvas.drawRoundRect(line, lineCorners, lineCorners, mMainPaint);

繪製拖動條按鈕

這裡只講解使用圖片如何繪製，自己填充的和進度條類似。

計算：

 left = lineLeft - mThumbSize / 2
 
;
 right = lineLeft + mThumbSize / 2;
 top = lineBottom - mThumbSize / 2;
 bottom = lineBottom + mThumbSize / 2;

 Bitmap original = BitmapFactory.decodeResource(context.getResources(), bmpResId);
 if (original != null) {
     Matrix matrix = new Matrix();
     float scaleHeight = mThumbSize * 1.0f / original.getHeight();
     float scaleWidth = scaleHeight;
     matrix.postScale(scaleWidth, scaleHeight);
     bmp = Bitmap.createBitmap(original, 0, 0, original.getWidth(), original.getHeight(), matrix, true);
 }

定位與繪製：

canvas.drawBitmap(bmp, left, lineTop - bmp.getHeight() / 2, null);

兩個拖動按鈕的滑動邏輯及進度的計算

首先要判斷當前手指拖動的是哪個按鈕，SeekBar類中這個方法可以判斷當前按鈕是否被拖動：

     /**
         * 拖動檢測
         * @param event
         * @return
         */
        protected boolean collide(MotionEvent event) {

            float x = event.getX();
            float y = event.getY();
            int offset = (int) (lineWidth * currPercent);
            return x > left + offset && x < right + offset && y > top && y < bottom;
        }

然後在RangeSeekbar的onTouchEvent中當手指按下時根據按鈕的位置和手指的當前座標即可判斷當前按鈕

case MotionEvent.ACTION_DOWN:

 boolean touchResult = false;
                if (rightSB != null && rightSB.currPercent >= 1 && leftSB.collide(event)) {
                    currTouch = leftSB;
                    touchResult = true;
                } else if (rightSB != null && rightSB.collide(event)) {
                    currTouch = rightSB;
                    touchResult = true;
                } else if (leftSB.collide(event)) {
                    currTouch = leftSB;
                    touchResult = true;
                }

當手指移動時，我們根據座標即可計算出按鈕當前位置佔整個進度條的比例，從而可以算出兩個按鈕的值，至於兩個按鈕相遇時，我們可以根據兩個按鈕當前的值判斷，左邊的按鈕的值不能大於右邊的值，同理，右邊按鈕的值也不能小於左邊的值。

注意

進度提示的背景的繪製和拖動的按鈕原理類似，但是有一點不一樣的地方就是考慮到他可能會被拉伸，所以我用的是9Path檔案，9Path的繪製和普通的bitmap繪製稍有不同，詳情請看另一篇文章 9path 繪製。如果你想改變它的背景圖片的話，請使用9Path檔案！