Mit libgdx, wie kann ich einem ScrollPane sowohl Text als auch Bilder hinzufügen?

Question

Hier ist ein Code-Snippet.

itemList = new List(skin, "ariel.32.white"); 
String[] tmpInv = new String[b+1]; 
tmpInv[0] = "<Empty>"; 
    a++; 
    for (Entry<String, String> entry : inventoryItems.entrySet()) { 
     tmpInv[a] = entry.getKey(); 
     a++; 
     //String key = entry.getKey(); 
     //Object value = entry.getValue(); 
     // ... 
    } 
    Arrays.sort(tmpInv); 

    itemList.setItems(tmpInv); 

inventoryPane = new ScrollPane(itemList, skin); 

Hier ist was ich bekomme, und es funktioniert gut. Ich würde gerne beschreibende Icons vor jedem Artikel hinzufügen, aber ich kann es scheinbar nicht zum Laufen bringen. Ich brauche auch einen Weg, um den Namen zu erhalten, der ausgewählt ist, nachdem sie hinzugefügt wurden. Derzeit verwende ich

itemlist.getSelectedIndex(); 

Answer 1

Sie können ein Listenwidget nicht verwenden, um Bilder oder Tabellen oder etwas anderes als Text hinzuzufügen, soweit mir bekannt ist. Sie können jedoch eine Tabelle erstellen und den Hintergrund in eine neue Textur umwandeln, die den Effekt einer Liste simuliert, wenn einige Ereignisse auftreten (wie ein mouseMove-Ereignis). Sie können diese Tabelle dann zu einem ScrollPane hinzufügen, der Ihre Scroll-Ereignisse verarbeiten kann.

Dadurch werden Sie ein bisschen Codierung, aber hier ist ein funktionierendes Beispiel, das ich für Sie peitschte:

package <some package>; 

import com.badlogic.gdx.Game; 
import com.badlogic.gdx.Gdx; 
import com.badlogic.gdx.Screen; 
import com.badlogic.gdx.graphics.GL20; 
import com.badlogic.gdx.graphics.Texture; 
import com.badlogic.gdx.graphics.g2d.TextureRegion; 
import com.badlogic.gdx.scenes.scene2d.Event; 
import com.badlogic.gdx.scenes.scene2d.Stage; 
import com.badlogic.gdx.scenes.scene2d.ui.Image; 
import com.badlogic.gdx.scenes.scene2d.ui.Label; 
import com.badlogic.gdx.scenes.scene2d.ui.ScrollPane; 
import com.badlogic.gdx.scenes.scene2d.ui.Skin; 
import com.badlogic.gdx.scenes.scene2d.ui.Table; 
import com.badlogic.gdx.scenes.scene2d.utils.FocusListener; 
import com.badlogic.gdx.scenes.scene2d.utils.TextureRegionDrawable; 

public class ScrollScreenTest implements Screen{ 
Game game; 
ScrollPane scrollpane; 
Skin skin; 
Stage stage; 
Table container, table1, table2, table3; 
Texture texture1, texture2, texture3; 

public ScrollScreenTest(Game game){ 
    this.game = game; 
} 
@Override 
public void render(float delta) { 
    Gdx.gl.glClearColor(0, 0, 0, 1); //sets up the clear color (background color) of the screen. 
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT); //instructs openGL to actually clear the screen to the newly set clear color. 
    stage.draw(); 
    stage.act(delta); 

} 

@Override 
public void resize(int width, int height) { 
} 

