New, More Flexible ScrollView Widget

오늘은 2012.721 버전 이후부터 적용된 ScrollView Widget 에 대해 알아 보겠습니다.

그러니 이 기능을 직접 테스트 해 보시려면 2012.721 버전 이상되는 Corona SDK를 설치 하셔야 합니다.

확인해 보니까 지금 일반에 공개된 버전은 2011.704 버전이네요.
유료 사용자가 아닌 경우는 일반에 공개된 이후에 사용하실 수 있을 겁니다.

아래 내용의 원본은 여기 입니다.
그리고 자세한 API를 보시려면 여기를 클릭하시면 됩니다.

그럼 이번에 새로 추가된 기능에 대해 알아보겠습니다.

About Widgets

코로나의 위젯 API는 간단히 여러 플랫폼에 적용되는 코딩을 위해 만들어 졌습니다. 간단한 몇줄의 코드로 버튼, 탭 바, 슬라이더, Picker Wheel, Lists, 스크롤 되는 콘텐트 등을 스크롤 뷰 위젯에 덧 붙일 수 있는 기능을 제공합니다.
모바일 기기는 그 크기가 제한되어 있기 때문에 어느 기종이나 앱에 스크롤 되는 기능이 많이 필요합니다. 코로나에서는 이러한 기능을  scrollView Widget 에서 제공 합니다.

Basic Usage

스크롤 뷰 위젯의 가장 기본적인 이용법은 단지 몇개의 파라미터들을 정하고 디스플레이할 객체를 만들고 그 객체를 스크롤 뷰에 넣으면 됩니다.
아래에 그 예제가 있습니다.

local widget = require "widget"
local scroller = widget.newScrollView{
    width = 320,
    height = 480,
    scrollWidth = 700,
    scrollHeight = 1000
}

local obj = display.newImage( "myobject.png" )
obj.x = 400
obj.y = 500

scroller:insert( obj )

코드를 한번 보겠습니다.
- 첫번째로 widget을 require 합니다.
- 파라미터를 정합니다. 320,480은 아이폰의 해상도 입니다.
- scrollWidth,scrollHeight 파라미터는 스크롤뷰가 어디까지 스크롤 되는지를 정해 줍니다. 이 값은 어떤 객체가 주어지느냐에 따라 자

동적으로 늘어날 겁니다.
- 객체를 생성하고 위치를 설정합니다.
- 이 객체를 스크롤 뷰에 넣습니다.
이것이 스크롤 뷰를 사용하는 가장 기본적인 방법입니다.

위 코드만 가지고도 (이미지 파일만 있다면) 기본적인 스크롤 기능을 구현할 수 있습니다.

위 아래로 움직이지 않고 옆으로 움직이도록 하려면 아래 코드를 덧붙이기만 하면 됩니다.
scroller.content.verticalScrollDisabled = true
디폴트는 아래 코드 입니다.
scroller.content.horizontalScrollDisabled = true

Clipping the Width and Height

스크롤 뷰가 화면 전체를 차지하지 않고 일부분만 차지하도록 하려면 어떻게 할까요?
현재로서는 bitmap mask를 사용하는 방법 밖에는 없습니다.
이 방법도 코로나 개발팀에서 아주 간단히 코딩할 수 있도록 신경을 썼다고 합니다.
특정 크기로 스크롤 뷰를 만들기 위해 비트맵 마스크를 사용하려면 간단히 그 크기(width,height)를 정하는 파라미터를 세팅하고  해당하는 비트맵 마스크를 만듭니다. 그리고 그 비트맵 마스크의 파일 이름으로 maskFile 파라미터를 사용합니다.

    local widget = require "widget"
 
    local list = widget.newTableView{
        width = 320,
        height = 410,
        maskFile = "mask320x410.png"
    }
위 예제는 테이블 뷰에 사용했구요, 스크롤 뷰에서도 똑같이 사용하시면 됩니다.

Buttons and Touchable Objects

주로 ScrollView 에 버튼 같이 터치 리스너를 받아 들이는 object(객체)들을 넣는 방법을 알아볼 겁니다.
스크롤 하기 위해 터치할 때하고 버튼을 누를 때 터치하고 구별해야 쓸모있는 스크롤뷰가 될 수 있겠죠?

이 기능을 사용하려면 takeFocus()를 사용하시면 됩니다.

local widget = require "widget"
local scroller = widget.newScrollView{
    width = 320,
    height = 480,
    scrollWidth = 700,
    scrollHeight = 1000
}

-- event listener for button widget
local function onButtonEvent( event )
    if event.phase == "moved" then
        local dx = math.abs( event.x - event.xStart )
        local dy = math.abs( event.y - event.yStart )
       
        -- if finger drags button more than 5 pixels, pass focus to scrollView
        if dx > 5 or dy > 5 then
            scroller:takeFocus( event )
        end
   
    elseif event.phase == "release" then

        print( "Button pushed." )
    end

    return true
end

local button = widget.newButton{
    label = "My Button"
    top = 300,
    left = 300,
    onEvent = onButtonEvent
}

scroller:insert( button )

위와 같이 버튼을 만들고 이 버튼을 scroller 에 insert를 합니다.

그리고 리스너 이벤트 함수인 onButtonEvent 에서 takeFocus를 구현해 주면 됩니다.
이벤트가 moved 일 때 5픽셀 이상 움직이면 scroller 에 포커스를 맞추고 그렇지 않고 손가락을 떼면 버튼에 포커스를 맞추게 됩니다.

Scroll Events
스크롤 뷰 이벤트의 기본 파라미터에는 아래와 같은 것들이 있습니다.
event.name - 항상 scrollEvent 입니다.
event.target - 실제 이벤트가 할당된 스크롤뷰 위젯에 대한 레퍼런스 입니다.
event.type - beganScroll, endedScroll,movingToTopLimit,movingToBottomLimit,movingToLeftLimit, movingToRightLimit 가 있습니다.
Limit 를 설정하게 되면 그 숫자에 따라 스크롤 뷰가 끝에 다다랐을 때 탄력있게 움직이게 됩니다.

Further Reading and Resources

이 기능들을 자세히 보려면 CoronaSDK의 샘플 코드 중 Interface 폴더에 ㅇㅆ는 WedgetDemo를 보시면 됩니다.
이 기능들은 최근에 발표된 화면(Scene) 전환 API인 Storyboard API와 어울려서 사용할 수도 있습니다.

그럼 샘플코드인 WidgetDemo 앱을 살펴 보겠습니다.

첫번째는 테이블 뷰입니다. (안드로이드에서는 리스트 뷰라고 합니다.)
손가락으로 터치후 움직이면 아래위로 리스트들이 보입니다.
그리고 특정 Row를 터치하면 그 로우에 해당하는 화면으로 넘어갑니다.

여기서 back 버튼을 누르면 이전 테이블 뷰(리스트 뷰) 화면으로 넘어갑니다.
이 소스를 보면 최근에 발표된 storyboard 기능을 사용해서 화면을 넘기고 있습니다.

나중에 이 소스를 분석하면 아주 좋은 공부가 되겠네요.

아래 탭을 보시면 테이블 뷰 이외에 scrollView 와 Other 가 있습니다.

스크롤 뷰를 누르면 이 화면이 나옵니다.
상하 좌우로 움직이면 이미지가 스크롤 됩니다.

그리고 others를 누르면 위 화면과 같이 Slide Bar 와 Date Picker 가 나옵니다.
아주 좋은 샘플이네요.

오늘은 최근에 새로 발표된 Corona SDK 의 Scroll View Widget 에 대해 알아봤습니다.