04. JavaFX 컨테이너
컨테이너는 컨트롤들을 쉽게 배치하고 관리할 수 있도록 도와주는 클래스입니다. javafx.scene.layout 패키지는 다양한 레이아웃 컨테이너를 제공합니다.
| 컨테이너 | 설명 |
|---|---|
AnchorPane |
좌표를 이용하여 컨트롤을 배치합니다. |
BorderPane |
상, 하, 좌, 우, 중앙 5개 영역에 컨트롤을 배치합니다. |
FlowPane |
행으로 배치하되 공간이 부족하면 새로운 행에 배치합니다. |
GridPane |
그리드(격자)로 배치하되 셀의 크기가 유동적입니다. |
StackPane |
컨트롤을 겹쳐서 배치합니다. |
TilePane |
그리드로 배치하되 셀의 크기가 고정적입니다. |
HBox |
컨트롤을 수평으로 배치합니다. |
VBox |
컨트롤을 수직으로 배치합니다. |
1. AnchorPane
좌표(x, y)를 이용하여 컨트롤을 배치합니다.
- 주요 속성:
layoutX,layoutY,prefWidth,prefHeight - 특징: 윈도우 크기 변경 시 컨트롤 위치가 고정되므로,
setResizable(false)와 함께 사용하는 것이 일반적입니다.
예제 (root.fxml)
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.*?>
<AnchorPane xmlns:fx="http://javafx.com/fxml"
prefHeight="150.0" prefWidth="300.0">
<children>
<Label layoutX="42.0" layoutY="28.0" text="아이디" />
<Label layoutX="42.0" layoutY="66.0" text="패스워드" />
<TextField layoutX="120.0" layoutY="24.0" />
<PasswordField layoutX="120.0" layoutY="62.0" />
<Button layoutX="97.0" layoutY="106.0" text="로그인" />
<Button layoutX="164.0" layoutY="106.0" text="취소" />
</children>
</AnchorPane>
2. HBox와 VBox
수평(HBox) 또는 수직(VBox)으로 컨트롤을 단순 배치합니다.
주요 속성
| 속성 | 설명 |
| :————————- | :————————————– |
| prefWidth / prefHeight | 폭 / 높이 설정 |
| alignment | 컨트롤 정렬 (예: CENTER, TOP_LEFT) |
| spacing | 컨트롤 간의 간격 |
| fillWidth (VBox) | true일 경우 컨트롤이 폭을 가득 채움 |
| fillHeight (HBox) | true일 경우 컨트롤이 높이를 가득 채움 |
확장 속성 (Priority)
컨테이너의 남은 공간을 특정 컨트롤이 채우도록 설정할 수 있습니다.
HBox.hgrow:Priority.ALWAYSVBox.vgrow:Priority.ALWAYS
예제
<HBox alignment="CENTER" spacing="20.0">
<children>
<Button text="이전" />
<!-- 남은 공간을 모두 차지하는 버튼 -->
<Button text="다음">
<HBox.hgrow><Priority fx:constant="ALWAYS"/></HBox.hgrow>
<maxWidth><Double fx:constant="MAX_VALUE"/></maxWidth>
</Button>
</children>
</HBox>
3. BorderPane
화면을 Top, Bottom, Left, Right, Center 5개 영역으로 분할하여 배치합니다.
graph TD
Top[Top]
Left[Left]
Center[Center]
Right[Right]
Bottom[Bottom]
Top --- Center
Bottom --- Center
Left --- Center
Right --- Center
- Top/Bottom: 높이는 컨텐츠에 맞추고, 폭은 가득 채웁니다.
- Left/Right: 폭은 컨텐츠에 맞추고, 높이는 가득 채웁니다.
- Center: 남은 영역을 모두 차지합니다.
예제 (root.fxml)
<BorderPane prefHeight="200.0" prefWidth="300.0">
<top>
<ToolBar>
<items>
<Button text="File" />
</items>
</ToolBar>
</top>
<center>
<TextArea/>
</center>
<bottom>
<BorderPane>
<center><TextField/></center>
<right><Button text="Send"/></right>
</BorderPane>
</bottom>
</BorderPane>
4. FlowPane
컨트롤을 나열하다가 공간이 부족하면 자동으로 다음 줄(행)로 넘어가는 컨테이너입니다.
- hgap: 수평 간격
- vgap: 수직 간격
<FlowPane hgap="10.0" vgap="10.0" prefWidth="300.0">
<children>
<Button text="Button1" />
<Button text="Button2" />
<!-- ... -->
</children>
</FlowPane>
5. TilePane
그리드 형태지만 모든 셀(타일)의 크기가 동일한 컨테이너입니다.
- prefTileWidth: 타일 폭
- prefTileHeight: 타일 높이
<TilePane prefTileHeight="100" prefTileWidth="100">
<children>
<ImageView><image><Image url="@img/1.jpg"/></image></ImageView>
<ImageView><image><Image url="@img/2.jpg"/></image></ImageView>
</children>
</TilePane>
6. GridPane
HTML의 Table과 유사하게 행(Row)과 열(Column)로 레이아웃을 구성합니다. 셀 병합이 가낭하여 유연한 폼(Form) 제작에 적합합니다.
주요 속성
- RowConstraints: 행의 높이 제어.
- ColumnConstraints: 열의 폭 제어.
- GridPane.columnIndex / rowIndex: 컨트롤이 위치할 셀 좌표.
- GridPane.columnSpan / rowSpan: 셀 병합.
예제
<GridPane hgap="10" vgap="10">
<columnConstraints>
<ColumnConstraints prefWidth="100" />
<ColumnConstraints prefWidth="200" />
</columnConstraints>
<children>
<Label text="아이디" GridPane.rowIndex="0" GridPane.columnIndex="0" />
<TextField GridPane.rowIndex="0" GridPane.columnIndex="1" />
<Label text="비밀번호" GridPane.rowIndex="1" GridPane.columnIndex="0" />
<PasswordField GridPane.rowIndex="1" GridPane.columnIndex="1" />
<HBox GridPane.rowIndex="2" GridPane.columnIndex="0" GridPane.columnSpan="2"
alignment="CENTER" spacing="10">
<children>
<Button text="로그인" />
<Button text="취소" />
</children>
</HBox>
</children>
</GridPane>
7. StackPane
카드를 쌓듯이 컨트롤을 겹쳐서 배치합니다. 가장 나중에 추가된 컨트롤이 가장 위에 표시됩니다. 배경 이미지 위에 텍스트나 버튼을 올릴 때 유용합니다.
<StackPane>
<children>
<ImageView>
<image><Image url="@bg.jpg"/></image>
</ImageView>
<Label text="Overlaid Text" textFill="WHITE"/>
</children>
</StackPane>
수 있다.
다음은 GridPane에 적용 가능한 속성들이다.
태그 및 속성
prefWidth
prefHeight
hgap
vgap
설명
폭을 설정
높이를 설정
수평 컨트롤 간격을 설정
수직 컨트롤 간격을 설정
서브목차