JAVA-LIBGDX How to set up correctly a scrollPane

Question

I am trying to add to my game a less sliding menu(left and right) at the bottom of the screen. My problem is that I can not adjust the table at the bottom of the screen, this is my code:

   private void initUI() {
  // inizializzazione dello stage
  stage = new Stage(new ExtendViewport(Gdx.graphics.getWidth(),Gdx.graphics.getHeight()/4));
  Skin skin = new Skin(Gdx.files.internal("ui/uiskin.json"));
  Gdx.input.setInputProcessor(stage);

  // inizializzazione della tabella 
  container = new Table();
  container.setFillParent(true);
  stage.addActor(container);

  Table table = new Table();
  table.debug();

  final ScrollPane scroll = new ScrollPane(table, skin);
  scroll.setFillParent(true);

  InputListener stopTouchDown = new InputListener() {
     public boolean touchDown (InputEvent event, float x, float y, int pointer, int button) {
        event.stop();
        return false;
     }         
  };

  table.pad(20).defaults().expandY().space(5);

  for (int i = 0; i < 15; i++) {

     table.row();
     TextButton button = new TextButton(i + "dos", skin);
     table.add(button);
     button.addListener(new ClickListener() {
        public void clicked (InputEvent event, float x, float y) {
           System.out.println("click " + x + ", " + y);
        }
     });
  }      

  container.add(scroll).expandY().fill().colspan(1);
  container.row().space(10).padBottom(10);

}

render(){
  Gdx.gl.glViewport(0, 0, Gdx.graphics.getWidth(),Gdx.graphics.getHeight()/4); 
  Gdx.input.setInputProcessor(stage);
  stage.draw();
  stage.act(Gdx.graphics.getDeltaTime());
  Gdx.gl.glViewport(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());

}

In this way I can split the screen into 2 parts (top and bottom), but the input is not correct: to activate the first button I have to press the top of the screen but the buttom is "designed" at the bottom.

How i can create a table with a scrollpane in the bottom of the screen?

Answer 1

There seems some misunderstanding of the viewport, table and how to use them:

Use one Viewport for your rendering your total screen. Split the screen up by using a Table. Hence change the first line in initUI to

stage = new Stage(new ExtendViewport(Gdx.graphics.getWidth(),Gdx.graphics.getHeight())); (remove the /4)

and adjust your render method to something like:

 @Override
 public void render(float delta) {
        Gdx.gl.glClearColor(0, 0, 0, 0);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.
        stage.act(delta);
        stage.draw();
 }

Clear your color buffer, to make sure that animations, or button-press operations are drawed correctly. Do not set stage as InputProcessor every frame call. Once this is done in initUI it is ok.

To the size of the Table: I assume that the table does not match the containing elements. Hence everytime you add a button with table.add(button) add the information about its height and width with table.add(button).height(...).width(...). Then the Table and the corresponding Scroll pane is adjusted right.

Currently I only see that container contains the scroll object that fills its parent that fills the whole screen. So make sure to add a further table to the container after you add the scroll to the container after container.row().space(10).padBottom(10);. This table will be drawn below the scroll pane.