반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 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 모든 소스와 이미지 파일 입니다.

받으셔서 참고 하세요.

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


반응형
원래 오늘은 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 파일이 있어야 됩니다.
아래 파일을 다운 받으세요.

그리고 이 파일이 있는 폴더에 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) 표시하기 가장 기초적인 부분을 다뤄봤습니다.

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


반응형


반응형
오늘 공부할 Tables and Arrays 는 양이 매우 짧습니다.
그리고 제가 이 글을 회사에 1시간 일찍 출근해서 쓰는데요.
테이블 관련한 예제는 금방 만들어내기도 힘들고 해서 따로 예제를 올려드리지 못 할것 같구요.
그래서 오늘은 그냥 원문을 번역해 볼까 합니다.

아래 주소에서 복사해 왔습니다.
http://developer.anscamobile.com/content/tables-arrays

Tables and Arrays

Tables in Lua implement associative arrays. That is, they can be indexed not just with numbers, but also with strings or any other value of the language, except nil.

루아의 테이블은 배열 역할을 한다. 숫자값으로만이 아니라 스트링이나 다른 문자로도 인덱스 할 수 있다는 의미다. 단 nill은 제외한다.

This library provides generic functions for table manipulation. It provides all its functions inside the table table.

이 라이브러리는 테이블을 다루는 기능을 제공한다. 이 기능들은 table 이라는 테이블을 통해서 제공한다.

Most functions in the table library assume that the table represents a numerically-indexed array or list. For these functions, when we talk about the "length" of a table we mean the result of the length operator.

테이블 라이브러리의 대부분의 기능들은 숫자로 인덱스된 배열이나 리스트의 기능을 수행한다. 이 기능과 관련 우리가 테이블의 length라고 말하는 것은 length 오퍼레이터에 의해 받아온 결과를 말하는 것이다.

table.concat (table [, sep [, i [, j]]])

Given an array where all elements are strings or numbers, returns table[i]..sep..table[i+1] ... sep..table[j]. The default value for sep is the empty string, the default for i is 1, and the default for j is the length of the table. If i is greater than j, returns the empty string.

테이블 내에 있는 문자나 숫자들을 table[i]..sep..table[i+1] ... sep..table[j] 식으로 리턴한다.  sep의 디폴트 값은 empty string이고 i는 1, j 는 테이블의 length이다. i가 j 보다 크면 empty string을 반환한다.

table.insert (table, [pos,] value)

