overview.png

之前在網(wǎng)上看到了當(dāng)Slider控件在滑動(dòng)時(shí)會(huì)彈出氣泡指示器，覺(jué)得很有趣，于是就進(jìn)行拓展，就有了下面介紹的一個(gè)安卓控件：IndicatorSeekBar。先附上IndicatorSeekBar項(xiàng)目地址: GitHub： https://github.com/warkiz/IndicatorSeekBar

image.png

對(duì)于IndicatorSeekBar，雖然做不了和上面網(wǎng)站的一模一樣，但是基本功能還是具備的。先上筆者實(shí)現(xiàn)的效果圖：

indicator_normal.gif

indicator_custom.gif

SeekBar實(shí)現(xiàn)的功能有哪些：

可以自定義尺寸和顏色

可以隱藏刻度

SeekBar選擇圓角/方角

滑塊下顯示進(jìn)度

自定義刻度下的文字

自定義滑塊的圖片

自定義刻度的圖片

自定義氣泡指示器

支持進(jìn)度監(jiān)聽(tīng)

......

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

image.png

Part1：SeekBar主體：細(xì)分為5個(gè)小部分：

背景條 track_background_bar

進(jìn)度條 track_progress_bar

滑塊 thumb

刻度 tick

刻度的文字 text

Part2： 指示器：彈出PopouWindow。

實(shí)現(xiàn) : 當(dāng)點(diǎn)擊seekbar時(shí)， 彈出PopouWindow ； 當(dāng)滑動(dòng)seekbar時(shí)， 不斷更新

PopouWindow 的位置， 達(dá)到指示器移動(dòng)的效果；當(dāng)點(diǎn)擊結(jié)束時(shí)，將指示器的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 進(jìn)度條：繪制同背景條。

//繪制主體進(jìn)度

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 刻度：繪制圓或者長(zhǎng)方形。

//繪制刻度

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.指示器：創(chuàng)建PopouWindow

5.2.1 創(chuàng)建

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

5.2.2 彈出

//監(jiān)聽(tīng)SeekbBar的onTouch方法 ；當(dāng)開(kāi)始點(diǎn)擊滑動(dòng)時(shí)，彈出PopouWindow；

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

5.2.3 更新位置

//監(jiān)聽(tīng)seekbar的onTouch方法 ；當(dāng)滑動(dòng)時(shí)，根據(jù)滑動(dòng)的坐標(biāo)更新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 消失

//監(jiān)聽(tīng)SeekBar的onTouch方法 ；當(dāng)觸摸取消時(shí)，dismiss PopouWindow；

mIndicator.dismiss();

上面的代碼都不難，復(fù)雜的是內(nèi)部的相互位置，不斷加減計(jì)算出相關(guān)的坐標(biāo)位置是指示器正確顯示的關(guān)鍵：通過(guò)獲得屏幕的寬度減去兩邊的padding來(lái)獲得seekbar的寬度，再通過(guò)塊數(shù)繪制獲得一塊block的長(zhǎng)度，然后繪制刻度和刻度文字，根據(jù)觸摸的坐標(biāo)計(jì)算PopouWindow的位置，當(dāng)進(jìn)度改變時(shí)，更新其位置。

文字不能對(duì)一些細(xì)節(jié)進(jìn)行詳細(xì)的描述，如果對(duì)此項(xiàng)目感興趣，歡迎review代碼交流。

IndicatorSeekBar的實(shí)現(xiàn)思路已經(jīng)介紹完了，如果想了解其使用場(chǎng)景與方式，請(qǐng)關(guān)注下一篇文章。

感謝

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。