(JavaFX) FXML에서 ImageView위에 Image 로드 하는 방법

들어가며

• 정적인 이미지인 경우 (한번 세팅되고 수정 될 일이 없는) FXML에서 바로 ImageView에 세팅을 하는 경우가 있습니다.
• 간단하게 세팅하는 방법을 알아보도록 하겠습니다.
• ImageView 사용법은 아래 포스트를 참고 하시면 됩니다.

(JavaFX) JavaFX ImageView 사용법 (이미지 전시 방법)

---

FXML Image 로드

• 방법은 아주 간단합니다. <ImageView> 태그 안에 <Image> 태그를 이용하여 Image 경로를 넣어주면 됩니다.
• 이때 url에는 앞에 @를 꼭 적어주어야 합니다. 

<ImageView fx:id="imageView" AnchorPane.bottomAnchor="20.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="20.0" fitWidth="800" fitHeight="800">
      //@ 필수
      <Image url="@Test.png" />
</ImageView>

---

테스트

Image.fxml

• ImageView만 존재하는 레이아웃 형태로 만들어보겠습니다.
  • 준비한 Image크기에 적절하게 맞춰 fit Size를 800으로 설정함
• fx:root 사용에 관한 자세한 내용은 아래 포스트를 참고 해주세요

(JavaFX) FXML 작성 시 "" 를 사용하는 이유

<fx:root style="-fx-background-color: #A2A5AC;" type="AnchorPane" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" stylesheets="@../fx.css" prefWidth="800">
  <ImageView fx:id="imageView" AnchorPane.bottomAnchor="20.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="20.0" fitWidth="800" fitHeight="800">
        <Image url="@Test.png" />
  </ImageView>
</fx:root>

---

ImageController.java

• 생성자를 통해서 imageFile 객체를 전달받는 방식입니다.
  • 주로 보통 애플리케이션 개발시에는 resource 폴더에 이미지를 넣고 사용함 (주석 부분 참고)

public class ImageController extends AnchorPane {
    public ImageController() {
        FxUtil.initializeFont();
        FxUtil.loadFxml(this);
    }
}

---

테스트

• Controller를 전시하는 테스트 코드를 추가해보겠습니다.

public class ImageControllerTest extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        ImageController imageController = new ImageController();
        primaryStage.setScene(new Scene(imageController));
        primaryStage.setTitle("Image Test");
        primaryStage.show();
    }

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

 

• 아래와 같이 전시되는 것을 확인합니다.

 

---

관련글

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

(JavaFX) JavaFX TableView 사용법 ver.2

[JavaFx] Tray Icon에 메뉴 추가 방법 (Tray Menu 사용법)

[JavaFX] 실시간 업데이트 되는 Timer(시계) 컨트롤 구현 방법

---

끝으로

이 글이 도움이 되었다면, 하단의 Google 광고 👎👎👎 한번씩 클릭 부탁 드립니다. 🙏🙏🙏

광고 클릭은 많은 힘이 됩니다!