JavaFx 11. ImageView 사용하기

직전 포스트인 로그인 프로젝트를 그대로 사용하여 만들었습니다. 그래서 대부분의 코딩은 똑같습니다. 단지 차이점은 Login.fxml 파일에 ImageView 가 추가된 부분 입니다.

ImageView를 사용하는 방법은,

scene builder 에서 ImageView 를 드래그&드롭으로 적당한 위치에 배치하고, 

properties -> specific -> image -> ... 을 눌려서 이미지를 선택하면 됩니다. 

아니면 저처럼 직접 입력하셔도 됩니다.

이미지를 소스폴더 안에 copy 해 놓고, 경로를 패키지명/파일명 으로 입력하면 됩니다.

ImageView 를 사용하는 또 다른 방법은 소스코드를 직접 코딩하는 것입니다.

<?xml version="1.0" encoding="UTF-8"?>
 
<?import javafx.scene.image.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.image.Image?>
 
<AnchorPane prefHeight="300.0" prefWidth="500.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.MainController">
   <children>
      <Button layoutX="23.0" layoutY="198.0" mnemonicParsing="false" onAction="#Login" text="Login">
         <font>
            <Font size="18.0" />
         </font>
         <graphic>
             <ImageView fitHeight="50.0" fitWidth="75.0"> 
                  <image>
                      <Image url="http://easyonlineconverter.com/img/logo1.png" />
                  </image>
                </ImageView>
            </graphic>
      </Button>
      <TextField fx:id="txtUserName" layoutX="23.0" layoutY="107.0" promptText="UserName">
         <font>
            <Font size="18.0" />
         </font>
      </TextField>
      <PasswordField fx:id="txtPassword" layoutX="23.0" layoutY="150.0" promptText="Password">
         <font>
            <Font size="18.0" />
         </font>
      </PasswordField>
      <Label fx:id="lblStatus" alignment="CENTER" layoutY="35.0" prefHeight="21.0" prefWidth="229.0" text="Status" textFill="#d31c1c">
         <font>
            <Font size="18.0" />
         </font>
      </Label>
      <ImageView fitHeight="238.0" fitWidth="229.0" layoutX="260.0" layoutY="32.0" pickOnBounds="true" preserveRatio="true">
          <image>
              <Image url="img/melon.jpg" />
          </image>
      </ImageView>
   </children>
</AnchorPane>
 

17 ~ 23번 라인, 40 ~ 44번 라인이 ImageView를 삽입하는 코드 입니다. 20번 라인을 보시면, 이미지를 인터넷에서 바로 가져와서 사용하는 방법도 있습니다.