道客优

1234
Android实现冒泡效果进度条
2019-09-05 刀刻油 阅读:1556

Fluid_slider280.gif

Installation

Just download the package from here and add it to your project classpath, or just use the maven repo:

Gradle:

implementation 'com.ramotion.fluidslider:fluid-slider:0.3.1'

SBT:

libraryDependencies += "com.ramotion.fluidslider" % "fluid-slider" % "0.3.1"

Maven:

<dependency>
  <groupId>com.ramotion.fluidslider</groupId>
  <artifactId>fluid-slider</artifactId>
  <version>0.3.1</version>
  <type>aar</type>
</dependency>

Basic usage

Place the FluidSlider in your layout.

To track the current position of the slider, set the positionListener, as shown below:

val slider = findViewById<FluidSlider>(R.id.fluidSlider)
slider.positionListener = { p -> Log.d("MainActivity", "current position is: $p" )}

You can also track the beginning and completion of the movement of the slider, using the following properties:beginTrackingListener and endTrackingListener. Example below:

slider.beginTrackingListener = { /* action on slider touched */ }
slider.endTrackingListener = { /* action on slider released */ }

Here is simple example, how to change FluidSlider range.

// Kotlinval max = 45val min = 10val total = max - minval slider = findViewById<FluidSlider>(R.id.fluidSlider)
slider.positionListener = { pos -> slider.bubbleText = "${min + (total  * pos).toInt()}" }
slider.position = 0.3fslider.startText ="$min"slider.endText = "$max"// Javafinal FluidSlider slider = findViewById(R.id.fluidSlider);
slider.setBeginTrackingListener(new Function0<Unit>() {    @Override
    public Unit invoke() {        Log.d("D", "setBeginTrackingListener");        return Unit.INSTANCE;
    }
});

slider.setEndTrackingListener(new Function0<Unit>() {    @Override
    public Unit invoke() {        Log.d("D", "setEndTrackingListener");        return Unit.INSTANCE;
    }
});// Or Java 8 lambdaslider.setPositionListener(pos -> {    final String value = String.valueOf( (int)((1 - pos) * 100) );
    slider.setBubbleText(value);    return Unit.INSTANCE;
});

Here are the attributes you can specify through XML or related setters:

  • bar_color - Color of slider.

  • bubble_color - Color of circle "bubble" inside bar.

  • bar_text_color - Color of start and end texts of slider.

  • bubble_text_color - Color of text inside "bubble".

  • start_text - Start (left) text of slider.

  • end_text - End (right) text of slider.

  • text_size - Text size.

  • duration - Duration of "bubble" rise in milliseconds.

  • initial_position - Initial positon of "bubble" in range form 0.0 to 1.0.

  • size - Height of slider. Can be small (40dp) and normal (56dp).

This library is a part of a selection of our best UI open-source projects.

源码

推荐阅读: