Libgdx ProgressBar (progress bar) slider (slide bar)

ProgressBar is the progress bar, extends Widget. Shows the time/load progress within a given range. The preferheight is determined by the given background picture or the maximum height of the knob, and the default width is 140.

slider slider, usually set in the game to adjust the volume or adjust the difficulty of the game and so on. A slider is a horizontal indicator bar that allows the user to set a value. Extends ProgressBar therefore also has a Min max value, a moving pace.
The same preferheight is determined by the given background image or the maximum height of the knob, and the default width is 140. Unlike ProgressBar, when moving knob changeevent time is triggered, we can do some numerical adjustments here.

Unfortunately, the default Uiskin.json file does not contain Progressbarstyle and sliderstyle, so we have to define the style ourselves.

has always been used badlogic game pictures, but here is really not good, upload a bit below the picture used




Test Code Show:

Stage stage;
    Texture progress_bar, knob_progress_bar;
    ProgressBar bar;

    float stateTime = 0;
    float count = 1f;
    boolean isCount = true;

    Texture slider_background, slider_knob;
    Slider slider;


    @Override
    public void create () {
        stage = new Stage ();
        Gdx.input.setInputProcessor (stage);

        progress_bar = new Texture (Gdx.files.internal ("progress_bar.png"));
        knob_progress_bar = new Texture (Gdx.files.internal ("knob.png"));

        ProgressBar.ProgressBarStyle pbs = new ProgressBar.ProgressBarStyle ();
        pbs.background = new TextureRegionDrawable (new TextureRegion (progress_bar));
        pbs.knob = new TextureRegionDrawable (new TextureRegion (knob_progress_bar));

        // The minimum value is 1, the maximum value is 50, and the number of movement steps is 1, then a total of 50 moves
        bar = new ProgressBar (0f, 50, 1f, false, pbs);
        bar.setValue (count);
// bar.setRotation (45); Due to the special nature of ProgressBar, simple rotation does not work, you can use the following method
// Group group = new Group ();
// group.addActor (bar);
// group.setRotation (45);
        // Set the gradient speed of the movement. The default is Linear, but sometimes you can set the effect of loading first and loading slowly later.
        bar.setVisualInterpolation (Interpolation.exp10Out);
        bar.setPosition (Gdx.graphics.getWidth () / 2-bar.getPrefWidth () / 2, Gdx.graphics.getHeight () / 2-20);
// stage.addActor (bar);
// stage.addActor (group);

        slider_background = new Texture (Gdx.files.internal ("slider_background.png"));
        slider_knob = new Texture (Gdx.files.internal ("slider_knob.png"));
        Slider.SliderStyle ss = new Slider.SliderStyle ();
        ss.background = new TextureRegionDrawable (new TextureRegion (slider_background));
        ss.knob = new TextureRegionDrawable (new TextureRegion (slider_knob));
        slider = new Slider (0f, 10f, 1f, false, ss);
        slider.setPosition (bar.getX (), bar.getY () + bar.getHeight () + 40);
        slider.addListener (new ChangeListener () {

            @Override
            public void changed (ChangeEvent event, Actor actor) {
                Gdx.app.log ("TAG", "slider changed to:" + slider.getValue ());

            }
        });
        stage.addActor (slider);
    }

    @Override
    public void render () {
        Gdx.gl.glClearColor (0.39f, 0.58f, 0.92f, 1.0f);
        Gdx.gl.glClear (GL20.GL_COLOR_BUFFER_BIT);

        stateTime + = Gdx.graphics.getDeltaTime ();
        // The knob moves one step every 1 second, moving to the maximum value, the knob stops itself, but in order to stop counting, add a judgment condition
        if (stateTime> 1 && count <= 50) {
            count ++;
            stateTime = 0;
            bar.setValue (count);
        }
        // monitor if the value of bar Value reaches the maximum
        if (isCount && bar.getValue () == 50) {
            isCount = false;
            System.out.println ("get max value");
        }
        stage.act ();
        stage.draw ();
    }

    @Override
    public void dispose () {
        progress_bar.dispose ();
        knob_progress_bar.dispose ();
        slider_background.dispose ();
        slider_knob.dispose ();
        stage.dispose ();
    } 

Libgdx ProgressBar (progress bar) slider (slide bar)