반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함


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

어제까지 한 소스는

--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 모든 소스와 이미지 파일 입니다.

받으셔서 참고 하세요.

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

Comment

  1. 짱가아빠 2011.10.16 00:10

    잘 보고 있습니다. 감사합니다.^^ 앞으로도 좋은 내용 부탁드립니다.

  2. 아르에 2011.10.16 17:47

    이런것도 있었군요~ㅎㅎ 자주 찾아와서 봐야겠네요 ㅎㅎ
    좋은 정보 감사합니다~~

    • 솔웅 2011.10.17 04:51 신고

      예 자주 들러주세요.
      좋은 정보 있으면 같이 공유해 주시구요.
      감사합니다.

  3. diana 2011.11.10 23:16

    지금 올려주신 테이블뷰는 테이블 눌러지지 않는데, 테이블을 눌렀을 때, 리스트뷰 처럼 다른 화면으로 바뀔 수 있도록 (새 창이 뜨도록) 하려면 어떻게 해야 하나요?

    • 솔웅 2011.11.11 06:32 신고

      코로나에서 새창이 뜨도록 하는 것은 주로 transition.to 를 이용해서 구현합니다. (안드로이드에서는 Activity개념으로 관리 했는데 코로나는 다르네요.) tableView에서 원하시는 기능을 구현하시려면 tableView.newList 안에 onRelease=listButtonRelease, 를 추가 합니다.
      그리고 나서 listButtonRelease 함수를 만들어서 화면을 transition.to 를 하시면 됩니다.
      function listButtonRelease( event )
      self = event.target
      local id = self.id
      print("this is " .. self.id)

      detailScreenText.text = "You tapped item ".. self.id

      transition.to(myList, {time=400, x=display.contentWidth*-1, transition=easing.outExpo })
      transition.to(detailScreen, {time=400, x=0, transition=easing.outExpo })
      transition.to(backBtn, {time=400, x=math.floor(backBtn.width/2) + screenOffsetW*.5 + 6, transition=easing.outExpo })
      transition.to(backBtn, {time=400, alpha=1 })

      delta, velocity = 0, 0
      end

      이 코드는 Corona SDK 샘플 코드 중 Interface 의 ListView3 샘플 예제 중에 있는 코드 입니다.
      이 ListView3 샘플을 보시면 원하시는 기능을 보실 수 있을거예요.
      감사합니다.

  4. 아통 2012.01.01 23:40

    ↑클릭하면 파일을 받을 수 있어요

    local mask = params.mask
    if mask then
    local maskContent = graphics.newMask(mask)
    listView:setMask(maskContent)
    listView.maskX = display.viewableContentWidth / 2
    listView.maskY = (display.viewableContentHeight - top - bottom) / 2
    end

    newList(params)에 마스크를 추가한 테이블뷰 입니다.
    이전 릴리즈 버전인 591버전에서는 문제없이 돌아갔었는데 그 이후 버전에서는 리스트를 만들고 리스트 아래 쪽을 드래그 해서 스크롤하려 하면 앱이 꺼져버리더라구여. 마스크를 씌우는 방법이 잘못된 건지. 그냥 코로나 버그인지 알 수 있을까요?

    • 솔웅 2012.01.03 16:59 신고

      안드로이드나 아이폰은 모두 앱 실행 한 다음 tab이벤트가 발생하면 앱이 꺼져버리고 윈도우 시뮬레이터에서도 마찬가지더라구요.
      그리고 맥 시뮬레이터에서는 돌아가긴 하더라구요. 가끔 가다가 에러가 나는데... 에러 메세지 를 보면 쓰레드가 9개까지 생성되고 충돌이 일어나더라구요. Thread 0 crashed with X86 Thread State (32-bit): 그리고 콘솔에 제가 Memory 사용현황을 출력하면서 보니까 메모리가 점점 늘어나더라구요.
      연락처 주시면 에러메세지 보내 드릴께요.
      그리고 맥에서 Mask 씌운 화면도 별 변화가 없던데.. Mask는 왜 씌우는 거죠? Memory 를 너무 과도하게 사용하는 부분을 체크해 보셔야 할 것 같습니다.
      참고로 graphics.newMask(nil)을 하면 mask를 메모리에서 없앨 수 있습니다.
      연락처 주시면 에러메시지 보내 드릴께요..
      감사합니다.

  5. 아통 2012.01.03 21:07

    ↑클릭하시면 591버전을 받을 수 있어요~

    마스크는.. 아래위로 스크롤 됐을 때 필요 없는 부분을 안보이게 하려고 씌운거예요. 리스트 크기가 무조건 화면 전체를 덮는건 아니라서.. 원래 공개된 소스에서 마스크만 추가 했는데 메모리가 점점 늘어나는건 이상하네요~

    boozer@naver.com 으로 에러메시지 보내주시면 감사하겠습니다~

    • 솔웅 2012.01.04 03:27 신고

      에러 로그 파일 보내드렸습니다.
      속 시원한 답 드리지 못해 죄송스럽네요.
      메모리 관리 부분을 좀 더 보시고 graphics.newMask(nil) 해 줄 부분 찾는거요. 계속 안 되면 corona 회사에 직접 문의해도 좋을것 같습니다. 제가 예전에 해 봤는데 답변은 아주 늦게 오더라구요. 그것도 자세히 다시 설명해 달라는.. ;; 혹시 시도해 보시다가 안되시면 언제든지 질문 주세요. 저도 주말에 시간 날 때 자세히 보고 새로운것 알게 되면 알려 드릴께요.
      감사합니다.

  6. 아통 2012.01.04 21:24

    아 저 그리고 궁금한게 있는데요. 혹시 리스트 아이템에 포커스를 받는 객체(버튼 같은)를 넣었을 때 스크롤링을 하려면 어떤식으로 하는지 아는 방법이 있나요?
    예를 들면 리스트 아이템에 버튼을 넣는데 버튼을 터치 했을 때 리스트 스크롤링이 되지 않는데 버튼이 작으면 별 문제 없다지만 리스트아이템 크기만해지면 스크롤 되지 않는 문제가 생겨서..테이블뷰 뿐만 아니라 위젯의 스크롤뷰에서도 문제가 되더라구여

    • 솔웅 2012.01.05 08:51 신고

      listView와 Button에 단 이벤트를 잘 살펴보세요.
      저도 SlideView 구현하면서 비슷한 문제가 있었는데요.
      touch는 began,moved,ended,cancelled 이렇게 4가지 phases가 있고 tap이벤트는 그냥 두드리는 겁니다. slideview가 tap으로 돼 있길래 touch 로 바꿔서 하려고 하니까 아예 slide기능이 안 되더라구요.
      tap과 touch의 이런 기능을 잘 사용하셔야 되구요. Button에 다는 리스너가 ListView 스크롤링 될 때는 아예 작동 안 하도록 만들던지... 그런 시도를 해 보셔야 될 것 같습니다.
      ListView는 tap으로 돼 있지 않나요? 그런데 버튼이 touch로 돼 있으면 ListView 스크롤하다가 ended이벤트가 발생할테고 그러면 더이상 ListView화면에 머무르지 않고 버튼이벤트가 실행 될 겁니다.
      힌트가 되셨나요?

  7. 아통 2012.01.05 18:59

    음 제 설명이 좀 부족했나보네여. 제가 원하는 기능을 적어볼게요.
    테이블뷰(이하 리스트)에 리스트 아이템으로 버튼이 있습니다. 이 버튼을 클릭(터치 할 때 움직이지 않는) 했을 때만 버튼 터치의 대한 이벤트가 발생되고 그렇지 않을 때(리스트 아이템의 모든 영역(버튼 포함)에서 드래그 할 때)는 리스트가 스크롤링 됐으면 합니다.
    이 때 리스너 안에 적어주는 리턴값 때문에 이벤트가 버튼에서 더이상 버블링이 안되기 때문에 드래그를 해도 리스트에서 이벤트를 발생하지 않는 걸로 보이네여. 해결 방법이 있을까요?

  8. 아통 2012.01.10 18:11

    이번에 업데이트 되면서 scrollView, tableView에 takeFocus() 라는 메서드가 생겼네요. 이걸로 위에서 제가 말했던 문제를 해결 할 수 있을것 같네요. 버튼 터치 이벤트 핸들러에서 moved 일때 써주면 되는 듯 합니다.
    https://gist.github.com/1590908

    • 솔웅 2012.01.10 18:36 신고

      아 그렇군요.. 저도 좋은거 배우게 됐네요. 감사합니다.
      takeFocus() 어떻게 쓰는지 저도 공부해 봐야겠습니다.