IT 기술 따라잡기

코로나 SDK의 native library는 다양한 native user interface를 제공합니다.

Activity Indicator

native.setActivityIndicator()

native.setActivityIndicator( true );
timer.performWithDelay( 10000,  function()
     native.setActivityIndicator( false )
end)
local bgImg = display.newImage( "background1.png" )

위 소스코드와 같이 true를 하면 아래 화면에서 보이는 것 처럼 디바이스 내의 Activity Indicator가 나옵니다. true인 동안에는 touch 같은 동작을 할 수 없게 됩니다. 이 소스코드는 10초동안 indicator가 true이고 그 이후는 평상시 처럼 동작하는 코드 입니다.

Alert
native.showAlert(title,message[,buttonLabels[,listener]])
popup alert 화면이 뜨고 거 화면에 버튼도 표시 됩니다. 애니메이션 같은 프로그램의 액티비티는 백그라운드에서 그대로 실행이 될 겁니다. 그러니까 게임 같은데서 replay를 위해 모두 멈춰야 되면 이 alert화면을 띄우기 전에 코딩으로 다 처리 해 줘야 되더라구요. 다만 touch 같은 유저와의 interactivity는 alert을 없애기 전 까지는 block 됩니다. button만 빼 놓으면 setActivityIndicator랑 조건이 비슷합니다.

title은 제목이고 message는 텍스트로 표시 될 내용입니다. 그 다음에 버튼을 표시하고 그 버튼을 누르면 실행할 리스너 함수를 넣을 수 있습니다.

아래 간단한 소스코드 보시겠습니다.

native.setActivityIndicator( true );
timer.performWithDelay( 3000,  function()
     native.setActivityIndicator( false )
end)
local bgImg = display.newImage( "background1.png" )

-- Handler that gets notified when the alert closes
local function onComplete( event )
        if "clicked" == event.action then
                local i = event.index
                if 1 == i then
                        -- Do nothing; dialog will simply dismiss
                elseif 2 == i then
                        -- Open URL if "Learn More" (the 2nd button) was clicked
                        system.openURL( "http://coronasdk.tistory.com" )
                end
        end
end
 
-- Show alert with five buttons
local alert = native.showAlert( "Corona", "Dream. Build. Ship.",
                                        { "OK", "Learn More" }, onComplete )

이 소스코드는 OK 와 Learn More 두개의 버튼이 뜨고 OK를 누르면 아무것도 안하고 Learn More를 누르면 위에 있는 웹 사이트로 가도록 한 코드 입니다.

이 showAlert에 넣을 수 있는 버튼의 갯수는 6개 까지 입니다. 이 버튼은 순서에 따라 event.index에 1~6번까지가 할당 됩니다.

event.action 에는 cancelled와 clicked 가 있습니다.

native.cancelAlert()
cancel버튼을 누르면 alert화면이 사라지지만 프로그래밍으로없애려면 이 구문을 씁니다. 예를 들어 alert화면이 뜨고 일정 시간 후에 자동으로 없어지게 만드는 기능 등에 사용 할 수 있겠죠?

-- Dismisses "alert" from previous code sample after 10 seconds
local function cancelMyAlert()
        native.cancelAlert( alert )
end
 
timer.performWithDelay( 10000, cancelMyAlert )


Fonts

native.newFont(name[,size])
원하는 폰트가 있으면 이 함수를 이용해서 폰트를 사용할 수 있습니다.

기본적으로는 아래 두 폰트를 사용할 수 있습니다.
native.systemFont , native.systemFontBold

native.getFontNames()를 통해서 사용 가능한 폰트들을 리턴 받을 수 있습니다.

Text Input

native.newTextField(left,top,width,height[,listener])
single-line textfield를 표시합니다.
앱 스토어에 올린 Spin the Bottle 1 개발 할 때 사용해 봤는데요. 이게 시뮬레이터에서는 지원이 안 됐습니다. 그래서 테스트 할 때마다 디바이스에 인스톨 하면서 테스트 해야 되서 불편하더라구요.
얼마전에 시뮬레이터에서도 지원이 된다고 해서 새 build 버전을 받았는데 아직 안정적이지 않아서 인스톨이 잘 안 되더라구요. 코로나 측에서 테스트 완료하고 곧 공개 할 것 같습니다.

TextField 의 property들은 아래와 같습니다.
object.align : left,center,right 가 있음
object.font : native.newFont()를 리턴합니다.
object.isSecure : 패스워드 같이 문자가 찍히지 않도록 합니다. 디폴트는 false로 문자가 찍히도록 돼 있습니다.
object.size : 텍스트의 크기
object.text : textfiend에 지정된 텍스트를 뿌려줍니다.

