flex 4.6 Mobile TileList 사용하기

2012.07.18 17:28:20

flex 4.6 Mobile 에서 List 를 이용하면 가로, 세로 정렬 이 가능 합니다.

그런데 모바일 기기는 해상도가 너무 달라서 화면에 맞추기가 힘들죠…

해서 TileList 를 사용해서 해상도에 따라 정렬이 자동으로 맞추려고 했습니다.

사실 TileList 는 html 에서 가로,세로 100% 라고 생각 하시면 될 거 같은데요.

예를 들어 List 가로, 세로 100px 의 이미지를 불러 온다고 할때

이미지

<s:layout>
<s:HorizontalLayout horizontalAlign=”center” verticalAlign=”middle” />
</s:layout>

또는

이미지

<s:layout>
<s:VerticalLayout horizontalAlign=”center” verticalAlign=”middle” />
</s:layout>

형태로 사용이 됩니다.

그런데 저는 이런 방식이 아니라

이미지	이미지	이미지
이미지	이미지	이미지
이미지	이미지	이미지

위와 같은 형식으로 정렬을 시도 했습니다.

해서

TileList 를 사용하려 했는데요 이 코드가 mx 코드를 사용해야 해서

어도비의 도움말을 참고해 코드를 작성 했습니다.

어도비 도움말 코드

<?xml version="1.0"?>
<!-- dpcontrols/TileListDataProvider.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    initialize="initData();" >

    <fx:Script>
        <!
[CDATA[
            import mx.controls.Button;
            import mx.collections.*;

            private var listArray:Array=[
                {label: "item0", data: 0},{label: "item1", data: 1},
                {label: "item2", data: 2},{label: "item3", data: 3},
                {label: "item4", data: 4},{label: "item5", data: 5},
                {label: "item6", data: 6},{label: "item7", data: 7},
                {label: "item8", data: 8}];

            [Bindable]
            public var TileListdp:ArrayList;

            private function initData():void {
                TileListdp = new ArrayList(listArray);
            }
        ]]>

위 코드는 어도비 도움말 코드 입니다.

그런데 위와 같이 작성 했는데요 오류가 나더군요 헐..

그래서 한참을 생각하다 layout 을 변경하면 되지 않을가 하는 생각했는데요 역쉬 정답이였습니다.

<s:T 까지 입력하니 코드 힌트가 떡 하니 나오는게 아닙니까 ㅎㅎㅎ

<s:layout> <s:TileLayout columnWidth="130" horizontalAlign="center" columnAlign="justifyUsingWidth" orientation="rows"/> </s:layout>

위 코드가 바로 Flex 4.6 에서 TileList 를 사용하는 코드 입니다...^^