Skip to content

Customize the your own effects

李涛 edited this page Mar 7, 2023 · 1 revision

1. Modifying sliders attribute

View attribute doc

2. Customize the thumb drawable

Customize your own thumb drawable like this if you want
Sample drawable : BiliBili Style

3. Customize the effects

  • You need to use slider-effect lib and extends BaseEffect class
    implementation 'io.github.litao0621:nifty-slider-effect:(latest version)'
  • Extends BaseEffect and override the methods.Redraw active track,inactive track,thumb,etc
    /** Called when a slider's touch event is being started */
    fun onStartTacking(slider: T)

    /** Called when a slider's touch event is being stopped */
    fun onStopTacking(slider: T)

    /** Called when the value of the slider changes  */
    fun onValueChanged(slider: T, value: Float, fromUser: Boolean)

    /** Called before draw inactive track . Return true if the interrupt default draw*/
    fun dispatchDrawInactiveTrackBefore(slider: T, canvas: Canvas, trackRect: RectF, yCenter: Float): Boolean
    /** Called after draw inactive track */
    fun drawInactiveTrackAfter(slider: T, canvas: Canvas, trackRect: RectF, yCenter: Float)

    /** Called before draw active track . Return true if the interrupt default draw*/
    fun dispatchDrawTrackBefore(slider: T, canvas: Canvas, trackRect: RectF, yCenter: Float): Boolean
    /** Called after draw active track */
    fun drawTrackAfter(slider: T, canvas: Canvas, trackRect: RectF, yCenter: Float)

    /** Called before draw thumb drawable . Return true if the interrupt default draw*/
    fun dispatchDrawThumbBefore(slider: T, canvas: Canvas, cx: Float, cy: Float): Boolean
    /** Called after draw thumb drawable */
    fun drawThumbAfter(slider: T, canvas: Canvas, cx: Float, cy: Float)
  • Here is a completed custom effect example that combines Lottie animation..

View Sample