아래와 같은 메소드 들이 있습니다.
object:setTextColor(r,g,b[,a]) : 텍스트 칼라를 지정해 줍니다.

Listening for Keyboard Events
스마트폰에서 텍스트를 입력하려면 키보드가 나타납니다.
이 때 그 움직임을 catch 할 수 있는데요. 이것은 event.phase로 구분 합니다.
event.phase = "began" : 키보드가 나타났을 때
event.phase = "ended" : 텍스트 필드가 아니라 다른 필드를 누를 때 같이 사용자가 해당 텍스트 필드의 작업을 멈췄을 떄
event.phase = "submitted" : return 을 눌렀을 때

native.setKeyboardFocus(textField) : 키보드 포커스를 해당 텍스트 필드에 함. nil을 넣으면 포커스를 없애고 키보드를 사라지게합니다.


Supported Keyboard Types
input textfield에는 5가지 타입의 키보드가 지원 됩니다. 프로퍼티 이름은 "inputType"입니다.
numericField = native.newTextField( 50, 150, 220, 36, handlerFunction )
numericField.inputType = "number"

위 소스에서 number는 숫자만 입력할 수 있는 키보드가 나옵니다.
default는 일반적인 키보드 입니다.
phone 은 전화번호 입력을 위한 키보드 입니다.
url 은 웹 주소를 입력할 수 있는 키보드 입니다.
email 은 이메일 주소를 입력 할 수 있는 키보드 입니다.

Multiline Textfields
여러 줄을 입력할 수 있도록 하려면 텍스트 박스를 사용합니다.
native.newTextBox( left, top, width, height )
높이를 넘어가면 스크롤 바가 생깁니다.

프로퍼티들은 아래와 같습니다.
object.align : left,center,right 가 있습니다.
object.font : native.newFont()에 의해 리턴된 폰트 객체 입니다.
object.hasBackground 배경화면이 있으면 true이고 투명하면 false입니다.
object.size 텍스트 크기 입니다.
object.text 텍스트 박스 내의 문자 입니다.

메소드에는 칼라를 지정하는 메소드가 있습니다.
object:setTextColor(r,g,b[,a])


Web PopUps

이 웹 팝업을 사용하려면 아래와 같이 하면 됩니다.
native.showWebPopup( "http://coronasdk.tistory.com" )
특정 크기를 지정해 줄 수도 있습니다.
native.showWebPopup( 10, 10, 300, 300, "http://coronasdk.tistory.com" )

Web popup scaling
웹 팝업의 크기를 설정 하려면 아래와 같이 HTML 파일에 메타태그를 코딩해 넣으시면 됩니다.
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

웹 폰트 사이즈를 유지하려면 아래와 같이 CSS 코드를 추가합니다.
<style type="text/css">
html {
        -webkit-text-size-adjust: none;
}
</style>

Web Popup Options
웹 팝업 화면을 조정하려면 아래와 같은 6개의 파라미터로 조절 하실 수 있습니다.
native.showWebPopup( 10, 10, 300, 300, "http://coronasdk.tistory.com", {urlRequest=listener} )

옵션테이블의 아래 프로퍼티들을 사용하실 수 있습니다.

options.baseUrl : 베이스 url을 규정합니다.
options.hasBackground : 팝업에 백그라운드가 있는지 없는지에 대해 컨트롤 합니다.
options.urlRequest : 웹 페이지의 상대 경로를 사용할 수 있습니다. 예) interface/WebOverlay
<form action="corona:close">
        <input type="submit"/>
</form>
사용자가 웹 팝업의  Submit을 누르면 설정된 리스너 함수는 urlRequest 이벤트 객체를 보내집니다.

Removing the Web Popup
native.cancelWebPoppu()으로 팝업을 없앨 수 있습니다.

Handling Web Popup Events
옵션 테이블에 이벤트 핸들러를 urlRequest 프로퍼티에 제공하면 웹 팝업은 유저가 웹 페이지의 링크를 클릭할 때 이 이벤트를 핸들러에 전달됩니다. 아래와 같은 이벤트들이 전달 됩니다.
event.errorCode
event.errorMessage
event.name
event.url

이 이벤트 핸들러는 한번 클릭할 때마다 한번씩 실행됩니다.
function listener( event )
  --if no errors, then execute my code
  if event.errorMessage == nil then
          myOnClickHandler( event.url )
  end
  return true
end
 
local options = {
  baseUrl = system.ResourceDirectory,
  hasBackground = false,
  urlRequest = listener
}
 
native.showWebPopup( "test.html", options )

