7

FXML は初めてで、アプリケーションを構築しています。今、私は修正できない問題に直面しています。

FXML でコンボボックスを定義し、コントローラー クラスで必要な関連付けを作成しました。しかし、このコンボボックスに画像を追加したいです。

Googleで何時間も検索した後でも、まだこれを修正できません。

私の目標を達成する方法の「簡単な」例を教えてください。

どうもありがとう！

私の現在のコードは次のとおりです（これを行うためのより簡単な方法があることを確認してください、しかしそれはうまくいきます！）

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);
                }
            }
        };
    }
});
4

3 に答える 3

5

彼のコメントにリンクされているサンプル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);

上記は、これを行うための 1 つの方法にすぎません。ComboBoxまたは、セバスチャンが回答で指摘しているように、代わりに (そしておそらく望ましい) セル ファクトリを定義することもできます。

変更されたサンプルの出力:

アイコンコンボサンプル

于 2013-01-17T23:21:37.423 に答える
4

ボックス内のアイテムの視覚化を維持するには、ComboBoxのCellFactoryをカスタマイズする必要があります。短い例については、このリンクを参照してください。

コントロールエリアに画像を表示するには（1つの項目を選択した後）、コンボボックスのボタンセルをセルの1つに設定する必要があります。JavaFXはそれに応じてそれらを自動的に更新します。基本的にあなたがしなければならないことはあなたがあなたのカスタムcellfactoryでコンボボックスをセットアップするときです：

mycombobox.setButtonCell(myCellFactory.call(null));

これに関するドキュメントもご覧ください。

于 2013-01-15T08:47:44.767 に答える
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);
于 2014-11-13T09:21:28.640 に答える