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

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

IndicatorSeekBar

overview.png

在 上一篇分享的文章中，筆者介紹了IndicatorSeekBar的編寫的基本思路和主要代碼，在本篇文章中，筆者主要介紹IndicatorSeekBar的基本使用姿勢。

項(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 演示場景請(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類中使用:

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類型

IndicatorSeekBar 提供了兩種系列的類型:

  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類型：

<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 的類型為 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 的類型是 CONTINUOUS_TEXTS_ENDS 或 DISCRETE_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 的類型是 DISCRETE_TICKS_TEXTS , 可以通過設(shè)置數(shù)組的方式自定義刻度下的文字, 數(shù)組的長度應(yīng)當(dāng)和刻度相等。

<com.warkiz.widget.IndicatorSeekBar
    app:isb_text_array="@array/texts_below_tick_length_5"
    app:isb_tick_num="5" //一般來說 , 文字?jǐn)?shù)組的長度應(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種指示器的類型： ROUNDED_CORNERS / SQUARE_CORNERS / CUSTOM,當(dāng)指示器的類型為 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 的類型為 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)聽

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的類型為非連續(xù) discrete系列 時(shí), 這個(gè)回調(diào)會(huì)獲得滑塊的位置和滑塊下的文字. 當(dāng)為連續(xù) continuous系列則不回調(diào)。

5. 混淆配置

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

6. 支持多種自定義屬性

自定義的屬性較多，具體的屬性介紹可參照以下 源碼文檔介紹。

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

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

IndicatorSeekBar實(shí)現(xiàn)思路：http://www.itdecent.cn/p/debb0541b219

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容