一款美觀的自定義SeekBar，支持單、雙向、階段滑動、刻度、負(fù)數(shù)等多種強(qiáng)大自定義屬性

2019-11-09 14:50:21

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

效果圖

前言

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

實(shí)現(xiàn)思路

本控件其實(shí)奔著雙向滑動的SeekBar實(shí)現(xiàn)的，不過兼容了單向滑動（隱藏一個拖動按鈕不就是單向的了嘛），所以我以雙向滑動思路為例。

RangeSeekBar主要包括兩個類，一個是RangeSeekbar類，主要負(fù)責(zé)繪制進(jìn)度條以及處理滑動相關(guān)邏輯，計算當(dāng)前滑動值；另一個是SeekBar類，主要負(fù)責(zé)繪制拖動按鈕相關(guān)，如繪制背景以及提示信息等。我們用RangeSeekBar初始化控件的一些屬性，并且生成兩個SeekBar對象，協(xié)調(diào)他們之間的關(guān)系。

關(guān)鍵代碼及解析

主要包括控件繪制、兩個拖動按鈕的滑動邏輯及進(jìn)度的計算。

控件繪制

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

這里寫圖片描述

繪制進(jìn)度條

這里寫圖片描述

計算：

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);

繪制拖動條按鈕

這里只講解使用圖片如何繪制，自己填充的和進(jìn)度條類似。

這里寫圖片描述

計算：

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);

兩個拖動按鈕的滑動邏輯及進(jìn)度的計算

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

/** * 拖動檢測 * @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中當(dāng)手指按下時根據(jù)按鈕的位置和手指的當(dāng)前坐標(biāo)即可判斷當(dāng)前按鈕

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; }

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