漂亮而強(qiáng)大的IndicatorSeekBar净响,滑動(dòng)顯示進(jìn)度氣泡指示器

本文項(xiàng)目地址:https://github.com/warkiz/IndicatorSeekBar

IndicatorSeekBar

overview.png

上一篇分享的文章中狗热,筆者介紹了IndicatorSeekBar的編寫(xiě)的基本思路和主要代碼,在本篇文章中锨络,筆者主要介紹IndicatorSeekBar的基本使用姿勢(shì)潦俺。

項(xiàng)目介紹:
Android 自定義SeekBar, 能改變尺寸拒课、顏色、滑塊(thumb)圖片黑竞、刻度(tick)圖片捕发、刻度文字(text)和氣泡指示器(indicator)疏旨,當(dāng)滑動(dòng)時(shí)顯示帶有進(jìn)度的氣泡指示器很魂。

如果需要英文版,點(diǎn)擊: English here


慣例, 先上截圖:

custom.gif
java_build.gif

更多 gif 演示場(chǎng)景請(qǐng)查看:https://github.com/warkiz/IndicatorSeekBar/blob/master/README.md

2. 使用

1. 先在app/build.gradle下引入:

dependencies {
    compile 'com.github.warkiz.widget:indicatorseekbar:1.1.2'
}

2. 在布局文件或java類(lèi)中使用:

xml

<com.warkiz.widget.IndicatorSeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    app:isb_max="78.8"
    app:isb_min="10.2"
    app:isb_progress="50.3"
    app:isb_progress_value_float="true"
    app:isb_show_indicator="true"/>
<com.warkiz.widget.IndicatorSeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:isb_indicator_custom_layout="@layout/custom_indicator"
    app:isb_indicator_type="custom"
    app:isb_max="189"
    app:isb_min="23"
    app:isb_progress="67"
    app:isb_seek_bar_type="discrete_ticks_texts"
    app:isb_show_indicator="true"
    app:isb_text_array="@array/tick_below_text_length_9"
    app:isb_text_color="@color/color_blue"
    app:isb_thumb_width="18dp"
    app:isb_tick_drawable="@mipmap/ic_launcher"
    app:isb_tick_num="9"
    app:isb_tick_on_thumb_left_hide="true"
    app:isb_track_background_bar_color="#FF00"
    app:isb_track_background_bar_size="2dp"
    app:isb_track_progress_bar_color="#FF0000"
    app:isb_track_progress_bar_size="5dp"/>

or Java

IndicatorSeekBar indicatorSeekBar = new IndicatorSeekBar.Builder(this)
                .setMax(200)
                .setMin(0)
                .setProgress(35)
                .setSeekBarType(IndicatorSeekBarType.DISCRETE_TICKS)
                .setTickType(TickType.OVAL)
                .setTickColor(Color.parseColor("#0000FF"))
                .setTickSize(8)//dp size
                .setTickNum(8)
                .setBackgroundTrackSize(2)//dp size
                .setBackgroundTrackColor(Color.parseColor("#666666"))
                .setProgressTrackSize(3)//dp size
                .setProgressTrackColor(Color.parseColor("#0000FF"))
                .showIndicator(true)
                .setIndicatorType(IndicatorType.SQUARE_CORNERS)
                .setIndicatorColor(Color.parseColor("#0000FF"))
                .build();

更多使用方式請(qǐng)參考源碼Demo : https://github.com/warkiz/IndicatorSeekBar


3. 支持的功能

3.1 多種的SeekBar類(lèi)型

IndicatorSeekBar 提供了兩種系列的類(lèi)型:

  1. 連續(xù)(continuous)的滑動(dòng): CONTINUOUS/CONTINUOUS_TEXTS_ENDS.

  2. 非連續(xù)(discrete)的滑動(dòng): DISCRETE_TICKS/ DISCRETE_TICKS_TEXTS/ DISCRETE_TICKS_TEXTS_ENDS.

使用時(shí)引用一種type類(lèi)型:

<com.warkiz.widget.IndicatorSeekBar
    app:isb_seek_bar_type="continuous"
    .../>

3.2 自定義 顏色檐涝、尺寸

SeekBar以下部分的顏色或尺寸可以被自定義遏匆,可按照業(yè)務(wù)需求自定義size和color。