@Override 
public void show() { 

    // setup skin 
    skin = new Skin(Gdx.files.internal("data/uiskin.json")); 

    texture1 = new Texture(Gdx.files.internal("iron_axe.png")); 
    texture2 = new Texture(Gdx.files.internal("iron_dagger.png")); 
    texture3 = new Texture(Gdx.files.internal("iron_sword.png")); 

    // table that holds the scroll pane 
    container = new Table(); 
    container.setWidth(320f); 
    container.setHeight(300f); 

    // tables that hold the data you want to display 
    table1 = new Table(skin); 
    table1.add(new Image(texture1)).expandY().fillY(); 
    table1.add(new Label("", skin)).width(10f).expandY().fillY();// a spacer 
    table1.add(new Label("Look at this axe I stole!", skin)).expandY().fillY(); 

    table2 = new Table(skin); 
    table2.add(new Image(texture2)).expandY().fillY(); 
    table2.add(new Label("", skin)).width(10f).expandY().fillY();// a spacer 
    table2.add(new Label("So dagger, much pointy.", skin)).expandY().fillY(); 

    table3 = new Table(skin); 
    table3.add(new Image(texture3)).expandY().fillY(); 
    table3.add(new Label("", skin)).width(10f).expandY().fillY();// a spacer 
    table3.add(new Label("Valyrian steel..", skin)).expandY().fillY(); 


    //inner table that is used as a makeshift list. 
    Table innerContainer = new Table(); 
    innerContainer.add(table1).expand().fill(); 
    innerContainer.row(); 
    innerContainer.add(table2).expand().fill(); 
    innerContainer.row(); 
    innerContainer.add(table3).expand().fill(); 

    // create the scrollpane 
    scrollpane = new ScrollPane(innerContainer); 

    //add the scroll pane to the container 
    container.add(scrollpane).fill().expand(); 

    // setup stage 
    stage = new Stage(); 

    // add container to the stage 
    stage.addActor(container); 

    // setup input processor (gets clicks and stuff) 
    Gdx.input.setInputProcessor(stage); 

    // setup a listener for the tables with out data 

    table1.addListener(new FocusListener(){ 
     @Override 
     public boolean handle(Event event){ 

     if (event.toString().equals("mouseMoved")){ 
      table1.background(new TextureRegionDrawable(new TextureRegion(new Texture("gray.png")))); 
      return false; 
     } 
     else if(event.toString().equals("exit")){ 
      //table1.setBackground(null); 
      //table1.background(""); 
      table1.setBackground(null, false); 

      return false; 
     } 
      return true; 
     } 

    }); 
    table2.addListener(new FocusListener(){ 
     @Override 
     public boolean handle(Event event){ 

     if (event.toString().equals("mouseMoved")){ 
      table2.background(new TextureRegionDrawable(new TextureRegion(new Texture("gray.png")))); 
      return false; 
     } 
     else if(event.toString().equals("exit")){ 
      //table1.setBackground(null); 
      //table1.background(""); 
      table2.setBackground(null, false); 

      return false; 
     } 
      return true; 
     } 

    }); 
    table3.addListener(new FocusListener(){ 
     @Override 
     public boolean handle(Event event){ 

     if (event.toString().equals("mouseMoved")){ 
      table3.background(new TextureRegionDrawable(new TextureRegion(new Texture("gray.png")))); 
      return false; 
     } 
     else if(event.toString().equals("exit")){ 
      //table1.setBackground(null); 
      //table1.background(""); 
      table3.setBackground(null, false); 

      return false; 
     } 
      return true; 
     } 

    }); 
} 

@Override 
public void hide() { 
} 

@Override 
public void pause() { 
} 

@Override 
public void resume() { 
} 

@Override 
public void dispose() { 
} 

}

Answer 2

So habe ich genau dieses getan und obwohl es vielleicht nicht die beste Art und Weise ist es das einzige, was ich herausfinden konnte. Verwenden Sie zuerst den Bilddarsteller für, um Ihr Bild so einzustellen, dass es in die Tabelle eingefügt wird. Fügen Sie dann image und title vor dem Aufruf von row() zur Tabelle hinzu. um sie richtig auszurichten, habe ich sie als linksbündig eingestellt und dann mit negativer Füllung auf den Titel gesetzt, um den Tabellenabstand zu überschreiben, obwohl ich mir sicher bin, dass es einen anderen Weg gibt. Wenn Sie get ausgewählt haben, können Sie sie in die richtige Klasse umwandeln und getName() aufrufen, das Sie in jeder Akteurklasse setzen können, damit Sie es dort tun oder einfach nur Text oder etwas aufrufen können.