[JavaFX] GridPane을 이용한 상대적 레이아웃 작성 방법(비율을 이용한 사이즈 조정)

GridPane을 이용한 상대적 레이아웃 작성

 이번 시간에는 JavaFX의 GridPane을 이용해서 비율로 레이아웃의 사이즈를 조정하는 방법에 대해서 알아보겠습니다.

 GridPane은 children 들을 행과 열에 맞추어 유연하게 배치하는 컨테이너 입니다. 

 그래서 children을 배치 할 때 행과 열의 index를 주는 방법으로 배치를 하게 됩니다. 

 

 그렇다면 만약 사이즈가 각각 다른 children을 배치 할때는 어떻게 해야 할까요? 

 그럴때는 바로 Gridpane의 행과 열을 resizing을 하면 됩니다. 방법은 아주 간단합니다.

<GridPane>
    <columnConstraints>
         <ColumnConstraints hgrow="SOMETIMES" percentWidth="55"></ColumnConstraints>
         <ColumnConstraints hgrow="SOMETIMES" percentWidth="45"></ColumnConstraints>
    </columnConstraints>
    <rowConstraints>
         <RowConstraints vgrow="SOMETIMES" percentheight="100"></RowConstraints>
    </rowConstraints>
</GridPane>
 
//columnConstraints 는 열, rowConstraints는 행을 조정합니다. 

  

  GridPane안에 columConstraints 와 rowConstraints를 조정해주면 됩니다. 

  columConstraints 태그 안에 2개의 ColumConstraints 가 2개가 들어가 있는데 이 의미는 

 

 "열에 2개의 children이 들어갈 것이고, 이 들은 각각 55%, 45% 의 width를 차지할 것이다."

  라는 것을 알수 있죠. 

 이렇게 조정만 해준다면 children들은 해당되는 index의 percentage 에 맞추어 사이즈를 조정하게 됩니다.