[JavaFX] FXML상에서 Button에 이미지 입히는 방법

Image Button

• JavaFX Button을 사용하는 경우 Button에 이미지를 넣어야 할 때가 있습니다. 
• JavaFX를 사용하여 Button에 이미지를 입히는 방법에 대해서 알아보겠습니다.

---

방법

• Button에 Image를 입히는 방법은 크게 두가지가 있습니다.
  • Controller 코드에서 이미지를 지정해주는 방법
  • FXML 상에서 이미지를 지정해주는 방법
• 사실상 대부분의 경우 버튼에 지정되는 Image는 수정될 일이 없기 때문에 FXML에서 지정해주는 방법이 더 적합합니다.

ImageButton.fxml

• Button의 <graphic> 속성에 ImageView를 추가하여 이미지를 추가해 줄수 있습니다.
  • 저는 따로 아이콘 파일을 받아서 사용을 했습니다. 

<fx:root style="-fx-background-color: white;" type="BorderPane" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" prefWidth="400" prefHeight="400">
  <center>
    <HBox alignment="CENTER">
      <Button>
        <graphic>
          <ImageView fitHeight="32.0" fitWidth="32.0" pickOnBounds="true" preserveRatio="true">
            <image>
              <Image url="@gmail.png" />
            </image>
          </ImageView>
        </graphic>
      </Button>
    </HBox>
  </center>
</fx:root>

ImageButtonController.java

public class ImageButtonController extends BorderPane {

  public ImageButtonController() {
    FxUiUtil.initializeFont();
    FxUiUtil.loadFxml(this);
  }
}

ImageButtonControllerTest.java

public class ImageButtonControllerTest extends Application {

  @Override
  public void start(Stage primaryStage) throws Exception {
    ImageButtonController imageController = new ImageButtonController();
    primaryStage.setScene(new Scene(imageController));
    primaryStage.setTitle("Image Button Test");
    primaryStage.show();
  } 

  @Test
  public void test() {
    launch();
  }
}

---

결과 화면

 

---

관련글

(JavaFX) FXML 상에서 Spinner 데이터 세팅 방법

(JavaFX) JavaFX ScrollBar 개념 및 사용법

(JavaFX) JavaFX Spinner 개념 및 사용법

(JavaFX) JavaFX ListView FXML상에서 데이터 초기화 방법

(JavaFX) FXML 상에서 Label Font 설정방법

(JavaFX) TableView 데이터 CSV 형태로 Export 하는 방법