코로나에서 Table View (List View) 표현하기 두번째 시간

어제에 이어서 계속 하겠습니다.

어제까지 한 소스는

--import the table view library
local tableView = require("tableView")
display.setStatusBar( display.HiddenStatusBar )

--local background = display.newImage("hutbg.png")

function listButtonRelease( event )
    self = event.target
    local id = self.id
    print(self.id)
end

local data = {
"감자떡",
"생선구이",
"된장찌개",
"막걸리",
"소주",
"동동주"
}

local myList = tableView.newList{
    data = data,
    default="listItemBg.png",
    onRelease=listButtonRelease,
}

여기까지 였습니다.

오늘은 여기에 이미지를 넣어 보겠습니다.
아래 이미지들을 받으세요.

제가 먹고 싶은 것 들인가 봐요.

이 그림들을 다 받으셨으면 이제 코딩을 시작하겠습니다.

우선 data 부터 바꾸겠습니다.
local data = {감자떡,생선구이,된장찌개,막걸리,소주,동동주}

이것을
local data = {}

--setup each row as a new table, then add title, subtitle, and image
data[1] = {}
data[1].title = "감자떡"
data[1].subtitle = "100% 감자로 만든 강원도 특산품"
data[1].image = "potato.png"

data[2] = {}
data[2].title = "생선구이"
data[2].subtitle = "맛있는 고갈비"
data[2].image = "grillfish.png"

data[3] = {}
data[3].title = "된장찌개"
data[3].subtitle = "구수한 된장찌개"
data[3].image = "soy.png"

data[4] = {}
data[4].title = "막걸리"
data[4].subtitle = "몸에 좋은 막걸리"
data[4].image = "mak.png"

data[5] = {}
data[5].title = "소주"
data[5].subtitle = "짜르르 몸에 퍼지는 소주"
data[5].image = "soju.png"

data[6] = {}
data[6].title = "동동주"
data[6].subtitle = "고향의 맛 동동주"
data[6].image = "dong.png"

이렇게 바꿔주세요.

이렇게 하고 실행 하면 아래와 같이 에러가 납니다.

잘 보시면 아시겠지만 첫번째 줄 디폴트 이미지를 뿌려주고나서 데이터를 뿌릴때 에러가 납니다.
데이터가 여러개라서 그런데요.
이렇게 한 row에 여러 텍스트라든지 혹은 텍스트 + 이미지를 표시하시려면 callback을 사용합니다.
그리고 이 callback에 있는 object들은 하나의 group으로 관리하게 됩니다.
그럼 myList를 아래와 같이 고쳐 보세요.

local myList = tableView.newList{
    data = data,
    default="listItemBg.png",
    onRelease=listButtonRelease,
    callback = function( row )
        local g = display.newGroup()
        return g  
    end
}

이제 에러는 안 나죠?
대신 callback 안에 어떤걸 표시할지 알려주지 않아서 그냥 row 배경이미지만 6개 나옵니다.

callback을 아래와 같이 채워주세요.
    callback = function( row )
        local g = display.newGroup()
            local img = display.newImage(row.image)
            g:insert(img)
            img.x = math.floor(img.width*0.5 + 6)
            img.y = math.floor(img.height*0.5)

            local title =  display.newText( row.title, 0, 0, native.systemFontBold, 14 )
            title:setTextColor(255, 255, 255)
            g:insert(title)
            title.x = title.width*0.5 + img.width + 6
            title.y = 30

            local subtitle =  display.newText( row.subtitle, 0, 0, native.systemFont, 12 )
            subtitle:setTextColor(255,255,255)
            g:insert(subtitle)
            subtitle.x = subtitle.width*0.5 + img.width + 6
            subtitle.y = title.y + title.height + 6
        return g  
    end

우선 이미지를 표시하고 group에 insert시키고 x,y 좌표를 설정해 줍니다.
title과 subtitle도 마찬가지로 합니다.

자 이제 제대로 ListView(TableView) 가 나오죠?

여기다가 배경 화면을 은은하게 깔겠습니다.

local background = display.newImage("hutbg.png")
background.alpha = 0.4

이렇게 간단하게 이미지 하나 불러오고 투명도를 약간 줬습니다.

TableView.zip

이번 TableView 모든 소스와 이미지 파일 입니다.

받으셔서 참고 하세요.

그럼 더 신나는 코딩을 위해 다음 시간에도 새로운 걸 배울께요....