JavaFX 在列表视图中显示字符串附近的图像 [英] JavaFX show image near string in listview

问题描述

I want to show a message near a string in a listview i tried to look it up but i cant understand it pretty much i tried this from the website http://docs.oracle.com/javafx/2/ui_controls/list-view.htm at Example 11-4 Creating a Cell Factory i tried to convert it to imageview and it did work but a problem is i dont see a string, the image is not near the string and image is too big there should be a way to resize it soo can someone help me with showing a image near a string in listview? this is the code that i tried to convert:

Piece 1

static class ColorRectCell extends ListCell<String> {
        Image fileimg = new Image(getClass().getResourceAsStream("file.png"));
        @Override
        public void updateItem(String item, boolean empty) {
            super.updateItem(item, empty);
            ImageView rect = new ImageView();
            if (item != null) {
                rect.setImage(fileimg);
                setGraphic(rect);
            }
        }
    }

Piece 2

FileExplorerFormSlaveFileListView.setCellFactory(new Callback<ListView<String>, 
                ListCell<String>>() {

                    public ListCell<String> call(ListView<String> list) {
                        return new ColorRectCell();
                    }
                }
            );

I hope someone can help me its very important to me. Thanks. If you cant understand what i am asking tell me and i will try to format the question i am bad at explaining problems.

解决方案

Cells are Labeled nodes which can innately display both text and graphics, where the text is a label for an arbitrary graphic node. So, in your cell, maintain a rendering for the graphic (an ImageView), and set both the graphic and text as appropriate in the updateItem implementation.

private ImageView imageView = new ImageView();

@Override
protected void updateItem(String item, boolean empty) {
    super.updateItem(item, empty);

    if (empty || item == null) {
        imageView.setImage(null);

        setGraphic(null);
        setText(null);
    } else {
        imageView.setImage(
                imageCollection.get(
                        item
                )
        );

        setText(constructLabel(SHORT_PREFIX, item, SUFFIX));
        setGraphic(imageView);
    }
}

Sample Application

Here, all of the possible images are pre-loaded and stored in a cache, which will work OK if you have a small number of images. If you have a large number of images, you would probably want a more sophisticated LRU style cache for the images where newer images are loaded on demand in the background, possibly with a placeholder or progress indicator for the image while the background loading process is running.

In the sample application, the images are resized in the Image constructor so they are all the same height. Also, the implementation is suited to a file type icon display because only a single image for any given file type will ever be created and that same image may be reused via different ImageViews used in different cells.

import javafx.application.Application;
import javafx.collections.*;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.image.*;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

import java.util.Map;
import java.util.stream.Collectors;

public class LabeledList extends Application {

    private static final double IMAGE_HEIGHT = 36;

    private static final String SHORT_PREFIX =
            "bird";

    private static final String LONG_PREFIX =
            "http://icons.iconarchive.com/icons/jozef89/origami-birds/72/" + SHORT_PREFIX;

    private static final String SUFFIX =
            "-icon.png";

    private static final ObservableList<String> birds = FXCollections.unmodifiableObservableList(
            FXCollections.observableArrayList(
                "-black",
                "-blue",
                "-red",
                "-red-2",
                "-yellow",
                "s-green",
                "s-green-2"
            )
    );

    private Map<String, Image> imageCollection;

    @Override
    public void start(Stage stage) throws Exception {
        imageCollection = birds.stream().collect(
                Collectors.toMap(
                        bird -> bird,
                        bird -> new Image(
                                        constructLabel(LONG_PREFIX, bird, SUFFIX),
                                        0,
                                        IMAGE_HEIGHT,
                                        true,
                                        true
                                )
                )
        );

        ListView<String> birdList = new ListView<>(birds);
        birdList.setCellFactory(param -> new BirdCell());
        birdList.setPrefWidth(230);
        birdList.setPrefHeight(200);

        VBox layout = new VBox(birdList);
        layout.setPadding(new Insets(10));

        stage.setScene(new Scene(layout));
        stage.show();
    }

    public static void main(String[] args) {
        launch(LabeledList.class);
    }

    private class BirdCell extends ListCell<String> {
        private ImageView imageView = new ImageView();

        @Override
        protected void updateItem(String item, boolean empty) {
            super.updateItem(item, empty);

            if (empty || item == null) {
                imageView.setImage(null);

                setGraphic(null);
                setText(null);
            } else {
                imageView.setImage(
                        imageCollection.get(
                                item
                        )
                );

                setText(constructLabel(SHORT_PREFIX, item, SUFFIX));
                setGraphic(imageView);
            }
        }
    }

    private String constructLabel(String prefix, String bird, String suffix) {
        return (prefix != null ? prefix : "")
                + bird
                + (suffix != null ? suffix : "");
    }

    // Iconset Homepage: http://jozef89.deviantart.com/art/Origami-Birds-400642253
    // License: CC Attribution-Noncommercial-No Derivate 3.0
    // Commercial usage: Not allowed    

}

这篇关于JavaFX 在列表视图中显示字符串附近的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！