EHXM

[도:트]'s Dev Log

DID YOU KNOW...

안드로이드용 영어 어학기 Smart LC

[Flex 4] 스크롤 기능 제어하기 Scroller

Posted by EHXM. Posted in " Adobe Flash Platform/Tech Note "2010/02/03 13:20

Flex 4 Spark에는 Canvas, Box, HBox, VBox, TileList 등의 Container들이 Group Container 하나로 통일되었습니다.

이전에는 여러 Container가 비슷한 기능을 가지고 item을 표현하는 방식만 달랐는데요,

같은 기능은 Group Container로 통일하고 Scroller와 Layout을 따로 설정하도록 해 놓았습니다.

그래서 Group Container 하나로 Layout을 다르게 적용하면 이전의 Canvas, Box, Hbox등과 같은 Container의 구현이 가능하죠.

여기에서는 Group Container의 스크롤 기능을 제어하는 방법을 알아보겠습니다.

위에서 설명한 대로 아래와 같이 아무 설정없이 Group 크기보다 더 큰 Element를 추가하면

아래 예제1과 같이 Group크기는 자식 element에 맞춰 자동으로 커지게 됩니다.

예제1 소스

예제1 결과

여기에서 Group의 clipAndEnableScrolling 속성을 true로 설정하면 Group의 크기에 맞게 자식 Content를 보여줄 수 있습니다.
예제2 소스

예제2 결과

Group Container를 Scroller에 아래 예제3과 같이 포함시키면 스크롤이 표시됩니다.
에제3 소스

예제3 결과

여기에서 보여지는 부분을 Viewport라고 합니다.

그래서 여기에서는 Viewport의 Width Height는 Group의 크기이고,
Viewport.ContentWidth ContentHeight는 포함시킨 Rect의 크기인 것을 알 수 있습니다.
그리고 이 Viewport의 위치를 horizontalScrollPosition, verticalScrollPosition으로 나타냅니다.
그러므로 마우스로 스크롤해서 내려가면 ContentHeight 범위 내에서 verticalScrollPosition이 증가하게 됩니다.

위의 예에서도 내용을 클릭하고 스크롤하면 스크롤바가 이동되는데요, default 이동 값은 아주 작은 것을 알 수 있습니다.
Group에 마우스 휠 처리 이벤트를 등록하고 event.preventDefault를 통해 기본적으로 주어지는 처리되는 이벤트를 없애고
event.delta를 이용해서 원하는 만큼 스크롤 이동값을 정할 수 있습니다.
예제4 소스

예제4 결과

위를 클릭하고 휠을 내려보세요. 이제 스크롤 하면 원하는 만큼 잘 내려가네요.

제가 처음에 스크롤 바없이 어떤 이벤트에 의해 안의 내용들을 이동시키고 싶어서 이런 기능을 검색하게 되었는데요,
스크롤바를 숨기고 싶으면 Scroller의 horizontalScrollPolicy="off" verticalScrollPolicy="off" 를 통해 가능합니다.
그리고 나서 마우스 휠 이벤트를 prevent 해주고 해당하는 이벤트에서 viewport position만 이동시켜 주면 됩니다.

아래는 스크롤 바만 제거한 예제입니다. 스크롤바가 없어도 마우스 휠 이벤트는 그대로 적용되는 것을 알 수 있습니다.
예제5 소스

예제5 결과

Flash에서 스크롤 처리를할때 웹 브라우저의 스크롤을 막는 방법은 어떻게 하는 걸까요?
혹시 아시는 분은 댓글을 달아주시면 감사하겠습니다.