更新表格中的图片 [英] Updating image in table

问题描述

我当前正在创建一个清单系统，用户可以在其中从清单列表集中选择一个项目，并且右侧的图标将更新.

I'm currently creating an inventory system in which the user can select an item from their inventory list collection, and the icon on the right will update.

到目前为止，我已经实现了ClickListener来从清单中获取当前选中的商品，并调用了我创建的.getImage()方法来获取选中商品的图标.

As of now, I've implemented a ClickListener to get the currently selected item from the inventory list and called the .getImage() method that I created to get the icon of the selected item.

我用了table.add(image);将图标添加到表格中.但是，将图标添加到表格后，它会填满该空间，并且当用户在另一个项目上进行选择时，会在右侧创建另一列.这就是问题.

I used table.add(image); to add the icon to the table. However, when the icon is added to the table, it fills up that space, and another column is created to the right when the user selects on another item. This is the issue.

当用户选择其他项目而不是在右侧创建另一列时，如何更新图像区域?

How do I get the image area to update when the user selects another item, rather than creating another column to the right?

目前是这样的: https://imgur.com/a/O6SW8gi

我想要用用户单击的最新项目更新剑的区域.

I want the area where the sword is to be updated with the latest item that the user has clicked on.

这是我的代码:

package com.sps.game.inventory;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Input;
import com.badlogic.gdx.InputProcessor;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.scenes.scene2d.*;
import com.badlogic.gdx.scenes.scene2d.ui.*;

import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;
import com.badlogic.gdx.utils.viewport.FitViewport;
import com.badlogic.gdx.utils.viewport.Viewport;
import com.sps.game.controller.InventoryController;
import com.sps.game.controller.PlayerController;

import java.util.ArrayList;

public class PlayerInventory {
    public Stage stage;
    public SpriteBatch sb;
    private Viewport viewport;

    private Skin skin = new Skin(Gdx.files.internal("core/assets/pixthulhuui/pixthulhu-ui.json"));

    private List<Item> inventory;
    private List<Image> itemImages;

    private InventoryController inventoryController;
    private InputProcessor oldInput;

    Table table = new Table(skin);



    public PlayerInventory(SpriteBatch sb, PlayerController playerController) {
        this.sb = sb;
        viewport = new FitViewport(Gdx.graphics.getWidth(), Gdx.graphics.getHeight(), new OrthographicCamera());
        stage = new Stage(viewport, sb);

        inventoryController = new InventoryController();
        inventory = inventoryController.getInventoryList();
       // itemImages = inventoryController.getImageList();
    }


    //THIS IS WHERE THE IMAGE IS ADDED

    private void formatting() {
        stage = new Stage();
        Label inventoryLabel = new Label("Inventory", skin);
        final Label imageLabel = new Label("Item", skin);

        table.setDebug(true);
        table.defaults();
        table.center();
        table.setFillParent(true);
        table.add(inventoryLabel);
        table.add(imageLabel);
        table.row();

        table.add(inventory); //need a way to get the current item selected
        inventory.addListener(new ClickListener() {
            public void clicked(InputEvent event, float x, float y) {
                Item clickedItem = inventory.getSelected();
                Image clickedImage = clickedItem.getImage();
                table.add(clickedImage);
                System.out.println(clickedItem.getName());
                }
            });



     //   stage.addActor(itemImages);
        stage.addActor(table);
    }





    public void setInput() {
        oldInput = Gdx.input.getInputProcessor(); //Get the old input from the user.
        Gdx.input.setInputProcessor(stage);       //Set the input to now work on the inventory.
    }

    public void update() {
        if (Gdx.input.isKeyPressed(Input.Keys.I) && oldInput == null) {
            formatting();
            setInput();
        }

        if (Gdx.input.isKeyPressed(Input.Keys.O) && oldInput != null) {
            stage.dispose();
            Gdx.input.setInputProcessor(oldInput);
            oldInput = null;
        }
    }

    public void dispose() {
        stage.dispose();
    }

}

图像以格式method()-

The image is added in the formatting method()-

             inventory.addListener(new ClickListener() {
             public void clicked(InputEvent event, float x, float y) {
                Item clickedItem = inventory.getSelected();
                Image clickedImage = clickedItem.getImage();
                table.add(clickedImage);
                System.out.println(clickedItem.getName());
                }

推荐答案

我发现了问题，调查了LibGDX Wiki 表-添加单元格似乎您正在使用add()方法，该方法不会替换单元格中的前一个actor，而是仅在该行中添加另一个.相反，您应该将显示的图像与List

I found the problem, looking into the LibGDX Wiki Table - Adding Cells it seems you are using the add() method that does not replace the previous actor in the cell, it only adds another one in the row. Instead, you should save your displayed image apart from the List

public class PlayerInventory {

    [..........................]

    Item clickedItem; // This will save your clicked item
    Image clickedImage; // This will save your clicked image;

    [..........................]

    inventory.addListener(new ClickListener() {
         public void clicked(InputEvent event, float x, float y) {
                if (clickedItem == null && clickedImage == null) {
                    clickedItem = inventory.getSelected(); // This line changed
                    clickedImage = clickedItem.getImage(); // This line changed
                    table.add(clickedImage);
                } else {
                    clickedItem = inventory.getSelected(); // This line changed
                    clickedImage = clickedItem.getImage(); // This line changed
                }

                System.out.println(clickedItem.getName());
            }
}

如果以前没有图像，它将添加图像；如果以前没有图像，则将替换图像.希望这会有所帮助！

This will add the image if there was no image before and replace the image if there was one before. Hope this helps!

这篇关于更新表格中的图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！