Giter VIP home page Giter VIP logo

tickseekbar's Introduction

TickSeekBar

DOWNLOAD API

This is a customizable SeekBar library on Android. Also, If you need Indicator to show top of seek bar, please see the other library. 中文.md

OverView

Screenshot

Demo

download

Scan QR code to download:

Setup

implementation 'com.github.warkiz.tickseekbar:tickseekbar:0.1.4'

Usage

xml

<com.warkiz.tickseekbar.TickSeekBar
    android:id="@+id/listener"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tsb_ticks_count="5"
    app:tsb_thumb_color="@color/colorAccent"
    app:tsb_thumb_size="16dp"
    app:tsb_show_tick_marks_type="oval"
    app:tsb_tick_marks_color="@color/colorAccent"
    app:tsb_tick_marks_size="8dp"
    app:tsb_show_tick_texts="above"
    app:tsb_tick_texts_color="@color/color_pink"
    app:tsb_tick_texts_size="13sp"
    app:tsb_track_background_color="@color/color_gray"
    app:tsb_track_background_size="2dp"
    app:tsb_track_progress_color="@color/color_blue"
    app:tsb_track_progress_size="3dp" />

Java

TickSeekBar seekBar = TickSeekBar
             .with(getContext())
             .max(200)
             .min(10.2f)
             .progressValueFloat(true)
             .progress(33)
             .tickCount(7)
             .showTickMarksType(TickMarkType.DIVIDER)
             .tickMarksColor(getResources().getColor(R.color.color_blue))
             .tickMarksSize(6)//dp
             .tickTextsSize(13)//sp
             .showTickTextsPosition(TextPosition.ABOVE)
             .tickTextsColorStateList(getResources().getColorStateList(R.color.selector_tick_texts_3_color))
             .thumbColor(Color.parseColor("#ff0000"))
             .thumbSize(14)
             .trackProgressColor(getResources().getColor(R.color.colorAccent))
             .trackProgressSize(4)
             .trackBackgroundColor(getResources().getColor(R.color.color_gray))
             .trackBackgroundSize(2)
             .build();

Custom section tracks color

The color of every block of seek bar can also be custom.

sectionSeekBar.customSectionTrackColor(new ColorCollector() {
    @Override
    public boolean collectSectionTrackColor(int[] colorIntArr) {
        //the length of colorIntArray equals section count
        colorIntArr[0] = getResources().getColor(R.color.color_blue, null);
        colorIntArr[1] = getResources().getColor(R.color.color_gray, null);
        colorIntArr[2] = Color.parseColor("#FF4081");
        ...
        return true; //True if apply color , otherwise no change
    }
});

Selector drawable&color were supported

You can set the StateListDrawable or ColorStateList for the thumb, tickMarks; Also, ColorStateList for tickTexts is supported, too. Usage's format acccording to:

Thumb selector drawable:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--this drawable is for thumb when pressing-->
    <item android:drawable="@mipmap/ic_launcher_round" android:state_pressed="true" />
    <!--for thumb in normal-->
    <item android:drawable="@mipmap/ic_launcher" />
</selector>

Thumb selector color:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--this color is for thumb which is at pressing status-->
    <item android:color="@color/colorAccent" android:state_pressed="true" />
    <!--for thumb which is at normal status-->
    <item android:color="@color/color_blue" />
</selector>

TickMarks selector drawable:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--this drawable is for tickMarks when pressing-->
    <item android:drawable="@mipmap/ic_launcher_round" android:state_selected="true" />
    <!--for tickMarks in normal-->
    <item android:drawable="@mipmap/ic_launcher" />
</selector>

TickMarks selector color:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--this color is for marks those are at left side of thumb-->
    <item android:color="@color/colorAccent" android:state_selected="true" />
    <!--for marks those are at right side of thumb-->
    <item android:color="@color/color_gray" />
</selector>

TickTexts selector color:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--this color is for texts those are at left side of thumb-->
    <item android:color="@color/colorAccent" android:state_selected="true" />
    <!--for tick text which is stopped under thumb -->
    <item android:color="@color/color_blue" android:state_hovered="true" />
    <!--for texts those are at right side of thumb-->
    <item android:color="@color/color_gray" />
</selector>

Listener

seekBar.setOnSeekChangeListener(new OnSeekChangeListener() {
        @Override
        public void onSeeking(SeekParams seekParams) {
            Log.i(TAG, seekParams.seekBar);
            Log.i(TAG, seekParams.progress);
            Log.i(TAG, seekParams.progressFloat);
            Log.i(TAG, seekParams.fromUser);
            //when tick count > 0
            Log.i(TAG, seekParams.thumbPosition);
            Log.i(TAG, seekParams.tickText);
        }

        @Override
        public void onStartTrackingTouch(TickSeekBar seekBar) {
        }

        @Override
        public void onStopTrackingTouch(TickSeekBar seekBar) {
        }

});

Proguard

-dontwarn com.warkiz.tickseekbar.**

Attributes

attr.xml

Support & Contact me

感谢: 自从在文档里公布了二维码,我收到国内的朋友的一些打赏,虽然金额不大,但是一些支持和鼓励的话语还是让我感到开心,非常感谢。

感谢所有之前支持我的朋友。如果下次你要给我打赏,可以顺带写上你的github地址,我会在这里用链接贴出来,算是相互鼓励。

感谢你们的支持。

Feel free to contact me if you have any trouble on this project:

  1. Create an issue.
  2. Send mail to me, "warkiz".concat("4j").concat("@").concat("gmail.com")

License

Copyright (C) 2017 zhuangguangquan 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.

tickseekbar's People

Contributors

warkiz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

tickseekbar's Issues

there should be method to change mthumbSize like setThumbDrawable

Hi,

hope you are good i really like your TickSeekBar and it saved lot of my time, the only thing i am unable to set is mthumbSize on setOnSeekChangeListener because mthumSize is a private variable and there is no such method to change the size like changing the thumb drawable setThumbDrawable

if you can update the library and add method to change size it will be really great

Thank you

滑动闪烁问题

作者你好,我在使用过程中设置了tsb_seek_smoothly为true
tsb_thumb_adjust_auto为false时,可以在ticksCount大于2的时候在任意位置停下,但是滑动接近ticks时,滑块和ticks会疯狂跳跃闪烁,请问有解决办法吗

Different color for progress marks

Hi! Thank you for this nice library!
It almost fits my needs, but I need different colors for the marks ahead and behind the thumb. I suggest adding a new attribute called tsb_tick_marks_progress_color (or similar, maybe this is too big) for the color of the marks behind the thumb and keep tsb_tick_marks_color for the color of the ones ahead of it. When not specified, tsb_tick_marks_progress_color may have the same value as tsb_tick_marks_color.

当设置只有2个点的时候,中间可以滑动了

采用的是custom里的第一个方式,现在默认设置的是6个点,可以正常点击count
点与点之间是无法滑动的,,但是当count设置成2的时候,
起点到终点之间变成了可以滑动了,这个怎么改?

乐视Dialog适配问题

在乐视手机上面,文字和指示器线重叠,拖动进度就好了。但是在其他手机上正常显示。

seek_smoothly not working

Hi there,

I'm using a seekbar with option "seek smooth". From my understanding with that option, the thumb should be movable continuous between the ticks, right? If I release the thumb, it flips automatically to the nearest located tick. Also if I set the progress programmatically, only the Ticks are considered...

Is it also possible with continuous intermediate steps, like in the example below:

Ticks at each 25% from 0 to 100. I want to have text as well as ticks with intermediate position, i.e. 60%. Is that possible?
0 25 50 75 100 %
|-----|-----|--x---|-----|

Thanks in advance

导入源码时出现问题

大佬你好
我想实现个功能需要使用你源码,但将tickseekbar作为module引入项目后有几处错误
在TickSeekBar.java文件中android.util.MathUtils找不到,ColorStateList没有getStates和getColors方法
请问如何修复

我要实现的功能是自定义thumb文字内容,比如进度是5时显示5分,并且5的字号很大,分的字号很小

调用 setTickCount 时机不对导致setProgress 无效的问题

由于想要用一套layout来复用,想要在代码离根据不同的数据设置不同的tickcount和max等参数,然后发现setProgress无效,出问题的代码是这样:

preference.seekBar.tickCount = 4
preference.seekBar.min = 0.toFloat()
preference.seekBar.max = 3.toFloat()
preference.seekBar.setProgress(1.0f)

经过检查发现是setProgress时会在一个数组mProgressArr里找最接近参数传进来的值,这个mProgressArr里的值本应该是seekbar中每个刻度(tick)的对应的值,换言之在本例子应该为[0.0, 1.0, 2.0, 3.0]

但是mProgressArr此时里面的值为[0.0, 33.333, 66.666, 100]

进一步排查发现在setTickCount的时候才会重新计算这个mProgressArr里的值,关键在于下面这段代码

mProgressArr = new float[mTicksCount];
for (int i = 0; i < mProgressArr.length; i++) {
     mProgressArr[i] = mMin + i * (mMax - mMin) / ((mTicksCount - 1) > 0 ? (mTicksCount - 1) : 1);
}

可以看到时通过minmax来计算出每个 tick 对应的值的,所以用例代码无法工作的理由在于应该先调用setMinsetMax再调用setTickCount

建议setMinsetMax方法也要重新计算这个mProgressArr

Tick text shows null

My layout is like that:

<com.warkiz.tickseekbar.TickSeekBar
android:id="@+id/distanceSeekBar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="14dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tsb_max="100"
app:tsb_min="1"
app:tsb_show_tick_texts="below"
app:tsb_thumb_color="@color/colorPrimary"
app:tsb_thumb_size="18dp"
app:tsb_tick_texts_array="@array/distance_seekbar_texts"
app:tsb_tick_texts_color="@color/textColor"
app:tsb_tick_texts_size="13sp"
app:tsb_ticks_count="12"
app:tsb_track_progress_color="@color/colorPrimary" />

and my array is:

     <item>1</item>
     <item>3</item>
     <item>5</item>
     <item>7</item>
    <item>10</item>
    <item>15</item>
     <item>20</item>
    <item>30</item>
     <item>40</item>
     <item>50</item>
     <item>75</item>
     <item>100</item>

But all texts are shown as null.
is there any problem?

tsb_seek_smoothly

你好,此属性有第三种情况吗?比如不要自动滑动到间隔点,而是0-100之间都可以滑动?谢谢

change direction

can change direction to rtl?
min value in Right and max value in left

tanks

Why can't i set tickCount

this.tickBar = findViewById(R.id.create_fault_steps)
I can't call
this.tickBar.setTickcount or something.

Possible to increase the Tick count max programmatically

Hey. I love the library, it looks great. I am trying to (when a certain condition is met) update the Tick bar to increase its maximum tick count. I noticed there was a method to set the max tick.

I have tried
seekbar.setMax(32f);

This does not seem to update the UI though, the old value is still visible and the Tick ends up in the middle. Is this possible to do?

seekbar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.