지난번 코로나에서 광고 다는 법 할 때 말한건데요.
코로나 SDK에서는 현재 공식적으로 inMobi 만 지원합니다.

그런데 이 웹 팝업을 이용해서 admob이나 iAd 같은 앱 광고도 넣을 수 있습니다.
공식적인 방법은 아니고 개발자들 끼리 방법을 개발해서 그 코드를 공유하고 있습니다.

인터넷을 찾아보시면 나올겁니다.
저도 이 방법을 배우게 되면 이곳에 글로 정리해 두겠습니다.

그럼...

어떤 분이 질문을 하나 올려 주셨습니다.
비밀 댓글로 올려 주신걸로 봐서 구체적인 내용이 알려지길 원하시지는 않는 것 같네요.
그 분의 질문을 보면 SlideView 구현에 대해 알면 해결 될 수 있을 것 같습니다.
그래서 오늘은 SlideView에 대해서 알아 보도록 하겠습니다.

이 이미지는 Corona SDK를 깔면 기본으로 제공되는 샘플 코드 입니다.
사진을 좌우로 움직일수 있고 Terminal에 보면 현재 사진이 몇번 째 인지 그리고 dragDistance는 얼마인지 그리고 총 몇개의 이미지 중 몇번째인지 등의 정보가 나옵니다.

코로나 SDK에서 제공되는 샘플을 보면 원하는 기능을 생각보다 쉽게 구현하는 방법을 알 수 있습니다. 적극적으로 활용하기를 바랍니다.

일단 SlideView를 쉽게 구현하도록 코로나에서는 따로 클래스 파일을 제공합니다.

이 소스 코드도 열어서 분석 해 보시면 그렇게 어렵지는 않습니다.
그건 각자 해 보시고 오늘 글에서는 이 기능을 이용하는 방법을 살펴 보겠습니다.
일단 소스를 보겠습니다.

display.setStatusBar( display.HiddenStatusBar )

local slideView = require("slideView")
   
local myImages = {
    "myPhotos1.png",
    "myPhotos2.png",
    "myPhotos3.png",
    "myPhotos4.png"
}       

--slideView.new( myImages )
--slideView.new( myImages, "bg.png" )
slideView.new( myImages, nil, 40, 60 )

별거 없습니다. 이렇게 단 몇줄로 slideView 기능이 구현 됐습니다.
첫줄은 statusBar를 없애는 것이고
그 다음 줄이 slideView.lua를 이용하기 위해서 require 한 겁니다.
그리고 slideView에 넣을 이미지를 테이블(배열) 에 넣구요.
slideView.new()를 해 주시면 됩니다.
slideView.lua의 36번째 줄을 보시면
function new(imageSet,slideBackground,top,bottom) 으로 함수가 시작합니다.
전달하는 파라미터를 이미지세트와 백그라운드 이미지 그리고 top과 bottom값을 전달 할 수 있습니다.
아까 terminal에 뿌려줬던 텍스트들은 main.lua에 있지 않고 slideView.lua 파일 안에 있네요.
전체 소스 파일은 아래 파일을 다운 받으세요.

다음 예제를 소개해 드리겠습니다.

코로나 샘플 소스코드와 똑 같습니다. 다만 다른 점이 있다면 이미지세트를 불러오는게 아니라 다른 별도의 파일들을 불러오는 겁니다.
display.setStatusBar( display.HiddenStatusBar )

local slideView = require("slideView")
   
local mySlides = {
    "screen1",
    "screen2",
    "screen3",
}       

slideView.new( mySlides )

이것도 소스는 간단합니다. 단지 mySlides라는 테이블(배열)에 파일 이름이 들어가 있습니다.
대표로 screen1을 보시겠습니다.

module(..., package.seeall)

function new()
    local g = display.newGroup()
   
    local background = display.newRect(0,display.screenOriginY, display.contentWidth, display.contentHeight-display.screenOriginY)
    background:setFillColor(222, 222, 222)
    g:insert(background)
   
    local message = display.newText("Screen 1", 0, 0, native.systemFontBold, 16)
    message:setTextColor(0, 0, 0)
    message.x = display.contentWidth*0.5
    message.y = display.contentHeight*0.5
    g:insert(message)
   
    function g:cleanUp()
        g:removeSelf()
    end
   
    return g
end

첫번째는 다른 file(main.lua) 에서 require하려면 설정해 줘야 되는 모듈 부분입니다.
그리고 function new() 함수가 있습니다.
g라는 그룹이 그 다음줄에서 정위 되었구요. 배경 화면으로 사용될 사각형이 그려졌습니다. 이 사각형의 변수 이름은 background이고 color가 정해지고 그룹에 insert됐습니다.
그 다음에는 Screen이라는 텍스트를 message라는 변수에 담아서 display합니다.