overview.png
  • 背景條 track_background_bar
  • 進(jìn)度條 track_progress_bar
  • 刻度 tick
  • 刻度文字 text
  • 滑塊 thumb
  • 指示器 indicator
  • 指示器文字 indicator_text

自定義尺寸和顏色功能適合大部分業(yè)務(wù)需求谁榜。

3.3 隱藏刻度tick

SeekBar的兩個(gè)端點(diǎn)的刻度或者滑塊左邊的刻度可以被隱藏幅聘。

<com.warkiz.widget.IndicatorSeekBar
    app:isb_tick_both_end_hide="true"
    .../>

<com.warkiz.widget.IndicatorSeekBar
    app:isb_tick_on_thumb_left_hide="true"
    .../>

3.4 給SeekBar選擇圓角/方角

默認(rèn)兩端是圓角,可以設(shè)置為方形窃植。

<com.warkiz.widget.IndicatorSeekBar
    app:isb_track_rounded_corners="true"
    .../>

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

當(dāng) seekabr 的類(lèi)型為 CONTINUOUS or DISCRETE_TICKS時(shí) , 可以設(shè)置滑動(dòng)后滑塊下顯示保留進(jìn)度帝蒿。

<com.warkiz.widget.IndicatorSeekBar
    app:isb_seek_bar_type="continuous"http://discrete_ticks
    app:isb_thumb_progress_stay="true"
    .../>

3.6 自定義SeekBar兩端的文字text

當(dāng) seekabr 的類(lèi)型是 CONTINUOUS_TEXTS_ENDSDISCRETE_TICKS_TEXTS_ENDS 時(shí), 可以設(shè)置兩端的文字.

<com.warkiz.widget.IndicatorSeekBar
    app:isb_seek_bar_type="continuous_texts_ends"http://discrete_ticks_texts_ends
    app:isb_text_left_end="last"
    app:isb_text_right_end="next"
    .../>

3.7 自定義刻度下的文字text

當(dāng) seekabr 的類(lèi)型是 DISCRETE_TICKS_TEXTS , 可以通過(guò)設(shè)置數(shù)組的方式自定義刻度下的文字, 數(shù)組的長(zhǎng)度應(yīng)當(dāng)和刻度相等。

<com.warkiz.widget.IndicatorSeekBar
    app:isb_text_array="@array/texts_below_tick_length_5"
    app:isb_tick_num="5" //一般來(lái)說(shuō) , 文字?jǐn)?shù)組的長(zhǎng)度應(yīng)該和刻度的數(shù)量相等
    .../>
or
indicatorSeekBar.setTextArray(R.array.texts_below_tick_length_5);

3.8 自定義滑塊thumb的圖片

滑塊可以使用圖片去自定義:

<com.warkiz.widget.IndicatorSeekBar
    app:isb_thumb_drawable="@mipmap/ic_launcher"
    .../>

3.9 自定義刻度tick的圖片

刻度可以使用圖片去自定義.

<com.warkiz.widget.IndicatorSeekBar
    app:isb_tick_drawable="@mipmap/ic_launcher"
    .../>

3.10 自定義指示器indicator

IndicatorSeekbar提供了3種指示器的類(lèi)型: ROUNDED_CORNERS / SQUARE_CORNERS / CUSTOM,當(dāng)指示器的類(lèi)型為 CUSTOM 時(shí), 可以自定義指示器的view.

<com.warkiz.widget.IndicatorSeekBar
    app:isb_indicator_type="custom"
    app:isb_indicator_custom_layout="@layout/indicator"
    .../>
or
indicatorSeekBar.setCustomIndicator(R.layout.indicator);

注意:如果自定義指示器需要顯示進(jìn)度, 那么指示器必須要有一個(gè)TextView巷怜,而且其id必須設(shè)置為isb_progress.

3.11 自定義指示器頂部的內(nèi)容

當(dāng) indicator 的類(lèi)型為 ROUNDED_CORNERS 或者 SQUARE_CORNERS , 可以設(shè)置指示器頂部的view.

<com.warkiz.widget.IndicatorSeekBar
    app:isb_indicator_type="rounded_corners"http://square_corners
    app:isb_indicator_custom_top_content_layout="@layout/top_content_view"
    .../>
or
indicatorSeekBar.getIndicator().setIndicatorTopContentLayout(R.layout.top_content_view);

注意:如果自定義指示器頂部的view需要顯示進(jìn)度, 那么這個(gè)view必須要有一個(gè)TextView葛超,而且其id必須設(shè)置為isb_progress.

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

