Skip to content

Latest commit

 

History

History
128 lines (96 loc) · 5 KB

README.md

File metadata and controls

128 lines (96 loc) · 5 KB

Skeleton seekBar lib

This is the seekbar I was creating due to unflexiblility of other solutions available. Writen on kotlin, you can use it on java as well.

SkeletonSeekBar

This is an :View item that controlling 'Sliders' objects inside itself.

 <mitsuru.msb.view.SkeletonSeekBar
                android:id="@+id/msb"
                android:layout_width="match_parent"
                android:layout_height="70dp"
                app:colorLineActive="@color/colorAccent"
                app:colorLineBg="@color/colorPrimary"
                app:draggableDifference="3"
                app:itemH="50dp"
                app:itemW="50dp" />

the available params atm are:

     itemH: Int// slider H, default 30dp
     itemW: Int// slider W, default 30dp

     gravityY: Float// middle line of the seekbar on Y axes, percents, from 0 to 1, default 0.5
     colorLineBg: Paint// bg color of seekbar line where sliders move. default= White
     colorLineActive: Paint
     //color between seekbars. If you have 1 seekbar-> from seek bar to right side of the seekbar, if more- color between first and last slider
     min: Float// min seekbar value, default- 0
     max: Float// max seekbar value, default- 100
     step: Float// distance between slider going onto next value, default- 1. Float value
     draggableDifference// Float, max distance between two sliders inside seekbar. default- 0
	respectRequiredMargin// Boolean, if this is set to true, seekbar will add margin left and right to draw everything fine inside container(seekbar itself). If false- there will be no margin, line will take all X distance and sliders will be drawn outside of the seekbar container on seekbar parent and seekbar neibors

Draggable slider

There are 3 types of dragables available from the box:

  1. Bitmap, which allow you to show bitmap as slider
  2. circle
  3. numeric circle with number inside.
DraggableBitmap(
              val bitmap: Bitmap,
              viewTag: String,
              percent: Float) : AbstractDraggable(viewTag, percent)
DraggableCircle(
              tag: String,
              percent: Float,
              val color: Int) : AbstractDraggable(tag, percent)
DraggableTextCircle(
              tag: String,
              percent: Float,
              color: Int,
              textColor: Int,
              val formatter: String = "%.0f") : DraggableCircle(tag, percent, color)

each takes corresponding resourses to work(Bitmap, color etc)+ tag+ start position as percent of seekbars width. By those tags you will be able to undertand what slider is moving right now and how to respond

example

        val seekBar = findViewById<SkeletonSeekBar>(R.id.msb)
        seekBar.addSlider(DraggableBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.lego), "one", 0f))
        seekBar.addSlider(DraggableBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.lego), "two", 0.5f))
        seekBar.addSlider(DraggableTextCircle("three", 1f, Color.RED, Color.BLACK))

Which will give you this

#Events also selfexpl, example in half java style

        seekBar.iSeekBarChangeListener = object : ISeekBarChangeListener {
            override fun onSeekBarValueChange(tag: String, value: Float) {
                //slider with 'tag' just 'moved' to value
            }
        }
        seekBar.iSeekBarGestureListener= object : ISeekBarGestureListener{
            override fun onSeekbarItemFocused(tag: String, value: Float) {

            }

            override fun onSeekbarItemMoved(tag: String, value: Float) {
            }

            override fun onSeekbarItemReleased(tag: String, value: Float) {
            }
        }

Thats all for basics.

I need a hardcore solution for my project and I dont want to waste time by doing it myseft again, can this lib help?

yes. Sort of.

You can create all sort of crazy stuff with this api and abstract slider class. Just extend from AbstractDraggable and you will have acess to canvas/paints/rects, where you can build stuff like this. The trick is that you need a doze of understanding the canvas+ draw flow around rectangles.

Achieved by setting gravity to 0.3 and creating child of DraggableBitmap, that includes Bitmap+ custom path drawing+ value on it. Easy custom seekbar.

If you are not familliar with drawing on canvas, you should, it is fun and very entertaining. or you can contact me, I will superwise you for that sweet green presidents

TODO

  1. fix runtime slider adding. make them add not in the end, but in right order to not crash view logic of positioning
  2. make seekbar viewgroup and add xml sliders support
  3. add sliding removal
  4. add support of starting pos of sliders as value, not as percent. this is important when saving/loading step. Just make a builder. fromPercent or fromValue
  5. rx support
  6. negative items?
  7. tests?