Corona SDK Native UI

코로나 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 같은 앱 광고도 넣을 수 있습니다.
공식적인 방법은 아니고 개발자들 끼리 방법을 개발해서 그 코드를 공유하고 있습니다.

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

그럼...