overview.png

之前在網上看到了當Slider控件在滑動時會彈出氣泡指示器，覺得很有趣，于是就進行拓展，就有了下面介紹的一個安卓控件：IndicatorSeekBar。先附上IndicatorSeekBar項目地址: GitHub： https://github.com/warkiz/IndicatorSeekBar

image.png

對于IndicatorSeekBar，雖然做不了和上面網站的一模一樣，但是基本功能還是具備的。先上筆者實現的效果圖：

indicator_normal.gif

indicator_custom.gif

SeekBar實現的功能有哪些：

可以自定義尺寸和顏色

可以隱藏刻度

SeekBar選擇圓角/方角

滑塊下顯示進度

自定義刻度下的文字

自定義滑塊的圖片

自定義刻度的圖片

自定義氣泡指示器

支持進度監聽

......

實現思路： 筆者將Slider分為2大部分：上半部分的指示器和下半部分的SeekBar主體 ， 如圖 :

image.png

Part1：SeekBar主體：細分為5個小部分：

背景條 track_background_bar

進度條 track_progress_bar

滑塊 thumb

刻度 tick

刻度的文字 text

Part2： 指示器：彈出PopouWindow。

實現 : 當點擊seekbar時， 彈出PopouWindow ； 當滑動seekbar時， 不斷更新

PopouWindow 的位置， 達到指示器移動的效果；當點擊結束時，將指示器的PopouWindow dismiss掉。

5.主要代碼

5.1. 主體

5.1.1 背景條：使用繪制線條的方式繪制。

//繪制主體背景

mStockPaint.setStrokeWidth(p.mBackgroundTrackSize);

mStockPaint.setColor(p.mBackgroundTrackColor);

canvas.drawLine(thumbX, mTrackY, mSeekEnd, mTrackY, mStockPaint);

5.1.2 進度條：繪制同背景條。

//繪制主體進度

mStockPaint.setStrokeWidth(p.mProgressTrackSize);

canvas.drawLine(mSeekStart, mTrackY, thumbX, mTrackY, mStockPaint);

5.1.3 滑塊：繪制圓。

//繪制滑塊

canvas.drawCircle(thumbX + p.mBackgroundTrackSize / 2.0f, mTrackY, mIsTouching ? mThumbRadius : (2 * mThumbRadius / 3f), mStockPaint);

5.1.4 刻度：繪制圓或者長方形。

//繪制刻度

canvas.drawCircle(locationX, mTrackY, mTickRadius, mStockPaint);

or

canvas.drawRect(locationX - IndicatorUtils.dp2px(mContext, 1), mTrackY - rectTickHeightRange / 2.0f, locationX + IndicatorUtils.dp2px(mContext, 1), mTrackY + rectTickHeightRange / 2.0f + .5f, mStockPaint);

5.1.5 刻度文字：繪制文本。

//繪制刻度文字

canvas.drawText(text, mTextLocationList.get(i), mPaddingTop + mThumbRadius * 2 + mRect.height() + IndicatorUtils.dp2px(mContext, 3), mTextPaint);

5.2.指示器：創建PopouWindow

5.2.1 創建

mIndicator = new PopupWindow(mIndicatorView, WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.WRAP_CONTENT, false);

5.2.2 彈出

//監聽SeekbBar的onTouch方法 ；當開始點擊滑動時，彈出PopouWindow；

mIndicator.showAsDropDown(mSeekBar, (int) (touchX - mIndicator.getContentView().getMeasuredWidth() / 2f), -(mSeekBar.getMeasuredHeight() + mIndicator.getContentView().getMeasuredHeight() + mSeekBar.getPaddingTop() + IndicatorUtils.dp2px(mContext, 2)));

5.2.3 更新位置

//監聽seekbar的onTouch方法 ；當滑動時，根據滑動的坐標更新PopouWindow的彈出位置；

mIndicator.update(mSeekBar, (int) (touchX - mIndicator.getContentView().getMeasuredWidth() / 2), -(mSeekBar.getMeasuredHeight() + mIndicator.getContentView().getMeasuredHeight() + mSeekBar.getPaddingTop() + IndicatorUtils.dp2px(mContext, 2)), -1, -1);

5.2.4 消失

//監聽SeekBar的onTouch方法 ；當觸摸取消時，dismiss PopouWindow；

mIndicator.dismiss();

上面的代碼都不難，復雜的是內部的相互位置，不斷加減計算出相關的坐標位置是指示器正確顯示的關鍵：通過獲得屏幕的寬度減去兩邊的padding來獲得seekbar的寬度，再通過塊數繪制獲得一塊block的長度，然后繪制刻度和刻度文字，根據觸摸的坐標計算PopouWindow的位置，當進度改變時，更新其位置。

文字不能對一些細節進行詳細的描述，如果對此項目感興趣，歡迎review代碼交流。

IndicatorSeekBar的實現思路已經介紹完了，如果想了解其使用場景與方式，請關注下一篇文章。

感謝

總結

以上是生活随笔為你收集整理的android点击弹出滑动条,IndicatorSeekBar Android自定义SeekBar，滑动时弹出气泡指示器显示进度...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。