[Flex3] Tile 레이아웃 컨테이너 / Tile layout container

Reference : http://livedocs.adobe.com/flex/3/html/layouts_11.html#257960

사용자 인터페이스 > 레이아웃 컨테이너 사용 > Tile 레이아웃 컨테이너

Tile 레이아웃 컨테이너는 내부 컴포넌트를 하나 이상의 행이나 열로 배열한다. 필요하면 새로운 행이나 열을 시작한다. direction 속성을 사용하여 레이아웃을 정할 수 있다. direction 속성의 유효한 값은 열로 배열할 때는 vertical, 행으로 배열할 때는 horizontal 이다.

Grid 레이아웃 셀과는 달리 모든 Tile 컨테이너 셀은 크기가 같다.(Grid layout container 를 참고하라.) Flex 는 사각형 안에 Tile 컨테이너의 셀을 배열한다. 각 셀은 하나의 내부 컴포넌트를 가진다. 예를 들어 Tile 레이아웃 컨테이너에 16개의 내부 컴포넌트를 정의하면, Flex 는 셀을 가로로 4개, 세로로 4개로 배열한다. 내부 컴포넌트를 13개만 선언해도 Flex 는 셀을 가로로 4개, 세로로 4개 배열한다. 단, 마지막 행의 마지막 세 개의 셀은 비어 있다. 

아래의 그림은 수평 Tile 컨테이너와 수직 Tile 컨테이너를 보여준다:

A. Horizontal (기본) B. Vertical

 

더 많은 정보는 Adobe Flex Language Reference 의  Tile 에서 볼 수 있다.

Creating a Tile layout container
Tile 레이아웃 컨테이너 생성

MXML 에서 <mx:Tile> 태그를 사용하여 Tile 컨테이너를 정의할 수 있다. MXML, 다른 태그, ActionScript 블럭에서 컴포넌트를 참조하려면 id 값을 설정해야 한다. 타일 크기를 정하기 위해 tileHeight 속성과 tileWidth 속성을 사용할 수 있다.

아래의 예는 위의 이미지에서 보이는 수평 Tile 컨테이너를 생성한다. 모든 셀은 가장 큰 내부 컴포넌트와 크기가 같다.

<?xml version="1.0"?>
<!-- containers\layouts\TileSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Tile id="myFlow"
        direction="horizontal"
        borderStyle="solid"
        paddingTop="10" paddingBottom="10"
        paddingRight="10" paddingLeft="10"
        verticalGap="15" horizontalGap="10">
       
        <mx:TextInput id="text1" text="1" height="50" width="75"/>
        <mx:TextInput id="text2" text="2" height="50" width="100"/>
        <mx:TextInput id="text3" text="3" height="50" width="75"/>
        <mx:TextInput id="text4" text="4" height="50" width="75"/>
        <mx:TextInput id="text5" text="5" height="50" width="75"/>
    </mx:Tile>
</mx:Application>

이 코드를 실행한 SWF 파일은 아래와 같다:

Sizing and positioning a child in a Tile container
Tile 컨테이너에서 내부 컴포넌트의 크기 조정과 위치 정하기

Flex 는 각 Tile 셀의 기본 크기를 가장 큰 내부 컴포넌트와 같게 정한다. 모든 셀의 크기는 이 기본 크기와 같다. 만약 내부 컴포넌트의 기본 크기가 셀보다 크면 Flex 가 자동적으로 내부 컴포넌트의 크기를 셀에 맞도록 조정한다. This, in turn, may clip the content inside the control; for instance, the label of a button might be clipped even though the button itself fits into the cell. If you specify an explicit child dimension that is greater than the tileHeight or tileWidth property, Flex clips the child.

만약 내부 컴포넌트의 기본 크기가 셀보다 작으면, 컴포넌트는 셀의 컴포넌트는 왼쪽, 위에 위치한다. 내부 컴포넌트의 위치를 정하기 위해 <mx:Tile> 태그의 horizontalAlign 과 verticalAlign 속성을 사용할 수 있다.

만약 내부 컴포넌트의 크기가 %를 사용하여 정해지면, 셀의 크기에 따라 늘어나거나 줄어든다. Tile 레이아웃 컨테이너 생성에서 text2 라는 이름의 TextInput 컨트롤의 가로 길이가 100픽셀이다. 그래서 모든 Tile 셀의 기본 크기는 100 픽셀이 된다. 그래서 거의 모든 내부 컴포넌트는 셀 크기보다 작다. 만약 모든 내부 컴포넌트나 컨트롤의 크기를 셀의 크기만큼 늘리고고 싶다면 내부 컴포넌트의 width 속성의 값을 100% 로 정하면 된다. 그리고 타일의 가로 길이를 명시하는 Tile 컨트롤의 tileWidth 속성을 사용하는 방법에 대해서도 이 예제에서 살펴볼 수 있다:

<?xml version="1.0"?>
<!-- containers\layouts\TileSizing.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Tile id="myFlow"
        direction="horizontal"
        borderStyle="solid"
        paddingTop="10" paddingBottom="10"
        paddingRight="10" paddingLeft="10"
        verticalGap="15" horizontalGap="10"
        tileWidth="100">
       
        <mx:TextInput id="fname" text="1" height="50" width="100%"/>
        <mx:TextInput id="lname" text="2" height="50" width="100%"/>
        <mx:TextInput id="addr1" text="3" height="50" width="100%"/>
        <mx:TextInput id="addr2" text="4" height="50" width="100%"/>
        <mx:TextInput id="addr3" text="5" height="50" width="100%"/>
    </mx:Tile>
</mx:Application>

이 코드를 실행한 SWF 파일은 아래와 같다:

Note: 내부 컴포넌트의 width 와 height 속성의 값을 %로 정했을 때, 내부 컴포넌트의 크기는 Tile 컨테이너의 크기가 아니라 타일 셀의 크기에 비례하여 결정된다. 컨테이너가 명시적으로 정의되지 않더라도 셀은 Tile 컨테이너 안에 있는 컴포넌트를 담는 컨테이너로 동작한다.