一款美觀的自定義SeekBar，支持單、雙向、階段滑動、刻度、負數等多種強大自定義屬性

2019-11-09 13:59:19

字體：大中小

來源：轉載

供稿：網友

效果圖

前言

篇幅有限，本文只講解關鍵關鍵思路，伸手黨和想看詳細思路的請移步傳送門點我點我！！，如果喜歡，歡迎 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; }

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