List 상하로 변경하기 2 - 스크롤포지션 세팅

Rinn`s Note - AS3 Dev : List 상하로 위치 변경하기 및 이벤트의 처리

by 퍼플린 | 2009/07/30 13:53

selectedIndex를 변경시켜주는 시점을 결정하기 위해서 list가 업데이트가 끝났다는 이벤트를 받아서 완료되면 인덱스를 수정해주는 것이다. 이처럼 Flex나 Flash는 몇몇 method를 제외하고는 비동기로 동작하기 때문에 데이터의 수정이나 삭제 입력시에 ...

 

위글에서 이어지는 포스트이니 이전글을 보고 오는것도 좋다.
------------------------------------------------------

 

이전 글에서 리스트 내부의 아이템을 위로 옮기는 걸 했는데.

보면 알겠지만 뭔가 부족하다..

 

리스트가 길어질경우 현제 옮기고 있는 아이템이 리스트에서 보이지 않고 스크롤을 해야 보이기 때문에 위치이동이 많을 경우 스크롤을 내려서 확인 하고 하는등 애로사항이 꽃피게된다.

 

그래서 이번에는 하는김에 상하로 움직이는 것과 움직임에 맞춰서 스크롤 포지션을 옮겨주는 것을 구현해서 마무리 짓도록 하자.

 

Flex에는 horizontalScrollPosition, verticalScrollPosition, maxhor..등등..

스크롤 위치에 관한 속성이 미리 정의 되어있기 때문에 저걸 살짝만 건드려주면 원하는 결과를 얻을수 있다.

 

여기서는 List 컴포넌트를 사용하고 있기 때문에 가로 스크롤은 제외하고 세로스크롤만을 가지고 만든다.

 

스크롤포지션 값은 리스트에서 보여지는 갯수(rowCount)와 전체 개수를 기준으로 결정된다.

이것을 maxVerticalScrollPosition 값으로 알수 있다.

 

만약 데이터가 4개 이고 rowCount가 4라면.. maxVerticalScrollPosition값은 0이다.

데이터가 4개이고 rowCount가 3이라면 maxVerticalScrollPosition 값은 1이다.

한화면에 보여줄수 있는 것이 세개인데 데이터는 네개 이므로 아래로 한번더 스크롤 할수 있다.- 이런뜻이다.

 

이것만 알고 있으면 쉽게 구현이 가능하다.

 

소스코드를 보자.

 

 

import mx.events.FlexEvent;

private var arrData:Array;
private var idx:int;
private var posFlag:Boolean;

private function init():void
{
	arrData = [];
	arrData.push({label:"데이터1", data:"data1"});
	arrData.push({label:"데이터2", data:"data2"});
	arrData.push({label:"데이터3", data:"data3"});
	arrData.push({label:"데이터4", data:"data1"});
	arrData.push({label:"데이터5", data:"data2"});
	arrData.push({label:"데이터6", data:"data3"});
	arrData.push({label:"데이터7", data:"data1"});
	arrData.push({label:"데이터8", data:"data2"});
	arrData.push({label:"데이터9", data:"data3"});
	list.dataProvider = arrData;
}

private function posUp():void
{
	if(list.selectedItem && list.selectedIndex != 0)
	{
		idx= list.selectedIndex;
		posFlag = true;
		
		var tmpArr:Array = arrData.splice(idx,1);
		arrData.splice(idx -1,0,tmpArr[0]);
		list.dataProvider = arrData;
		list.addEventListener(FlexEvent.UPDATE_COMPLETE, setListIndex);
	}
}

private function posDown():void
{
	if(list.selectedItem && list.selectedIndex != arrData.length-1)
	{
		idx = list.selectedIndex;
		posFlag = false;
		
		var tmpArr:Array = arrData.splice(idx,1);
		arrData.splice(idx+1,0,tmpArr[0]);
		list.dataProvider = arrData;
		list.addEventListener(FlexEvent.UPDATE_COMPLETE, setListIndex);
	}
}

private function setListIndex(e:FlexEvent):void
{
	list.removeEventListener(FlexEvent.UPDATE_COMPLETE, setListIndex);
	list.selectedIndex = idx-1;
	
	if(posFlag)
	{
		list.selectedIndex = idx-1;
	}
	else
	{
		list.selectedIndex = idx+1;
	}
	var pos:int = list.selectedIndex-list.rowCount+1;
	list.verticalScrollPosition = (pos > 0)? pos:0;
}

 

추가된것은 별게 없다

 

posUp 함수는 선택된놈을 위로 올리는것 posDown은 내리는것 posFlag는 위로 올리는지 아래로 내리는지에 대한 Flag이다.

list는 List 컴포넌트고 해당 리스트의 rowCount는 4로 세팅되어있다.

 

마지막 setListIndex 함수를 보면

var pos:int = list.selectedIndex-list.rowCount+1;
list.verticalScrollPosition = (pos > 0)? pos:0;

 

이부분이 스크롤을 세팅해주는 부분이다.

 

selectedIndex를 기준으로 스크롤포지션을 세팅해준다.

조금만 보면 쉽게 이해할 수 있을꺼라 생각된다.

 

 

posUp 함수와 posDown 함수는 인덱스를 +1 해주느냐 -1 해주느냐의 차이밖에 없기 때문에 합쳐서 만들수도 있을꺼고. posFlag같은 경우도 이벤트를 받아서 처리한다던지 하게 되면 소스코드는 훨씬 간단하게 수정될 것이다.

 

선택된 놈이 가운데에 오게 한다거나 하는 것도 숫자놀이를 조금 하면 쉽게 세팅할 수 있을꺼라 생각한다.

 

이부분은.. 혹시나 이글을 읽는분께 -ㅅ-;;