Inserts element value at position pos in table, shifting up other elements to open space, if necessary. The default value for pos is n+1, where n is the length of the table, so that a call table.insert(t,x) inserts x at the end of table t; however, if you are inserting at the end of the table, it is faster to use the length operator: t[#t + 1] = x.

테이블의 pos 위치에 해당 value를 삽입한다. 필요하면 다른 값들은 위치를 이동하게 된다. pos의 디폴트는 n+1이다. (n은 테이블의 length). 예를 들어 table.insert(t,x)라고하면 x를 테이블 t의 맨 마지막 요소로 삽입하게 된다.

table.maxn (table)

Returns the largest positive numerical index of the given table, or zero if the table has no positive numerical indices. (To do its job this function does a linear traversal of the whole table.)

해당 테이블에 있는 값들의 갯수를 리턴하게 된다. 값이 없으면 0를 리턴한다.

table.remove (table [, pos])

Removes from table the element at position pos, shifting down other elements to close the space, if necessary. Returns the value of the removed element. The default value for pos is n, where n is the length of the table, so that a call table.remove(t) removes the last element of table t.

pos위치에 있는 값 remove한다. 필요하면 다른 값들의 위치를 이동한다. 그리고 remove된 값을 리턴한다. pos의 디폴터 값은 n이다. table.remove(t) 하면 테이블 t의 마지막 값이 remove된다.

table.sort (table [, comp])

Sorts table elements in a given order, in-place, from table[1] to table[n], where n is the length of the table. If comp is given, then it must be a function that receives two table elements, and returns false when the first is less than the second (so that not comp(a[i+1],a[i]) will be false after the sort). If comp is not given, then the standard Lua operator < is used instead.

주어진 조건으로 테이블 내의 값들을 sorting한다. comp 값이 주어지면 두개의 테이블 값들을 받게 된다. 만약 첫번째가 두번째보다 적으면 false를 리턴한다. comp가 주어지지 않으면 Lua의 standard operator 인 < 가 사용된다.

The sort algorithm is not stable; that is, elements considered equal by the given order may have their relative positions changed by the sort.

소팅은 주어진 조건에 맞게 이루어지므로 항상 조건이 고정돼 있는 것은 아니다.

==================

코로나 SDK에서의 테이블(배열)에 대해 훑어 봤습니다.

다음 주제는 Math인데요. 이것도 Math관련 함수를 죽 정리해 놓은것 뿐이니까 이것도 간단히 정리하겠습니다.

원문은 아래 주소에 있습니다.

http://developer.anscamobile.com/content/math

This library is an interface to the standard C math library. It provides all its functions inside the table math.

이 라이브러리는 standard C 의 math 라이브러리를 사용한다. 이 기능들은 math라는 테이블을 통해 제공된다.

math.abs (x)

Returns the absolute value of x.

x의 절대값을 리턴한다.

math.acos (x)

Returns the arc cosine of x (in radians).

x의 원호 코사인을 리턴한다.

math.asin (x)

Returns the arc sine of x (in radians).

x의 원호 사인을 리턴한다.

math.atan (x)

Returns the arc tangent of x (in radians).

x의 원호 탄젠트를 리턴한다.

math.atan2 (y, x)

Returns the arc tangent of y/x (in radians), but uses the signs of both parameters to find the quadrant of the result. (It also handles correctly the case of x being zero.)

y/x의 원호 탄젠트를 리턴한다.

math.ceil (x)

Returns the smallest integer larger than or equal to x.

x보다 크거나 같은 최소값의 인티저를 리턴한다.

즉 소수값을 자연수로 고쳐준다.

math.cos (x)

Returns the cosine of x (assumed to be in radians).

x의 코사인을 리턴한다.

math.cosh (x)

Returns the hyperbolic cosine of x.

x의 쌍곡선 코사인을 리턴한다.

math.deg (x)

Returns the angle x (given in radians) in degrees.

x의 각도를 리턴한다.

math.exp (x)

Returns the value ex.

ex의 값을 리턴한다.

math.floor (x)

Returns the largest integer smaller than or equal to x.

x보다 작거나 같은 수 중 가장 큰 자연수를 리턴한다.

math.fmod (x, y)

Returns the remainder of the division of x by y that rounds the quotient towards zero.

x를 y로 나눈 값의 나머지를 리턴한다.

math.frexp (x)

Returns m and e such that x = m2e, e is an integer and the absolute value of m is in the range [0.5, 1) (or zero when x is zero).

x=m2e 같은 m,e 를 리턴한다. e는 m의 자연수이고 절대값이다. m은 [0.5,1] 사이에 있다.

math.huge

The value HUGE_VAL, a value larger than or equal to any other numerical value.

다른 수들보다 큰 수.

math.ldexp (m, e)

Returns m2e (e should be an integer).

m2e를 리턴한다. (e는 자연수라야 한다.)

math.log (x)

Returns the natural logarithm of x.

x의 로그를 리턴한다.

math.log10 (x)

Returns the base-10 logarithm of x.

x의 -10로그를 리턴한다.

math.max (x, ...)

Returns the maximum value among its arguments.

괄호 안의 값 들 중 가장 큰 수를 리턴한다.

math.min (x, ...)

Returns the minimum value among its arguments.

괄호 안의 값들 중 가장 작은 수를 리턴한다.

math.modf (x)

Returns two numbers, the integral part of x and the fractional part of x.

integral x와 팩토리얼 x 두개 값을 리턴한다.

math.pi

The value of pi.

파이 값

math.pow (x, y)

Returns xy. (You can also use the expression x^y to compute this value.)

xy를 리턴한다.

math.rad (x)

Returns the angle x (given in degrees) in radians.

각도 x의 라디안 값을 리턴한다.

math.random ([m [, n]])

This function is an interface to the simple pseudo-random generator function rand provided by ANSI C. (No guarantees can be given for its statistical properties.)

랜덤 값을 구한다.

When called without arguments, returns a uniform pseudo-random real number in the range [0,1). When called with an integer number m, math.random returns a uniform pseudo-random integer in the range [1, m]. When called with two integer numbers m and n, math.random returns a uniform pseudo-random integer in the range [m, n].

m,n이 주어지지 않으면 디폴트로 (0,1)의 값으로 계산한다. m이 주어지면 [1,m]으로 계산한다. m,n모두 주어지면 범위는 [m,n]이 된다.

math.randomseed (x)

Sets x as the "seed" for the pseudo-random generator: equal seeds produce equal sequences of numbers.

math.sin (x)

Returns the sine of x (assumed to be in radians).

x의 사인 값을 리턴한다.

math.sinh (x)

Returns the hyperbolic sine of x.

x의 쌍곡선 사인 값을 리턴한다.

math.sqrt (x)

Returns the square root of x. (You can also use the expression x^0.5 to compute this value.)

x의 square root 값을 리턴한다.

math.tan (x)

Returns the tangent of x (assumed to be in radians).

x의 탄젠트 값을 리턴한다.

math.tanh (x)

Returns the hyperbolic tangent of x.

x의 쌍곡선 탄젠트 값을 리턴한다.

===========================

조금 골치 아픈 공식들이죠?
저는 spin the bottle  게임 만들 때 테이블 관련해서는 table.maxn(table)을 사용했었구요. 병돌리기 위해 두 점 사이의 각도를 구하기 위해 radian구하는 공식과 각도 구하는 공식 등을 사용했는데요.
그건 위에 있는 함수를 사용하지는 않고 그냥 공식이 있는 함수를 만들어서 사용했었습니다.
위에 있는 수학 함수 중에는 math.ceil 이라던가 math.random 정도만 자주 쓰는 거 같애요.
아무래도 제 수학 실력과 프로그래밍 실력이 딸려서 그러겠죠?
게임 만들 때 이런 수학 함수 잘 사용하면 좋다고 그러던데...

오늘은 Corona SDK 에서의 배열인 table과 standard C 언어에서 가져온 코로나 SDK 의 수학함수에 대해서 알아봤습니다.

다음시간엔 Corona에서의 SQLite 데이타 베이스 사용법에 대해 다루겠습니다.

감사합니다.

반응형