[FLEX] HorizontalList의 스크롤을 버튼으로 만들기

HorizontalList를 이용하여 화면을 하나 만들어 보았다.

소스
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="center"> <mx:Label color="blue" text="A HorizontalList control displays items in a single row. "/> <mx:HorizontalList id="CameraSelection" height="50" columnCount="5" columnWidth="30"> <mx:dataProvider> <mx:Array> <mx:Object label="1"/> <mx:Object label="2"/> <mx:Object label="3"/> <mx:Object label="4"/> <mx:Object label="5"/> <mx:Object label="6"/> <mx:Object label="7"/> <mx:Object label="8"/> <mx:Object label="9"/> <mx:Object label="10"/> <mx:Object label="11"/> <mx:Object label="12"/> <mx:Object label="13"/> <mx:Object label="14"/> <mx:Object label="15"/> <mx:Object label="16"/> <mx:Object label="17"/> <mx:Object label="18"/> <mx:Object label="19"/> <mx:Object label="20"/> </mx:Array> </mx:dataProvider> </mx:HorizontalList> </mx:Application>
결과

위처럼 만들면 스크롤바가 눈에 거슬린다. 아니 차라리 없는편이 더 나을지도 모르겠다. HorizontalList을 어떻게 적용하느냐의 문제겠지만, 일단 지저분에 보이는것은 사실.

그래서 어떻게 만들면 보기좋게 만들까 고민을 하다가 버튼을 이용해서 스크롤의 기능을 대신하면 어떨까 라는 생각을 하게되었다.

일단 결과먼저..


보기에도 훨씬 깔끔하고 기존 스크롤보다 사용하기도 편해졌다. (물론 개인적인 생각...)
마우스 오버와 마우스 아웃 이벤트를 사용하였고, 여기에 Timer 이벤트로 지속적으로 마우스 오버이벤트를 발생 시켰다.

소스
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="center"> <mx:Script> <![CDATA[ import mx.graphics.ImageSnapshot; import mx.controls.Image; import mx.collections.ArrayCollection; private var timer:Timer = new Timer(scrollSpeed);; public var scrollSpeed:Number = 100; private function itemListScrollOverEventHdlr(event:MouseEvent):void{ var btn:Button = event.currentTarget as Button; if(btn.id == "btn_next"){ if(timer.running) { timer.stop(); } timer = new Timer(this.scrollSpeed); timer.addEventListener(TimerEvent.TIMER, scrollNextFunction); timer.start(); }else if(btn.id == "btn_previous"){ if(timer.running) { timer.stop(); } timer = new Timer(this.scrollSpeed); timer.addEventListener(TimerEvent.TIMER, scrollPreviousFunction); timer.start(); } } private function stopScrolling(event:Event):void { if(timer.running) { timer.stop(); } } private function scrollNextFunction(event:TimerEvent):void{ if(horizontalList.horizontalScrollPosition < horizontalList.maxHorizontalScrollPosition){ horizontalList.horizontalScrollPosition++; } } private function scrollPreviousFunction(event:TimerEvent):void{ if(horizontalList.horizontalScrollPosition > 0){ horizontalList.horizontalScrollPosition--; } } ]]> </mx:Script> <mx:Label color="blue" text="A HorizontalList Scroll Button control displays items in a single row. "/> <mx:HBox verticalAlign="middle" horizontalAlign="center"> <mx:Button id="btn_previous" width="40" height="20" label="＜" mouseOver="itemListScrollOverEventHdlr(event)" mouseOut="stopScrolling(event)"/> <mx:HorizontalList id="horizontalList" height="30" columnCount="3" columnWidth="30" horizontalScrollPolicy="off"> <mx:dataProvider> <mx:Array> <mx:Object label="1"/> <mx:Object label="2"/> <mx:Object label="3"/> <mx:Object label="4"/> <mx:Object label="5"/> <mx:Object label="6"/> <mx:Object label="7"/> <mx:Object label="8"/> <mx:Object label="9"/> <mx:Object label="10"/> <mx:Object label="11"/> <mx:Object label="12"/> <mx:Object label="13"/> <mx:Object label="14"/> <mx:Object label="15"/> <mx:Object label="16"/> <mx:Object label="17"/> <mx:Object label="18"/> <mx:Object label="19"/> <mx:Object label="20"/> </mx:Array> </mx:dataProvider> </mx:HorizontalList> <mx:Button id="btn_next" width="40" height="20" label="＞" mouseOver="itemListScrollOverEventHdlr(event)" mouseOut="stopScrolling(event)"/> </mx:HBox> </mx:Application>

간단하게 요약하자면, 마우스가 해당 버튼으로 이동시 마우스 오버 이벤트를 발생하고, 마우스 오버 이벤트에서는 Timer 이벤트를 동작시켜 scrollNextFunction, scrollPreviousFunction 를 호출한다. 호출된 각각의 함수에서는 horizontalList의 dataProvider 갯수안에서만 움직이도록 코딩해주었다.

위 소스의 전체는 아래에...

HorizontalListScrollBtn.zip

소스를 가져가실땐, 댓글을 달아주세요..