我是FXML的新手,我正在构建一个应用程序。 现在我遇到了一个我无法解决的问题。
我在FXML中定义了一个组合框,并在控制器类中创建了necesarry关联。 但我想在这个组合框中添加图像。
仍在谷歌上搜索数小时后,我仍然无法解决这个问题。
你们能帮助我一个关于如何实现目标的“简单”例子吗?
非常感谢!
我目前的代码是:(确定有一种更简单的方法可以做到这一点,但它有效!)
ImageView img1 = new ImageView("Layout/nl.png");
ImageView img2 = new ImageView("Layout/en.png");
AnimalBoxLanguage.getItems().addAll(img1, img2);
AnimalBoxLanguage.setCellFactory(new Callback<ListView<ImageView>, ListCell<ImageView>>() {
@Override public ListCell<ImageView> call(ListView<ImageView> p) {
return new ListCell<ImageView>() {
private final ImageView rectangle;
{
setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
rectangle = new ImageView();
}
@Override protected void updateItem(ImageView item, boolean empty) {
super.updateItem(item, empty);
if (item == null || empty) {
setGraphic(null);
} else {
rectangle.setImage(item.getImage());
setGraphic(rectangle);
}
}
};
}
});
答案 0 :(得分:5)
将sample erhun链接在他的评论中作为起点,在fxml中定义ComboBox如下所示,以便组合框项目包括带图形的标签(这些是你的“图标”)。
<ComboBox fx:id="fruitCombo" layoutX="15.0" layoutY="33.0" prefWidth="90.0" promptText="choose">
<items>
<FXCollections fx:factory="observableArrayList">
<Label text="Apple">
<graphic>
<StackPane prefWidth="50">
<ImageView fitHeight="32" preserveRatio="true">
<image>
<Image url="http://uhallnyu.files.wordpress.com/2011/11/green-apple.jpg" preserveRatio="false" smooth="false" />
</image>
</ImageView>
</StackPane>
</graphic>
</Label>
<Label text="Pear">
<graphic>
<StackPane prefWidth="50">
<ImageView fitHeight="32" preserveRatio="true">
<image>
<Image url="http://smoothiejuicerecipes.com/pear.jpg" preserveRatio="false" smooth="false" />
</image>
</ImageView>
</StackPane>
</graphic>
</Label>
<Label text="Orange">
<graphic>
<StackPane prefWidth="50">
<ImageView fitHeight="32" preserveRatio="true">
<image>
<Image url="http://i.i.com.com/cnwk.1d/i/tim/2011/03/10/orange_iStock_000001331357X_540x405.jpg" preserveRatio="false" smooth="false" />
</image>
</ImageView>
</StackPane>
</graphic>
</Label>
</FXCollections>
</items>
</ComboBox>
在FruitComboController的初始化方法中,为按钮设置一个自定义单元格(下面的简单单元格只会显示选中项目的文本,但如果您愿意,也可以包含图形):
ListCell<Label> buttonCell = new ListCell<Label>() {
@Override protected void updateItem(Label item, boolean isEmpty) {
super.updateItem(item, isEmpty);
setText(item == null ? "" : item.getText());
}
};
fruitCombo.setButtonCell(buttonCell);
以上只是一种方法。或者(也许最好)你可以为你的ComboBox
定义一个细胞工厂,正如塞巴斯蒂安在他的回答中指出的那样。
修改样本的输出:
答案 1 :(得分:4)
您需要自定义ComboBox的CellFactory以维护框中项目的可视化。有关简短示例,请参阅this link。
要使图像在控制区域中可见(选择一个项目后),必须将组合框的按钮单元格设置为其中一个单元格。 JavaFX将相应地自动更新它们。基本上你要做的就是当你使用自定义cellfactory设置组合框时:
mycombobox.setButtonCell(myCellFactory.call(null));
另请查看有关此问题的documentation。
答案 2 :(得分:-1)
ObservableList options = FXCollections.observableArrayList();
//
Image img = new Image("/images/auto32.png");
ImageView imgView = new ImageView();
imgView.setImage(img);
//
Label lbl = new Label("test");
lbl.setGraphic(imgView);
//
options.add(lbl);
options.add(lbl);
options.add(lbl);
//
myCombo.setItems(options);