이 샘플 예제는 아래 파일을 참조하세요.

Slide View 관련해서 알아 봤는데요.

혹시 코로나로 개발하시거나 공부하시면서 질문 사항 있으시면 주저마시고 댓글로 올려 주세요.

저도 찾아 보면서 공부가 많이 되네요.

혹시 질문 올리신 분께 충분히 답변이 됐는지 모르겠습니다.
더 질문이 있으시면 댓글 달아 주세요.

그럼....

Location and Maps

MapView는 구글 맵을 앱에서 사용할 수 있게 해 줍니다.
코로나에서의 MapView는 현재까지 iOS만 지원 됩니다. 안드로이드에서 안될 뿐만 아니라 코로나 시뮬레이터에서도 안 됩니다.
테스트 하려면 맥에 XCode 시뮬레이터 깔아 놓고 하던가 애플 디바이스를 구입하셔야 합니다.

Constructor
myMap =  native.newMapView(left,top,width,height)

특정 영역에 MapView를 표시하고 코로나 display object를 반환합니다. 이 object는 다른 display object처럼 움직이거나 회전할 수 있습니다.

Map attributes
myMap.mapType = "standard"
myMap.mapType = "satellite"
myMap.mapType = "hybrid"

mapType은 일반 타입의 지도, 위성에서 보는것 같은 타입의지도, hybrid지도를 선택할 수 있습니다.
안드로이드나 애플 앱을 이용해서 구글 맵 표시를 해 보셨다면 쉽게 이해 하실 겁니다.

myMap.isZoomEnabled = true
확대 축소를 가능하게 해 줍니다. 디폴트는 true입니다.

myMap.isScrollEnabled = true
스크롤을 가능하게 해 줍니다. 디폴트는 true 입니다.

myMap.isLocationUpdating = true
현재 위치를 표시할 수 있도록 합니다. 사용자가 이동하면 계속 업데이트 될 겁니다. 디폴트는 false입니다.

isVisible= myMap.isLocationVisible
표시되고 있는 지역 내에 현재 위치를 표시할 수 있는지 없는지를 리턴합니다.
이 값은 read only 입니다.


Map functions

latitude, longitude = myMap:getAddressLocation( "gough and post, sf" )
latitude, longitude = myMap:getAddressLocation( "120 university, palo alto, ca" )
latitude, longitude = myMap:getAddressLocation( "eiffel tower" )

주어진 스트링으로 검색해서 그 위도와 경도 값을 리턴합니다. 이것은 구글 맵 HTTP 메소드를 이용하게 됩니다. 지도에 마커를 표시할 수도 있고 해당 지점이 중앙으로 오도록 할 수도 있습니다.

myLocation = myMap:getUserLocation
사용자의 현재 위치를 반환합니다. 그 내부의 값들은 아래와 같습니다.

myLocation.longitude
myLocation.latitude
myLocation.altitude
myLocation.accuracy
myLocation.time
myLocation.speed
myLocation.direction
myLocation.isUpdating -- a Boolean that flags whether the location is currently updating

myMap:setRegion(latitude,longitude,latitudeSpan,longitudeSpan,isAnimated)

화면에 출력하는 지역을 새로운 지역으로 바꿉니다.

myMap:setCenter(latitude,longitude,isAnimated)

화면에 출력하는 지역을 해당 위도 경도를 중앙으로 하는 지역으로 바꿉니다.

myMap:addMarker(latitude,longitude,{title="Displayed Title", subtitle="subtitle text"})

지도위 특정 지점에 핀을 표시합니다. 그리고 그 핀을 터치하면 위 텍스트가 표시됩니다.

myMap:addMarker(latitude,longitude)
특정 지점에 핀을 표시합니다.

myMap:removeAllMarkers()
핀을 모두 제거합니다.

Address Lookup from Position (Reverse Geocoding)
위도와 경도는 대략적인 주소값으로 바꿀 수 있습니다. 이것을 하려면 구글의 reverse geocoding server에 해당 값을 주고 원하는 값을 받는 작업을 해야 합니다. 그러므로 이 결과 값은 구글이 가지고 있는 자료의 정확성에 따라서 오차가 날 수 있습니다.

이 기능을 사용하기 위해서 mapAddress 이벤트 리스너를 activate 시켜야 합니다. 이 리스너가 액티브 상태이면 nearestAddress() 함수로 근처의 주소 데이터를 가지고 올 수 있습니다.

