[java] JavaFX 반응형 디자인 적용하기

15 Nov 2023

java

JavaFX는 Java 기반의 사용자 인터페이스(UI) 프레임워크로, 다양한 플랫폼에서 동작하는 애플리케이션을 개발하는 데 사용됩니다. JavaFX를 사용하여 반응형 디자인을 적용하는 방법을 알아보겠습니다.

1. Scene 과 Pane

JavaFX에서 UI 요소를 배치하기 위해 Scene과 Pane을 사용합니다. Scene은 UI 요소들을 담고 있는 컨테이너이고, Pane은 Scene에 배치된 UI 요소의 위치와 크기를 관리합니다. Pane은 다양한 종류가 있지만, 이 예시에서는 VBox를 사용하도록 하겠습니다.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class MainApp extends Application {

    @Override
    public void start(Stage primaryStage) {
        VBox root = new VBox(); // VBox를 사용하여 UI 요소를 배치합니다.

        // UI 요소를 생성하고 VBox에 추가하는 코드

        Scene scene = new Scene(root, 800, 600); // Scene을 생성하고 VBox를 등록합니다.
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

2. 컨트롤의 위치와 크기 설정하기

반응형 디자인은 UI 요소들이 화면 크기에 따라 자동으로 조정되는 것을 의미합니다. JavaFX에서는 컨트롤의 위치와 크기를 상대적인 값으로 설정할 수 있습니다. 예를 들어, VBox에서 컨트롤의 위치를 설정하는 방법은 다음과 같습니다.

VBox root = new VBox();

Button button = new Button("Click me!");
VBox.setMargin(button, new Insets(10, 10, 10, 10)); // 컨트롤의 여백을 설정합니다.
VBox.setAlignment(button, Pos.CENTER); // 컨트롤의 정렬 방식을 설정합니다.

root.getChildren().add(button);

3. 화면 크기의 변화에 대응하기

JavaFX에서는 화면 크기의 변화에 대응하기 위해 widthProperty()와 heightProperty() 메소드를 이용할 수 있습니다. 이 메소드를 사용하면 화면 크기가 변경될 때마다 호출되는 이벤트를 받아올 수 있습니다. 이벤트를 처리하여 UI 요소들의 크기와 위치를 조정할 수 있습니다.

scene.widthProperty().addListener((observable, oldValue, newValue) -> {
    // 화면 너비가 변경되었을 때 호출되는 이벤트 처리 코드
});

scene.heightProperty().addListener((observable, oldValue, newValue) -> {
    // 화면 높이가 변경되었을 때 호출되는 이벤트 처리 코드
});

4. 미디어 쿼리 사용하기

JavaFX에서는 CSS의 미디어 쿼리를 이용하여 반응형 디자인을 구현할 수 있습니다. 미디어 쿼리는 화면 크기에 따라 서로 다른 스타일을 적용하는 것으로, JavaFX에서도 사용할 수 있습니다.

scene.getStylesheets().add("style.css");

@media (min-width: 600px) {
    .button {
        -fx-font-size: 20px;
    }
}

@media (max-width: 600px) {
    .button {
        -fx-font-size: 14px;
    }
}

위의 CSS 코드에서는 화면 너비가 600px 이상일 때와 600px 이하일 때의 버튼의 폰트 크기를 조정하는 예시입니다.

JavaFX를 사용하여 반응형 디자인을 구현하는 방법을 알아보았습니다. 화면 크기의 변화에 따라 UI 요소들이 동적으로 조정되어 사용자에게 보다 적합한 UI를 제공할 수 있게 됩니다. 자세한 내용은 JavaFX 공식 문서를 참조하시기 바랍니다.