코로나에서 Table View (List View) 표현하기...

원래 오늘은 SQLite를 할 까 했는데요.
이건 나중에 하고 우선 List View (Table View)를 할께요.
제가 했던 안드로이드에서는 이걸 List View라고 했는데 아이폰쪽에서는 Table View라고 하나봐요.

우선 List View에서는 아래와 같은 파라미터들이 사용 됩니다.
data. 값들을 가지고 있는 테이블. 각 row별로 표시될 값들
default.  row의 배경 화면이 될 이미지. touch 영역 설정 가능
backgroundColor. R,G,B 값으로 배경 색을 정할 수 있음
callback. 각 row에 데이터를 어떻게 display할까를 정의하는 함수. 테이블의 각 값들은 callback함수의 할당 된 'item' 인자와 관련되서 사용됨.
over. 터치 시 보일 이미지
onRelease(optional). row가 tap된이후에 일어날 action을 정의한 함수의 이름
top. list의 위쪽 영역. 리스트가 시작하고 다시 돌아오는 포지션
bottom. 리스트의 아래쪽 영역. 스크롤이 초과해서 진행 되면 이쪽으로 돌아온다.
cat. 각 아이템의 카테고리 값을 저장하기 위해 사용되는 테이블 키 이름.
order. cat의 option 항목. 임의의 정렬을 지정할 수 있다.

아래와 같은 메소드들이 있습니다.

* myList:addScrollBar() and myList:removeScrollBar()
스크린에 스크롤바를 넣거나 없앤다.

* myList:addOnTop(object, xVal, yVal)
리스트에 처음에 object를 추가한다. (search bar나 text 같은)

* myList:addOnBottom(object, xVal, yVal)
리스트의 마지막에 object를 추가한다.

* myList:scrollTo(yVal, timeVal)
리스트를 다이나믹하게 움직이도록 한다.

* myList:cleanUp()
리스트를 없애고 메모리를 풀어준다. 그리고 모든 이벤트 리스너들을 정지시킨다.

그럼 이제 실제로 table view (List View)를 사용해 보겠습니다.
우선 tableView.lua 파일이 있어야 됩니다.
아래 파일을 다운 받으세요.

tableView.lua

그리고 이 파일이 있는 폴더에 main.lua 파일을 만드세요.
우선 아래와 같이 tableView.lua 파일을 사용하겠다고 선언합니다.

--import the table view library
local tableView = require("tableView")

일단 여기서 편의상 아이폰의 statusbar를 없앨께요.
display.setStatusBar( display.HiddenStatusBar )

아주 간단한 테이블을 만들어 보겠습니다.
local data = {
"감자떡",
"생선구이",
"된장찌개",
"막걸리",
"소주",
"동동주"
}

이 데이타들을 아래와 같이 해 보세요.
그리고 tableView.lua에 있는 List View 메소드를 선언합니다.
local myList = tableView.newList{data=data}

실행해 보면 이렇게 나옵니다.
글자를 누르고 드래그 하듯이 움직이면 터미널처럼 touch: began moved, ended 가 나옵니다.
이걸 보면 touch 리스너가 달려있고 began,moved,ended 이벤트시 어떤 동작을 지정할 수 있다는 걸 알 수 있겠죠?
그리고 드래그를 하지 않고 그냥 tap 만 하면 아래와 같이 나옵니다.

터미널에 보면 onRelease 필드가 nil 이라고 하면서 에러메세지가 나오죠?

그럼 이 newList안에 아래와 같이 추가 하겠습니다.
onRelease=listButtonRelease,
그리고 그 위쪽에 listButtonRelease 함수를 아래와 같이 만들어 주세요.
function listButtonRelease( event )
    self = event.target
    local id = self.id
    print(self.id)
end

이렇게 하면 각 row를 클릭하면 에러가 나지 않고 그 id가 터미널에 출력 됩니다.
여기까지 하면 가장 간단한 Table View(List View)가 완성 된 겁니다.

좀 더 그럴듯 하게 리스트 뷰를 만들어 볼까요?
아래 이미지를 다운 받으세요.

그리고 myList 에 default="listItemBg.png", 를 추가해 보세요.
local myList = tableView.newList{
    data = data,
    default="listItemBg.png",
    onRelease=listButtonRelease,
}

그럼 이와 같이 그럴듯한 ListView (TableView) 가 됩니다.

자 오늘은 코로나 SDK에서 ListView(TableView) 표시하기 가장 기초적인 부분을 다뤄봤습니다.

다음시간에는 이 글 첫번째에서 소개했던 여러 파라미터들하고 메소드들을 사용해서 좀 더 다이나믹한 효과를 내는 방법을 알아보겠습니다.