local function mapAddressHandler( event )
    -- handle mapAddress event here
    print( "The specified location is in: " .. event.city .. ", " .. event.country )
end
 
myMap:nearestAddress( latitude, longitude )
 
Runtime:addEventListener( "mapAddress", mapAddressHandler )

이 이벤트 객체는 다음과 같은 attributes를 가진 핸들러 함수를 리턴합니다.
event.street -- the street name
event.streetDetail -- the street number (or other specifier for location on the street)
event.city -- the city or town
event.cityDetail -- additional city information, such as neighborhood
event.region -- the state, province, or similar region within the country
event.regionDetail -- the region below the state level (e.g., the county, in the U.S.)
event.postalCode -- the postal code
event.country -- the country name
event.countryCode -- the standard country abbreviation

만약에 에러가 있으면 event.isError 에 true값이 할당 됩니다.

위 지도 이미지들은 각각 mapType을 normal, satellite, hybrid로 한 것입니다.
소스를 볼까요?

display.setStatusBar( display.HiddenStatusBar )
_W = display.contentWidth;
_H = display.contentHeight;

-- Create a native MapView (requires XCode Simulator build or device build)
-- You can create multiple maps, if you like...
--
myMap = native.newMapView( 0, 0, _W, _H )
--myMap.mapType = "normal" -- other mapType options are "satellite" or "hybrid"
--myMap.mapType = "satellite"
myMap.mapType = "hybrid"

 
-- The MapView is just another Corona display object, and can be moved or rotated, etc.
myMap.x = display.contentWidth / 2
myMap.y = 120
 
-- Initialize map to a real location, since default location (0,0) is not very interesting
myMap:setCenter( 37.331692, -122.030456 )
 
local function callMap()
        -- Fetch the user's current location
        -- Note: in XCode Simulator, the current location defaults to Apple headquarters in Cupertino, CA
        local currentLocation = myMap:getUserLocation()
        local currentLatitude = currentLocation.latitude
        local currentLongitude = currentLocation.longitude
       
        -- Move map so that current location is at the center
        myMap:setCenter( currentLatitude, currentLongitude, true )
       
        -- Look up nearest address to this location (this is returned as a "mapAddress" event, handled above)
        myMap:nearestAddress( currentLatitude, currentLongitude )
end
 
-- A function to handle the "mapAddress" event (also known as "reverse geocoding")
--
local mapAddressHandler = function( event )
        local locationText =
                "Latitude: " .. currentLatitude ..
                ", Longitude: " .. currentLongitude ..
                ", Address: " .. event.streetDetail .. " " .. event.street ..
                ", " .. event.city ..
                ", " .. event.region ..
                ", " .. event.country ..
                ", " .. event.postalCode
               
        local alert = native.showAlert( "You Are Here", locationText, { "OK" } )
end
 
-- A listener for the address lookup result
-- (This could also be a table listener on the map itself, in case you have more than one simultaneous map.)
Runtime:addEventListener( "mapAddress", mapAddressHandler )
 
timer.performWithDelay( 1000, callMap )         -- get current location after 1 second

첫 세줄은 status바를 없애고 화면 너비와 높이를 구한 부분입니다.
첫번째로 myMap이라는 변수에 mapView를 대입합니다. native.newMapview를 이용하는데요 이때 x,y,너비,높이 를 지정해서 표시되는 지도영역의 크기를 설정할 수 있습니다.
이 영역은 코로나의 display object로서 그 위치와 크기를 재설정 할 수 있고 여러개를 만들수도 있습니다. 경우에 따라서는 움직이게 할 수도 있겠구요. 만약에 필요하다면 말이죠.

그 다음은 setCenter 로 위도와 경도를 맞춰 줍니다. 그러면 그 위도와 경도가 화면 중앙에 표시 될 겁니다.

그 다음 callMap() 함수에는 현재 유저가 있는 위치와 현재 위치의 위도 경도를 구해서 이것으로 setCenter를 다시 해 줍니다.

그리고 가장 가까운 곳의 주소지를 얻어 옵니다.

그 다음 mapddressHandler 함수에서는 위도, 경도, 거리, 도시, 지역, 국가, 우편번호 등의 정보를 표시할 수 있도록 해 줍니다.

마지막에는 이 두 함수를 불러올 리스너들이 있습니다.

코로나 SDK의 mapView도 아주 간편하게 사용할 수 있네요.

이 소스를 기본으로 이것 저것 많이 시도해 보시면 좋을 것 같네요.

맥이 있어야 되고  xCode가 세팅 돼 있어야 되든가 아이폰 같은 애플 디바이스가 있어야 되는 한계가 있지만요.

그럼...