自定义SeekBar, 能改变尺寸、颜色、滑块(thumb)图片、刻度(tick)图片、刻度文字(text)和气泡指示器(indicator)，当滑动时显示带有进度的指示器。
欢迎 star or pull request。
12/5
自定义tick或thumb的图片时：
当图片宽度小于30dp , 显示完整图片;
当大于30dp , 可通过属性 isb_tick_size/isb_thumb_width 控制, 默认显示14dp, 最大显示30dp.
12/10
新增指示器Indicator自动显示功能, 滑动SeekBar时Indiator不消失。
属性为 isb_indicator_stay , 提供 setter 方法 ; 可跟随 View 滚动。
此功能适用ListView / ScrollView / GridView / RecyclerView / ViewPager / Dialog 等场景。
12/14
兼容 ConstraintLayout.
12/17
新增指示器Indicator 类型 circular_bubble
12/19
支持在运行时修改builder参数, 并动态更新IndicatorSeekBar.
最新版本:
dependencies {
//推荐使用最新版本
compile 'com.github.warkiz.widget:indicatorseekbar:1.2.3'
}<com.warkiz.widget.IndicatorSeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:isb_max="100"
app:isb_min="10"
app:isb_progress="34"
app:isb_show_indicator="true" />
<com.warkiz.widget.IndicatorSeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:isb_indicator_type="circular_bubble"
app:isb_progress="50"
app:isb_seek_bar_type="discrete_ticks_texts"
app:isb_tick_num="6"
app:isb_tick_type="oval" />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.CIRCULAR_BUBBLE)
.setIndicatorColor(Color.parseColor("#0000FF"))
.build();
动态更新IndicatorSeekBar:
indicatorSeekBar.getBuilder()
.setMax(232)
.setMin(43)
.setTickType(TickType.OVAL)
.setTickColor(Color.parseColor("#0000FF"))
.setIndicatorColor(Color.parseColor("#00ff00"))
.apply();更多使用方式请参考 demo.apk.
SeekBar以下部分的颜色或尺寸可以被自定义：
- 背景条 track_background_bar
- 进度条 track_progress_bar
- 刻度 tick
- 刻度文字 text
- 滑块 thumb
- 指示器 indicator
- 指示器文字 indicator_text
IndicatorSeekBar 提供了两种系列的类型:
-
连续（continuous）的滑动:
CONTINUOUS/CONTINUOUS_TEXTS_ENDS. -
非连续（discrete）的滑动:
DISCRETE_TICKS/DISCRETE_TICKS_TEXTS/DISCRETE_TICKS_TEXTS_ENDS.
<com.warkiz.widget.IndicatorSeekBar
app:isb_seek_bar_type="continuous"
.../>IndicatorSeekBar 提供了 4 种指示器类型: 矩形(rectangle),圆角矩形(rectangle_rounded_corner),圆形气泡(circular_bubble) 和 自定义(custom)。
<com.warkiz.widget.IndicatorSeekBar
app:isb_indicator_type="circular_bubble"
.../>SeekBar的两个端点的刻度或者滑块左边的刻度可以被隐藏。
<com.warkiz.widget.IndicatorSeekBar
app:isb_tick_both_end_hide="true"
.../>
<com.warkiz.widget.IndicatorSeekBar
app:isb_tick_on_thumb_left_hide="true"
.../>默认两端是圆角，可以设置为方形。
<com.warkiz.widget.IndicatorSeekBar
app:isb_track_rounded_corners="true"
.../>当 seekabr 的类型为 CONTINUOUS or DISCRETE_TICKS时 , 可以设置滑动后滑块下显示保留进度。
<com.warkiz.widget.IndicatorSeekBar
app:isb_seek_bar_type="continuous"//discrete_ticks
app:isb_thumb_progress_stay="true"
.../>当 seekabr 的类型是 CONTINUOUS_TEXTS_ENDS 或 DISCRETE_TICKS_TEXTS_ENDS 时, 可以设置两端的文字.
<com.warkiz.widget.IndicatorSeekBar
app:isb_seek_bar_type="continuous_texts_ends"//discrete_ticks_texts_ends
app:isb_text_left_end="last"
app:isb_text_right_end="next"
.../>当 seekabr 的类型是 DISCRETE_TICKS_TEXTS , 可以通过设置数组的方式自定义刻度下的文字, 数组的长度应当和刻度相等。
<com.warkiz.widget.IndicatorSeekBar
app:isb_text_array="@array/texts_below_tick_length_5"
app:isb_tick_num="5" //一般来说 , 文字数组的长度应该和刻度的数量相等
.../>or
indicatorSeekBar.setTextArray(R.array.texts_below_tick_length_5);滑块可以使用图片去自定义：
<com.warkiz.widget.IndicatorSeekBar
app:isb_thumb_drawable="@mipmap/ic_launcher"
.../>注意: 可通过isb_thumb_width 属性设置滑块图片大小, 最大限制显示30dp, 默认14dp . 如果图片小于30dp, 会整张图片显示.
刻度可以使用图片去自定义.
<com.warkiz.widget.IndicatorSeekBar
app:isb_tick_drawable="@mipmap/ic_launcher"
.../>注意: 可通过isb_tick_size 属性设置刻度图片大小, 最大限制显示30dp, 默认8dp . 如果图片小于30dp, 会整张图片显示.
IndicatorSeekbar提供了3种指示器的类型： ROUNDED_CORNERS / SQUARE_CORNERS / CUSTOM,当指示器的类型为 CUSTOM 时, 可以自定义指示器的view.
<com.warkiz.widget.IndicatorSeekBar
app:isb_indicator_type="custom"
app:isb_indicator_custom_layout="@layout/indicator"
.../>or
indicatorSeekBar.setCustomIndicator(R.layout.indicator);注意：如果自定义指示器需要显示进度, 那么指示器必须要有一个TextView，而且其id必须设置为isb_progress.
当 indicator 的类型为 ROUNDED_CORNERS 或者 SQUARE_CORNERS , 可以设置指示器顶部的view.
<com.warkiz.widget.IndicatorSeekBar
app:isb_indicator_type="rounded_corners"//square_corners
app:isb_indicator_custom_top_content_layout="@layout/top_content_view"
.../>or
indicatorSeekBar.getIndicator().setIndicatorTopContentLayout(R.layout.top_content_view);注意：如果自定义指示器顶部的view需要显示进度, 那么这个view必须要有一个TextView，而且其id必须设置为isb_progress.
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: 当SeekBar的类型为非连续 discrete系列 时, 这个回调会获得滑块的位置和滑块下的文字. 当为连续 continuous系列则不回调。
-keep class com.warkiz.widget.** { *; }Copyright 2017 Chuang Guangquan (warkiz)
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
如果你对此项目有问题，欢迎通过以下方式联系我。
- 提issue.
- 发邮件, "warkiz".concat("4j").concat("@").concat("gmail.com")