반응형
어제에 이어서 계속 하겠습니다.
어제까지 한 소스는
--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 모든 소스와 이미지 파일 입니다.
받으셔서 참고 하세요.
그럼 더 신나는 코딩을 위해 다음 시간에도 새로운 걸 배울께요....
어제까지 한 소스는
--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 모든 소스와 이미지 파일 입니다.
받으셔서 참고 하세요.
그럼 더 신나는 코딩을 위해 다음 시간에도 새로운 걸 배울께요....
반응형
'Corona SDK > Corona SDK TIPs' 카테고리의 다른 글
특정 영역에 들어가면 객체의 색 바꾸기 (Sensor) (0) | 2011.11.12 |
---|---|
SlideView 구현하기 (5) | 2011.11.04 |
Sprite Sheets 이용해서 애니메이션 구현하기 (0) | 2011.10.28 |
Time Bar 만들기 (0) | 2011.10.27 |
백 그라운드 이미지 scroll down 시키기 (0) | 2011.10.26 |
코로나에서 Table View (List View) 표현하기... (0) | 2011.10.14 |
화면에 점수 표시하기 (Display Score) (1) | 2011.10.03 |
함수 (function) 공부 (1) | 2011.10.03 |
Corona SDK 앱에 광고 달기 (2) | 2011.09.23 |
앱스토어에 업로드 하기 (0) | 2011.09.20 |