列中包含ImageView数组的JavaFX TableView

时间:2018-05-29 11:13:12

标签: java javafx

JavaFX TableView未在TableColumn中显示图像列表。有人可以帮我在TableColumn中显示多个图像,用于tableview中的特定条目。这是代码:

Controller类具有以下代码:

@Override
public void initialize(URL arg0, ResourceBundle arg1) {
    RecordInfo recordInfo;
    Image ii;
    ObservableList<RecordInfo>list=FXCollections.observableArrayList();
    for(int i=1;i<10;i++){
        recordInfo=new RecordInfo();

        String p=i+".jpg";

        ii=new Image(p);
        ImageView[] img=new ImageView[3];

        img[0]=new ImageView();
        img[0].setImage(ii);
        img[0].setFitHeight(120);
        img[0].setFitWidth(240);    

        recordInfo.setPic(img);

        pic.setCellValueFactory(new PropertyValueFactory<RecordInfo, ImageView[]>("pic"));          
        list.add(recordInfo);
    }
}

Record类有:

public class RecordInfo {
   private ImageView[] pic;
   public ImageView[] getPic() {
     return pic;
   }
   public void setPic(ImageView[] pic) {
     this.pic = pic;
   }    

   }

2 个答案:

答案 0 :(得分:1)

您需要自定义cellFactory。此外,我建议在Image[]中使用RecordInfo数组:

public class RecordInfo {

    private Image[] pic;

    public Image[] getPic() {
        return pic;
    }

    public void setPic(Image[] pic) {
        this.pic = pic;
    }

}
public class ImagesTableCell<T> extends TableCell<T, Image[]> {

    private final List<ImageView> imageViews;
    private final HBox container;

    private ImagesTableCell(List<ImageView> imageViews) {
        this.container = new HBox();
        this.imageViews = imageViews;
    }

    private ImageView getOrCreateImageView() {
        if (!imageViews.isEmpty()) {
            return imageViews.remove(imageViews.size() - 1);
        } else {
            ImageView iv = new ImageView();
            iv.setFitHeight(20);
            iv.setFitWidth(20);
            return iv;
        }
    }

    @Override
    protected void updateItem(Image[] item, boolean empty) {
        super.updateItem(item, empty);

        ObservableList<Node> children = container.getChildren();
        int newLength = (empty || item == null) ? 0 : item.length;

        if (newLength < children.size()) {
            // remove ImageViews that are not required
            for (int i = newLength; i < children.size(); i++) {
                ImageView iv = (ImageView) children.get(i);
                imageViews.add(iv); // allow reuse of imageviews
                iv.setImage(null); // don't prevent garbagecollection of image
            }
            children.remove(newLength, children.size());
        }

        // add missing imageviews
        for (int i = children.size(); i < newLength; i++) {
            children.add(getOrCreateImageView());
        }

        // fill imageviews
        for (int i = 0; i < newLength; i++) {
            ((ImageView) children.get(i)).setImage(item[i]);
        }

        setGraphic(newLength == 0 ? null : container);
    }

    public static <E> Callback<TableColumn<E, Image[]>, TableCell<E, Image[]>> forTableColumn() {
        List<ImageView> views = new ArrayList<>();
        return c -> new ImagesTableCell<>(views);
    }

}
pic.setCellFactory(ImagesTableCell.forTableColumn());

答案 1 :(得分:0)

@fabian的答案不是我要找的100%,但我能够使用HBox提出解决方案。

我想在一个表格单元中并排显示3张图片。

编码我的视图:

@FXML
private TableColumn<ImageWrapper, HBox> tableColumnVereinzelung;    

tableColumnImages.setCellValueFactory(cdf -> {
    return new ReadOnlyObjectWrapper<HBox>(cdf.getValue()
            .getImagesForTableCell());

});

“ ImageWrapper”中的方法“ getImagesForTableCell”:

public HBox getImagesForTableCell() {
    HBox container = new HBox();
    ObservableList<Node> children = container.getChildren();

    for (int i = 1; i <= myImages.size(); i++) {
        children.add(new ImageView(this.myImages.get(i)));
    }
    return container;
}