如何使用libgdx将文本和图像添加到ScrollPane？

Question

这是一段代码片段。

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); 

这是我得到的，它工作正常。我想在每个项目前添加描述性图标，但似乎无法使其工作。我还需要一些方法来获取添加后所选内容的名称。目前我使用

itemlist.getSelectedIndex(); 

Answer 1

不能使用列表窗口小部件就我所知，添加图片或表格或文本以外任何东西。但是，您可以制作表格并将Drawable背景更改为可在某些事件发生时模拟列表效果的新纹理（如mouseMove事件）。然后，您可以将该表添加到可处理滚动事件的ScrollPane中。

这将带你一点的编码，但这里是一个工作的例子，我刮起了你：

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

所以我做了这个确切的事情，虽然它可能不是它的唯一我能想出的最好办法。首先使用Image actor将图像添加到表格中。然后在调用row（）之前将图像和标题添加到表中。让它们正确对齐我将它们设置为左对齐，然后在标题上使用负面填充以覆盖表格间距，但我确定这是另一种方式。还使用GET选择，那么你可以将它转换为正确的类和调用的getName（），你可以在任何演员类设置，所以你可以做到这一点还是只调用get文本什么的。