flex 4.6 Mobile 에서 List 를 이용하면 가로, 세로 정렬 이 가능 합니다.
그런데 모바일 기기는 해상도가 너무 달라서 화면에 맞추기가 힘들죠…
해서 TileList 를 사용해서 해상도에 따라 정렬이 자동으로 맞추려고 했습니다.
사실 TileList 는 html 에서 가로,세로 100% 라고 생각 하시면 될 거 같은데요.
예를 들어 List 가로, 세로 100px 의 이미지를 불러 온다고 할때
|
이미지 |
이미지 |
이미지 |
이미지 |
|
<s:layout> |
또는
|
이미지 |
|
이미지 |
|
이미지 |
|
이미지 |
|
<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 를 사용하는 코드 입니다...^^
