HTML 의 테이블처럼 컴포넌트를 셀의 행과 열로 배열하기 위해 Grid 레이아웃 컨테이너를 사용할 수 있다. 아래의 예제는 9개의 셀이 3x3 모양으로 배열된 Grid 컨테이너를 보여준다. :
Grid 컨테이너의 각 셀은 한 개 이하의 컨테이너/컴포넌트를 가질 수 있다. 하나의 셀에 두 개 이상의 컴포넌트를 포함시키려면, 컨테이너를 셀에 넣고 그 컨테이너에 복수개의 컴포넌트를 추가해야 한다. 한 행에 있는 모든 셀의 높이는 같지만, 행마다 높이가 다를 수 있다. 한 열에 있는 셀의 폭도 모두 같지만, 각 열은 폭이 다를 수 있다.
Grid 컨테이너에서 행마다 열마다 셀의 개수를 다르게 정할 수 있다. 게다가 셀은 컨테이너에 있는 두 개 이상
의 행과 열에 속할 수 있다.
셀에 속하는 컴포넌트의 기본 크기나 명시적인 크기가 셀의 크기 보다 크면, 컴포넌트는 셀 가장자리에서 잘리게 된다.
셀에 속하는 컴포넌트의 기본 너비와 폭이 셀보다 작으면, 컴포넌트는 셀의 왼쪽 상단으로 정렬된다.셀에 속하는 컴포넌트의 위치를 제어하기 위해 <mx:GridItem> 태그의 horizontalAlign 과 verticalAlign 속성을 변경할 수 있다.
완전한 정보가 필요하면 Adobe Flex Language Reference 를 참조하라. 모든 셀이 같은 크기인 레이아웃을 생성하는 Tile 컨테이너에 대한 정보가 필요하면 Tile layout container 를 참조하라.
Creating a Grid layout container
Grid 레이아웃 컨테이너 생성
아래와 같이 Grid 레이아웃 컨테이너를 생성할 수 있다:
- Grid 컨테이너를 정의하려면 <mx:Grid> 태그를 사용하면 된다. 이 태그는 여러 개의 <mx:GridRow> 태그를 가질 수 있다.
- 각 행을 정의하려면 <mx:GridRow> 태그를 사용하면 된다. 이 태그는 반드시 <mx:Grid> 태그 내부에 정의되어야 하며 여러 개의 <mx:GridItem> 태그를 가질 수 있다.
- 행에 속하는 셀을 정의하려면 <mx:GridItem> 태그를 사용하면 된다. 이 태그는 반드시 <mx:GridRow> 태그 내부에 정의되어야 한다.
<mx:GridItem> 태그에서 아이템이 레이아웃되는 방법을 제어할 수 있는 속성이 있는데 아래와 같다:
|
속성 |
타입 |
사용 |
설명 |
|---|---|---|---|
| rowSpan |
Number |
Property |
셀이 몇 개의 행을 차지하고 있는지 나타냄. 초기값은 1. |
| colSpan |
Number |
Property |
셀이 몇 개의 열을 차지하고 있는지 나타냄. 초기값은 1. |
아래의 그림은 3개의 행과 3개의 열로 구성된 Grid 컨테이너를 보여준다:
Flash Player 에서 Grid 컨테이너는 왼쪽의 그림처럼 보여진다. 오른쪽 그림은 Grid 컨테이너에 행과 열을 표시한 것이다. 이 예에서 첫번째 행에 있는 버튼은 각 하나의 셀을 차지한다. 두 번째 행에 있는 버튼은 세 열을 차지하고 있고, 세 번째 있는 버튼은 두 번째 열과 세 번째 열을 차지하고 있다.
아래의 이미지에서 보여주듯이, Grid 컨테이너에서 모든 행이 같은 개수의 셀을 갖도록 정의할 필요는 없다. Grid 컨테이너의 첫 번째 행에는 다섯 개의 셀이 정의되어 있고, 두 번째 행에는 세 개의 열을 차지하는 하나의 셀이 정의되어있다. 그리고 세 번째 행은 하나의 빈 셀과 두 셀의 공간을 차지하는 아이템이 정의되어 있다. .
아래의 MXML 코드는 이 섹션의 첫 그림에서 보여지는 것처럼 세 개의 행과 세 개의 열을 가진 Grid 컨테이너를 생성한다:
<!-- containers\layouts\GridSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Grid id="myGrid">
<!-- 1행 정의 -->
<mx:GridRow id="row1">
<!-- 1행의 첫 번째 셀 정의 -->
<mx:GridItem>
<mx:Button label="Button 1"/>
</mx:GridItem>
<!-- 1 행의 두 번째 셀 정의 -->
<mx:GridItem>
<mx:Button label="2"/>
</mx:GridItem>
<!-- 1 행의 세 번째 셀 정의 -->
<mx:GridItem>
<mx:Button label="Button 3"/>
</mx:GridItem>
</mx:GridRow>
<!-- 2행 정의 -->
<mx:GridRow id="row2">
<!-- 2 행의 세 열의 공간을 차지하는 한 셀을 정의 -->
<mx:GridItem colSpan="3" horizontalAlign="center">
<mx:Button label="Long-Named Button 4"/>
</mx:GridItem>
</mx:GridRow>
<!-- 3행 정의 -->
<mx:GridRow id="row3">
<!-- 3행의 첫 셀 정의 -->
<mx:GridItem/>
<!-- 3 행의 2열과 3열의 공간을 차지하는 셀 정의 -->
<mx:GridItem colSpan="2" horizontalAlign="center">
<mx:Button label="Button 5"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</mx:Application>
이 예제의 SWF 파일을 실행하면 아래와 같이 보인다:
위의 예제를 첫 번째 행이 다섯 개의 버튼을 포함하게 하려면 처음의 <mx:GridRow> 태그를 아래처럼 수정해야 할 것이다:
<?xml version="1.0"?> <!-- containers\layouts\Grid5Button.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Grid id="myGrid"> <!-- 1행 정의 --> <mx:GridRow id="row1"> <!-- 1행의 첫 번째 셀 정의 --> <mx:GridItem> <mx:Button label="Button 1"/> </mx:GridItem> <mx:GridItem> <mx:Button label="2"/> </mx:GridItem> <mx:GridItem> <mx:Button label="Button 3"/> </mx:GridItem> <mx:GridItem> <mx:Button label="Button 3a"/> </mx:GridItem> <mx:GridItem> <mx:Button label="Button 3b"/> </mx:GridItem> </mx:GridRow> <!-- 2행 정의 --> <mx:GridRow id="row2"> <!-- 2행의 세 열의 공간을 차지하는 하나의 셀 정의 --> <mx:GridItem colSpan="3" horizontalAlign="center"> <mx:Button label="Long-Named Button 4"/> </mx:GridItem> </mx:GridRow> <!-- 3행 정의 --> <mx:GridRow id="row3"> <!-- 3행의 첫 번째 셀 정의 --> <mx:GridItem/> <!-- 3행의 2열과 3열의 공간을 차지하는 셀 정의 --> <mx:GridItem colSpan="2" horizontalAlign="center"> <mx:Button label="Button 5"/> </mx:GridItem> </mx:GridRow> </mx:Grid> </mx:Application>
이 예제의 SWF 파일을 실행하면 아래와 같이 보인다:
Setting the row and column span
row span과 column span 설정
GridItem 컨테이너의 colSpan 속성과 rowSpan 속성을 통해 몇 개의 행이나 열을 차지하는 그리드 아이템을 생성할 수 있다. 하나의 아이템이 둘 이상의 행이나 열을 차지하도록 하는 것이 반드시 아이템에 속하는 컨트롤/컨테이너를 크게 만드는 것은 아니다. Making an item span multiple rows or columns does not necessarily make its child control or container larger; you must size the child so it fits the space appropriately, as the following example shows.
아래의 이미지는 Creating a Grid layout container 의 예제를 Button 3a 가 두 행을 차지하도록, Button 3b 가 세 행을 차지하도록, Button 5 가 세 열을 차지하도록 수정한 것이다:
이 결과를 만들기 위해 수정된 코드는 아래와 같다:
<!-- containers\layouts\GridRowSpan.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Grid id="myGrid">
<!-- 1행 정의 -->
<mx:GridRow id="row1" height="33%">
<!-- 1 행의 첫 셀 정의 -->
<mx:GridItem>
<mx:Button label="Button 1"/>
</mx:GridItem>
<mx:GridItem>
<mx:Button label="2"/>
</mx:GridItem>
<mx:GridItem>
<mx:Button label="Button 3"/>
</mx:GridItem>
<mx:GridItem rowSpan="2">
<mx:Button label="Button 3a" height="100%"/>
</mx:GridItem>
<mx:GridItem rowSpan="3">
<mx:Button label="Button 3b" height="100%"/>
</mx:GridItem>
</mx:GridRow>
<!-- 2 행 정의 -->
<mx:GridRow id="row2" height="33%">
<!-- 2 행에서 세 열의 공간을 차지하는 하나의 셀 정의 -->
<mx:GridItem colSpan="3" horizontalAlign="center">
<mx:Button label="Long-Named Button 4"/>
</mx:GridItem>
</mx:GridRow>
<!-- 3 행 정의 -->
<mx:GridRow id="row3" height="33%">
<!-- 3 행의 첫 셀 정의 -->
<mx:GridItem/>
<!-- 3 행에서 2,3,4 열의 공간을 차지하는 셀 정의 -->
<mx:GridItem colSpan="3">
<mx:Button
label="Button 5 expands across 3 columns"
width="75%"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</mx:Application>
이 예제에 대한 SWF 파일을 실행하면 아래의 화면처럼 보여진다 :
이 예제는 아래와 같은 효과를 만들었다:
- 각 행의 높이를 그리드의 33%로 정하여, 모든 행의 높이가 같게 했다.
- Button 3a 와 3b 가 두 행과 세 행의 공간을 차지하도록 아이템의 rowSpan 속성을 정했다.
- Button 3a 와 3b 가 차지하는 행을 모두 칠하도록 height 속성을 100%로 정했다. 버튼의 이 속성을 생략하면, Flex 는 버튼의 높이를 변경하지 않기 때문에 여러 행의 공간을 차지하는 모습을 볼 수 없을 것이다.
- Button 5 가 세 열의 영역을 차지하도록 정했고, 가로 길이를 75%로 정했다. 이 예제에서 텍스트는 필요한 만큼 버튼의 가로 길이가 늘어날 것을 요구한다. 그래서 Flex 는 75%가 아니라, 텍스트에 맞춰 버튼의 가로 길이를 정했다. width 속성을 생략하더라도 같은 결과를 얻을 수 있다. 가로 길이를 퍼센트로 정하는 효과를 보고 싶다면, 라벨 텍스트를 줄여라. 버튼이 3 열의 3/4만 차지하는 것을 볼 수 있을 것이다.
이 외에도 마지막 그리드는 몇 개의 특징을 더 갖고 있다.두 번째 행의 정의가 단 하나의 <mx:GridItem> 태그로 나타나더라도, Flex 는 자동으로 Button 3a와 Button 3b 를 위한 두 개의 셀을 추가한다. 세 번째 행에도 다섯 개의 셀이 있다. 첫 번째 셀은 빈 <mx:gridItem/> 태그로 정의되었다. 두 번째에서 네 번째 셀은 Button 5를 담고 있는 GridItem 으로 정의되었다. 첫 번째 행의 마지막 아이템이 세 행의 영역을 차지하고 있기 때문에 다섯 번째 열이 만들어졌다.
Rss Feed
