如何将图像添加到ListView [英] How to add images to a ListView

问题描述

最近8个小时我一直在阅读文档，但没有发现任何可以帮助我的东西.大概是，但是没有代码在工作，因为它一直说找不到图像URL"并抛出异常.但是我还有其他项目，从来没有这个问题.

I've been reading documents for the last 8 hours and found nothing that could help me. Vaguely yes, but no code is working becuase it keeps saying "image url not found" and throws the exception. However I have other projects and never had this issue.

因此，有一个类包含这样的月份:

So, there's one class that contains months like so:

public enum Month{JAN(1, "img.png",...DEC(12, "img.png");
private final int monthValue;
private final String imgName;

private Month(int monthValue, String imgName){
this.monthValue = monthValue;
this.imgName = imgName;
}

public int getMonth(){
return monthValue;
}

public String getImage(){
return imgName;} 
}

到目前为止，太好了.我什至可以在控制台中对其进行测试，并且效果很好，并且还可以按值排序.现在，当我尝试从资源添加图像时，出现了我之前提到的问题:找不到URL.但是，我只能使用图像的1个值来做一个ImageView，使用的路径来自"C:\ ... \ resources \ monthImg.png"，但是我与其他人一起工作，每次我将其在线发送时，他都必须更改图像目录.需要很多时间.

So far, so good. I can even test it in console and works fine and also sorts by value. Now when I try to add images from resources there's the problem I mentioned before: the url is not found. However, I can do a ImageView with only 1 value of the image, using the path goes from "C:\...\resources\monthImg.png" but I work with other person and eachtime I send it online he must change the image directory as well. Takes much time.

现在，我一直在尝试获取12张图像并将它们设置为主项目类中的该枚举.这样我就可以分配给节点并工作GUI.

Now, what I've been trying to do is to get 12 images and set them to this enum in the main project class. So I can then assign to nodes and work GUI.

我的方法是遵循此线程: JavaFx:如何将ImageView放入其中ListView 但是，它使用 setCellFactory ，我很确定您可以在没有该方法和更少代码行的情况下执行此操作.

My approach was to follow this thread: JavaFx : How to put ImageView inside ListView However, it uses setCellFactory which I am pretty sure you can do this without that method and less code lines.

我在另一个文件夹(包含所有图像)中有两个名为"main"的包(包含主类和month类及其构造函数和方法)，还有一个资源包也称为"main". 请记住，如果我使用C:\的完整完整路径，它会起作用，但我也想在项目本身中启动它，然后将其发送给我的朋友.

I have two packages called "main" (which contains the main class and the month class with its constructors and methods) and a resources package also called "main" in a different folder (which contains all images). Remember that it works if I use the whole full path from C:\ but I'd also like to have it started in the project itself to send it to my friend.

方法是什么样的，所以我可以像上面链接中的示例那样，在VBox内的子孙值中使这些具有值堆栈的图像相互重叠?

What would be the approach look like so I can get these images with value stack with each other in descendant values inside a VBox like the example in the link above?

注意:该项目是要使这些图像看起来像是一个日历，上面带有拖放选项(我知道这样做).谢谢.

Note: The project is to make those images look like a calendar stacked up with drag and drop options (which I know to do). Thanks.

推荐答案

尝试逐步解决一些小问题.
您可以从使列表视图显示所需图像开始.使用热链接图像 使代码更像是 mre ，并使帮助和测试变得简单而有效:

Try to solve the issues in smaller pieces, a step by step approach.
You can start by getting the list view display the images you want. Using hot linked images makes the code more of an mre and makes helping and testing easy and efficient:

import java.util.stream.Stream;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Orientation;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.TilePane;
import javafx.stage.Stage;

public class FxMain extends Application {

    @Override
    public void start(Stage primaryStage) {

        MonthListCell[] listCell = Stream.of(Month.values()).map(MonthListCell::new).toArray(MonthListCell[]::new);
        ObservableList<MonthListCell> items =FXCollections.observableArrayList (listCell);
        ListView<MonthListCell> listView = new ListView<>(items);
        primaryStage.setScene(new Scene(listView));
        primaryStage.sizeToScene();
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(null);
    }
}

enum Month{

    JAN(1,"https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/64x64/Circle_Green.png"),
    FEB(2,"https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/64x64/Circle_Red.png"),
    MAR(3,"https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/64x64/Circle_Yellow.png"),
    APR(4,"https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/64x64/Circle_Blue.png"),
    MAY(5,"https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/64x64/Circle_Orange.png"),
    JUN(6,"https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/64x64/Circle_Grey.png");

    private final int monthValue;
    private final String imgName;

    private Month(int monthValue, String imgName){
        this.monthValue = monthValue;
        this.imgName = imgName;
    }

    public int getMonth(){
        return monthValue;
    }

    public String getImage(){
        return imgName;
    }
}

class MonthListCell extends ListCell<Month> {

    private final ImageView imageView;
    private final Label text; 

    MonthListCell(Month month) {
        Image image = new Image(month.getImage());
        imageView = new ImageView(image);
         //use label for text instead of setText() for better layout control 
        text = new Label(month.name());
        TilePane node = new TilePane(Orientation.VERTICAL, 5, 0, imageView, text);
        setGraphic(node);
    }

    @Override
    public void updateItem(Month month, boolean empty) {
        super.updateItem(month, empty);
        if (empty) {
            setText(null);
            setGraphic(null);
        } else {
            imageView.setImage(new Image(month.getImage()));
            text.setText(month.name());
        }
    }
}

接下来，请尝试使用本地资源(图像)而不是链接的资源.

Next try to use local resources (images) instead of the linked resources.

这篇关于如何将图像添加到ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！