本文項(xiàng)目地址:https://github.com/warkiz/IndicatorSeekBar
IndicatorSeekBar
在 上一篇分享的文章中狗热,筆者介紹了IndicatorSeekBar的編寫(xiě)的基本思路和主要代碼,在本篇文章中锨络,筆者主要介紹IndicatorSeekBar的基本使用姿勢(shì)潦俺。
項(xiàng)目介紹:
Android 自定義SeekBar, 能改變尺寸拒课、顏色、滑塊(thumb)圖片黑竞、刻度(tick)圖片捕发、刻度文字(text)和氣泡指示器(indicator)疏旨,當(dāng)滑動(dòng)時(shí)顯示帶有進(jìn)度的氣泡指示器很魂。
如果需要英文版,點(diǎn)擊: English here
慣例, 先上截圖:
更多 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)型:
連續(xù)(continuous)的滑動(dòng):
CONTINUOUS
/CONTINUOUS_TEXTS_ENDS
.非連續(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。
- 背景條 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_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 的類(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閱讀原作者的源碼芜飘。
IndicatorSeekBar實(shí)現(xiàn)思路:http://www.reibang.com/p/debb0541b219