indicatorSeekBar.setOnSeekChangeListener(new IndicatorSeekBar.OnSeekBarChangeListener() {

    @Override
    public void onProgressChanged(IndicatorSeekBar seekBar, int progress, float progressFloat, boolean fromUserTouch) {

    }

    @Override
    public void onSectionChanged(IndicatorSeekBar seekBar, int thumbPosOnTick, String textBelowTick, boolean fromUserTouch) {
        //only callback on discrete series SeekBar type.
    }

    @Override
    public void onStartTrackingTouch(IndicatorSeekBar seekBar, int thumbPosOnTick) {
    }

    @Override
    public void onStopTrackingTouch(IndicatorSeekBar seekBar) {

    }
});

onSectionChanged: 當(dāng)SeekBar的類(lèi)型為非連續(xù) discrete系列 時(shí), 這個(gè)回調(diào)會(huì)獲得滑塊的位置和滑塊下的文字. 當(dāng)為連續(xù) continuous系列則不回調(diào)。

5. 混淆配置

-keep class com.warkiz.widget.** { *; }

6. 支持多種自定義屬性

自定義的屬性較多延塑,具體的屬性介紹可參照以下 源碼文檔介紹绣张。

行文至此,筆者對(duì)里IndicatorSeekBar的介紹也要完結(jié)了关带。
通過(guò)這篇文章侥涵,相信你已經(jīng)對(duì)IndicatorSeekBar的使用有了大體的感知與認(rèn)識(shí),若想更深入了解源碼宋雏,可去GitHub閱讀原作者的源碼芜飘。

源碼地址:https://github.com/warkiz/IndicatorSeekBar

IndicatorSeekBar實(shí)現(xiàn)思路:http://www.reibang.com/p/debb0541b219

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市磨总,隨后出現(xiàn)的幾起案子嗦明,更是在濱河造成了極大的恐慌,老刑警劉巖舍败,帶你破解...
    沈念sama閱讀 216,544評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件招狸,死亡現(xiàn)場(chǎng)離奇詭異敬拓,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)裙戏,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén)乘凸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人累榜,你說(shuō)我怎么就攤上這事营勤。” “怎么了壹罚?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,764評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵葛作,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我猖凛,道長(zhǎng)赂蠢,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,193評(píng)論 1 292
  • 正文 為了忘掉前任辨泳,我火速辦了婚禮虱岂,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘菠红。我一直安慰自己第岖,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,216評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布试溯。 她就那樣靜靜地躺著蔑滓,像睡著了一般。 火紅的嫁衣襯著肌膚如雪遇绞。 梳的紋絲不亂的頭發(fā)上键袱,一...
    開(kāi)封第一講書(shū)人閱讀 51,182評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音试读,去河邊找鬼杠纵。 笑死,一個(gè)胖子當(dāng)著我的面吹牛钩骇,可吹牛的內(nèi)容都是我干的比藻。 我是一名探鬼主播,決...
    沈念sama閱讀 40,063評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼倘屹,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼银亲!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起纽匙,我...
    開(kāi)封第一講書(shū)人閱讀 38,917評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤务蝠,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后烛缔,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體馏段,經(jīng)...
    沈念sama閱讀 45,329評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡轩拨,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,543評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了院喜。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片亡蓉。...
    茶點(diǎn)故事閱讀 39,722評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖喷舀,靈堂內(nèi)的尸體忽然破棺而出砍濒,到底是詐尸還是另有隱情,我是刑警寧澤硫麻,帶...
    沈念sama閱讀 35,425評(píng)論 5 343
  • 正文 年R本政府宣布爸邢,位于F島的核電站,受9級(jí)特大地震影響拿愧,放射性物質(zhì)發(fā)生泄漏杠河。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,019評(píng)論 3 326
  • 文/蒙蒙 一赶掖、第九天 我趴在偏房一處隱蔽的房頂上張望感猛。 院中可真熱鬧七扰,春花似錦奢赂、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,671評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至立由,卻和暖如春轧钓,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背锐膜。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,825評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工毕箍, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人道盏。 一個(gè)月前我還...
    沈念sama閱讀 47,729評(píng)論 2 368
  • 正文 我出身青樓而柑,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親荷逞。 傳聞我的和親對(duì)象是個(gè)殘疾皇子媒咳,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,614評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容