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

Result

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() {
}

}

example

Answer 2

如果您希望保留在列表中，则可以继承列表，以覆盖drawItem方法，如下所示：

public class ItemList extends List<Entry<String, String>> {

    private int alignment;

    public ItemList(Skin skin, String styleName) {
        super(skin, styleName);
    }

    @Override
    protected GlyphLayout drawItem (Batch batch, BitmapFont font, int index, Entry<String, String> item, float x, float y, float width) {
        String string = toString(item);

        TextureAtlas.AtlasRegion image = // get the image, you want to draw

        batch.draw(image, x, y-image.regionHeight)

        return font.draw(batch, string, x +image.regionWidth +5, y, 0, string.length(), width -image.regionWidth -5, this.alignment, false, "...");
    }

    @Override
    public void setAlignment (int alignment) {
        this.alignment = alignment;
    }

}

使用此方法，您不必重新实现列表的选择机制。

Answer 3

所以我做了这件事，虽然它可能不是最好的方式，但我唯一可以理解的。首先使用Image actor设置要添加到表中的图像。然后在调用row（）之前将图像和标题添加到表中。为了让它们正确对齐，我将它们设置为左对齐，然后在标题上使用否定填充来覆盖表格间距，尽管我确定这是另一种方式。同样使用get select，你可以将它转换为正确的类并调用你可以在任何actor类中设置的getName（），这样你就可以在那里进行，或者只是调用get text或者其他东西。

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

3 个答案: