资讯专栏INFORMATION COLUMN

IndicatorSeekBar:Android自定义View,滑动显示进度气泡指示器

NicolasHe / 2666人阅读

摘要:地址中文自定义能改变尺寸颜色滑块图片刻度图片刻度文字和气泡指示器,当滑动时显示带有进度的指示器。给选择圆角方角默认两端是圆角,可以设置为方形。滑块下显示进度当的类型为时可以设置滑动后滑块下显示保留进度。

IndicatorSeekBar



GitHub地址:https://github.com/warkiz/Ind...

README: 中文 | English

自定义SeekBar, 能改变尺寸、颜色、滑块(thumb)图片、刻度(tick)图片、刻度文字(text)和气泡指示器(indicator),当滑动时显示带有进度的指示器。

如果你喜欢IndicatorSeekBar, 去GitHub给个Star支持一下吧。

1.截图



2. 使用 1. 在app/build.gradle下:
dependencies {
    compile "com.github.warkiz.widget:indicatorseekbar:1.1.2"
}
2. 在布局文件或java类中: xml
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();
更多使用方式请参考 GitHub.
3. 功能 3.1 多种的SeekBar类型

IndicatorSeekBar 提供了两种系列的类型:

连续(continuous)的滑动:  CONTINUOUS/CONTINUOUS_TEXTS_ENDS.

非连续(discrete)的滑动:  DISCRETE_TICKS/  DISCRETE_TICKS_TEXTS/  DISCRETE_TICKS_TEXTS_ENDS.

3.2 自定义 颜色、尺寸

SeekBar以下部分的颜色或尺寸可以被自定义:

背景条 track_background_bar

进度条 track_progress_bar

刻度 tick

刻度文字 text

滑块 thumb

指示器 indicator

指示器文字 indicator_text

3.3 隐藏刻度tick

SeekBar的两个端点的刻度或者滑块左边的刻度可以被隐藏。



3.4 给SeekBar选择圆角/方角

默认两端是圆角,可以设置为方形。

3.5 滑块thumb下显示进度

当 seekabr 的类型为 CONTINUOUS or DISCRETE_TICKS时 , 可以设置滑动后滑块下显示保留进度。

3.6 自定义SeekBar两端的文字text

当 seekabr 的类型是 CONTINUOUS_TEXTS_ENDSDISCRETE_TICKS_TEXTS_ENDS 时, 可以设置两端的文字.

3.7 自定义刻度下的文字text

当 seekabr 的类型是 DISCRETE_TICKS_TEXTS , 可以通过设置数组的方式自定义刻度下的文字, 数组的长度应当和刻度相等。

or
indicatorSeekBar.setTextArray(R.array.texts_below_tick_length_5);
3.8 自定义滑块thumb的图片

滑块可以使用图片去自定义:

3.9 自定义刻度tick的图片

刻度可以使用图片去自定义.

3.10 自定义指示器indicator

IndicatorSeekbar提供了3种指示器的类型: ROUNDED_CORNERS / SQUARE_CORNERS / CUSTOM,当指示器的类型为 CUSTOM 时, 可以自定义指示器的view.

or
indicatorSeekBar.setCustomIndicator(R.layout.indicator);

注意:如果自定义指示器需要显示进度, 那么指示器必须要有一个TextView,而且其id必须设置为isb_progress.

3.11 自定义指示器顶部的内容

当 indicator 的类型为 ROUNDED_CORNERS 或者 SQUARE_CORNERS , 可以设置指示器顶部的view.

or
indicatorSeekBar.getIndicator().setIndicatorTopContentLayout(R.layout.top_content_view);

注意:如果自定义指示器顶部的view需要显示进度, 那么这个view必须要有一个TextView,而且其id必须设置为isb_progress.

4. 支持进度监听
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系列则不回调。

5. 混淆配置
-keep class com.warkiz.widget.** { *; }
6. 属性
//seekBar






    
    
    
    
    

//indicator

    
    
    
    




 


//track





//thumb




//tick







    
    
    

//texts




GitHub地址:https://github.com/warkiz/Ind...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/68017.html

相关文章

  • 小哥哥小姐姐看过来,这里有个组件库需要您签收一下

    摘要:如果你想减少包大小,你可以这样引入事实上,每个组件都是支持单独安装的,我们也推荐你使用这种方式引入组件。以下是运行示例后各界面的截图组件图标右上角的圆形徽标数字。 1. 前言 一直以来都想做个组件库,一方面是对工作中常遇问题的总结,另一方面也确实能够提升工作效率(谁又不想造一个属于自己的轮子呢~),于是乎就有了本文的主角儿rn-components-kit。 市面上web的UI组件库如...

    Alan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<