[英]JavaFx : How to put ImageView inside ListView
I've been searching some threads about JavaFx ListView still it's hard to look for a simple yet easy solution for putting a JavaFx ImageView inside JavaFx ListView. 我一直在搜索关于JavaFx ListView的一些线程,但仍然很难找到一个简单而简单的解决方案,用于将JavaFx ImageView放入JavaFx ListView中。 I am trying to create a chat application using JavaFx framework.
我正在尝试使用JavaFx框架创建一个聊天应用程序。 at the photo it should look like that.This is not duplicate because the other thread is vague for a beginner like me.
它应该看起来像那样。这不是重复的,因为另一个线程对于像我这样的初学者来说是模糊的。 ListView with imageview inside
带有imageview的ListView
I tried something like this. 我试过这样的事。 I'm totally noob to this thanks in advance!
我提前感谢你们!
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class Main extends Application {
ImageView imageView = new ImageView();
Image image = new Image(Main.class.getResourceAsStream("bell.jpg"));
ListView<String> list = new ListView<String>();
ObservableList<String> data = FXCollections.observableArrayList(
"chocolate", "salmon", "gold", "coral", "darkorchid",
"darkgoldenrod", "lightsalmon", "black", "rosybrown", "blue",
"blueviolet", "brown");
Image pic;
@Override
public void start(Stage stage) {
VBox box = new VBox();
Scene scene = new Scene(box, 200, 200);
stage.setScene(scene);
stage.setTitle("ListViewSample");
box.getChildren().addAll(list);
VBox.setVgrow(list, Priority.ALWAYS);
list.setItems(data);
list.setCellFactory(listView -> new ListCell<String>() {
public void updateItem(String friend, boolean empty) {
super.updateItem(friend, empty);
if (empty) {
setText(null);
setGraphic(null);
} else {
imageView.setImage(image);
setText(friend);
setGraphic(imageView);
}
}
});
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}`
You do not need to create a new HBox every time you want to set an image inside a ListView. 每次要在ListView中设置图像时,都不需要创建新的HBox。 You can directly use the
setCellFactory()
of the ListView to achieve the same result. 您可以直接使用ListView的
setCellFactory()
来实现相同的结果。
This example is just an extension of the answer Image in JavaFX ListView and contains a Minimal, Complete, and Verifiable example which can be tried and tested. 此示例只是JavaFX ListView中答案Image的扩展,包含一个可以尝试和测试的Minimal,Complete和Verifiable示例 。 If you want to understand how this works, I suggest you to go through the linked question first.
如果你想了解它是如何工作的,我建议你首先查看链接的问题。
Update - How to resize Images 更新 - 如何调整图像大小
To resize images to fit the size you want, make use of fitWidth() and fitHeight() methods of the ImageView. 要调整图像大小以适合您想要的大小,请使用ImageView的fitWidth()和fitHeight()方法。 There are other methods like setSmooth() and setPreserveRatio() which can come in handy as well.
还有其他方法,如setSmooth()和setPreserveRatio() ,它们也可以派上用场。
MCVE MCVE
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class ListViewWithImages extends Application {
private final Image IMAGE_RUBY = new Image("https://upload.wikimedia.org/wikipedia/commons/f/f1/Ruby_logo_64x64.png");
private final Image IMAGE_APPLE = new Image("http://findicons.com/files/icons/832/social_and_web/64/apple.png");
private final Image IMAGE_VISTA = new Image("http://antaki.ca/bloom/img/windows_64x64.png");
private final Image IMAGE_TWITTER = new Image("http://files.softicons.com/download/social-media-icons/fresh-social-media-icons-by-creative-nerds/png/64x64/twitter-bird.png");
private Image[] listOfImages = {IMAGE_RUBY, IMAGE_APPLE, IMAGE_VISTA, IMAGE_TWITTER};
@Override
public void start(Stage primaryStage) throws Exception {
ListView<String> listView = new ListView<String>();
ObservableList<String> items =FXCollections.observableArrayList (
"RUBY", "APPLE", "VISTA", "TWITTER");
listView.setItems(items);
listView.setCellFactory(param -> new ListCell<String>() {
private ImageView imageView = new ImageView();
@Override
public void updateItem(String name, boolean empty) {
super.updateItem(name, empty);
if (empty) {
setText(null);
setGraphic(null);
} else {
if(name.equals("RUBY"))
imageView.setImage(listOfImages[0]);
else if(name.equals("APPLE"))
imageView.setImage(listOfImages[1]);
else if(name.equals("VISTA"))
imageView.setImage(listOfImages[2]);
else if(name.equals("TWITTER"))
imageView.setImage(listOfImages[3]);
setText(name);
setGraphic(imageView);
}
}
});
VBox box = new VBox(listView);
box.setAlignment(Pos.CENTER);
Scene scene = new Scene(box, 200, 200);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
OUTPUT OUTPUT
In addition to my comment I will show here some code, that is working for me: 除了我的评论,我将在这里展示一些代码,这对我有用:
private void setListEntry(ListCell<Label> listCell, Label label) {
Image img = loadLableIcon(label);
GridPane row = new GridPane();
row.setHgap(15);
row.setVgap(15);
ColumnConstraints col1 = new ColumnConstraints();
col1.setPercentWidth(90);
ColumnConstraints col2 = new ColumnConstraints();
col2.setPercentWidth(10);
ImageView icon = new ImageView(img);
javafx.scene.control.Label name = new javafx.scene.control.Label(label.getName());
name.setMinWidth(120d);
javafx.scene.control.Label amount = new javafx.scene.control.Label("" + label.getSize());
HBox iconAndName = new HBox(10);
iconAndName.setAlignment(Pos.CENTER_LEFT);
iconAndName.getChildren().addAll(icon, name);
row.add(iconAndName, 0, 0);
row.add(amount, 1, 0);
row.getColumnConstraints().addAll(col1, col2);
listCell.setGraphic(row);
}
Please note: I'm not an expert in JavaFX, so I am not sure if it's best practise or not. 请注意:我不是JavaFX的专家,因此我不确定它是否是最佳实践。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.