adsense4


[iPhone][MonoTouch] 6번째 예제: ReactionTime (전편) iPhone

정말 오랜만에 MonoTouch 예제를 올려봅니다.  이번 예제도 2번에 나누어 올려 보겠습니다.


왼쪽의 그림과 같은 간단한 게임을 만들어 보겠습니다.
원리는 녹색등이 켜졌을 때 얼마나 빨리 패달을 눌러 반응 시간을 측정하는 것입니다. 빨간등이 켜진 후 녹색등이 켜지는 간격을 랜덤하게 조정하여 재미를 주었습니다.

예제를 통해서 이전 예제에서 나왔던 UIButton과 UIImageView의 간단한 사용방법과 MonoTouch에서 NSTimer를 사용하는 방법을 알아보겠습니다. 랜덤의 경우 MonoTouch에서 Objective-C의 Randome함수가 아닌 C#의 Random클래스를 사용합니다. C#에서 제공하는 클래스를 사용하므로 새롭게 배울 필요가 없습니다.

1. MonoDevelop을 시작하여 새 솔루션을 만드는 것으로 시작합니다.

메뉴에서 File > New > Solution을 선택하여 솔루션을 만들 수 있습니다.

New Solution윈도우가 나타나면 프로젝트 템플릿으로서 "iPhone Utility Project"를 그림과 같이 선택하고 "ReactionTime"을 지정합니다. "Location"항목은 적당한 프로젝트 폴더를 지정하면 됩니다.
"Forward"버튼을 클릭하여 다음 단계로 진행하면 XCode의 "Utility Project"와 같이 어플리케이션 개발이 가능하도록 기본 솔루션을 생성해 줍니다. 작년 버젼까지만 해도 그림과 같은 프로젝트 템플릿을 지원하지 않았습니다. 그래서 수작업을 해야 했습니다만, 업그레이드된 버젼에선 다양한 템플릿 프로젝트를 지원해 주고 있어 좀 더 편하게 개발이 가능하게 되었습니다.

생성되면 기본으로 생성되는 파일 리스트입니다. XCode에서 생성되는 것과는 조금 차이가 있습니다. MainWindow.xib가 이름 그래도 메인 윈도우로서 역할을 합니다. 서브윈도우로서 MainView.xib가 존재 하며 대부분의 개발 작업이 여기서 이루어집니다. FlipsideView.xib는 기타 정보를 표현하는 서브윈도우로 사용됩니다.

 2. MainView.xib를 더블클릭, 인터페이스빌더를 실행시킵니다. 화면에 배치된 각 요소의 종류와 이름을 표시하는 윈도우와 아무것도 없는 MainView 윈도우입니다.
"Light Info Button"만 있는 MainView윈도우로부터 화면 설계를 시작합니다. 화면 설계에서 주의할 점은 "Light info Button"의 우선 순위(z-index)에 주의 하지 않으면 실행시 화면에 표시되지 않는 경우가 있습니다. 해결 방법은 화면에 배치하는 각 요소들이 "Light info Button"보다 앞에 위치시키면 간단히 해결됩니다.

Library윈도우를 선택합니다. 화면에 없는 경우 인터페이스빌더의 Tool - Library를 선택해 주면 됩니다.
UIImageView를 선택하여 마우스로 끌어다 MainView에 놓습니다.
끌어다 놓은 후 화면입니다.
현재 배치된 요소의 목록을 보면 아래 그림과 같습니다. 현재 "Light info Button"보다 추가한 UIImageView가 아래에 배치 되어 있습니다. 이 상태에서는 "Light info Button"을 화면에 표시 후에 UIImageView를 표현하기 때문에 경우에 따라 보이지 않게 됩니다.
버튼을 화면에 나타나도록 하기 위한 해결 방법은 아래 그림과 같이 "Light info Button"의 순서를 가장 아래에 위치 시키는 것입니다. 앞서 주의 사항에서 설명했던 내용입니다.
다음에 추가되는 모든 요소들의 위치는 "Light info Button"보다 앞서 표시 되도록 조정할 것입니다.

화면 설계에 필요한 이미지들을 솔루션에 등록을 해 줍니다.  솔루션 윈도우에서 오른쪽 버튼을 눌러 팝업 메뉴에서 Add - Add Files를 선택합니다.
파일 탐색기와 같은 화면에서 필요한 이미지를 선택하고 Open버튼을 클릭합니다. 하나 이상의 파일을 선택하는 방법은 "Command"버튼을 누른 상태에서 파일을 클릭해 주면 됩니다.
이미지들이 추가된 후의 솔루션 윈도우입니다.
솔루션에 등록해 준 것만으로는 컴파일 후 어플리케이션에서 사용할 수 없습니다. MonoDevelop에서 자동으로 이미지 파일을 실행 파일 디렉토리로 복사해 주지 않습니다. 컴파일과 동시에 복사 하기 위해서는 대상 이미지들을 선택한 후 팝업 메뉴를 실행합니다.
팝업 메뉴에서 그림처럼 Build Action - Content를 선택하여 지정합니다. 기본값은 Nothing입니다. Content로 지정된 리소스 파일들은 컴파일 시에 자동으로 어플리케이션 디렉토리로 복사됩니다. 이미지등을 사용할 때 꼭 주의 해야할 사항입니다.
각 이미지들을 인터페이스빌더에서 사용할 준비가 되었습니다.

앞에서 추가했던 UIImageView는 배경 이미지로서 설정하겠습니다. 인터페이스빌더 Tool - Inspector를 선택하면 해당 요소의 각종 정보를 편집할 수 있는 윈도우가 열립니다. UIImageView를 선택하고 Inspector에서 그림처럼 화면 전체로 크기를 설정합니다. 320 x 460 입니다.
다음은 "road.png"이미지를 지정해 줍니다. Inspector에서 Attributes탭을 선택합니다. Image항목에 "road.png"를 입력합니다.
Image View옆에 입력한 "road.png"가 표시됩니다.
그러나 화면에는 실제 이미지 대신에 "?" 표시만 나타납니다. 아직까지 인터페이스빌더와 MonoDevelop사이에 정보가 정확히 공유가 되지 않는 것 같습니다. 하지만 컴파일 후에 이미지 복사가 정상적으로 된다면 문제 없이 화면에 표시 됩니다.
다음은 신호등 이미지를 설정하겠습니다.  UIImageView를 끌어다 놓기로 배치합니다.
추가한 이미지의 크기를 다음과 같이 설정합니다.
이미지의 좌표는 (X:150, Y:0)이고 크기는 (W:9, H:32)입니다. 속성 탭에서 이미지를 "stopLightCable.png"로 지정합니다.
신호등의 몸체가 되는 이미지를 위해 같은 방법으로 UIImageView를 추가 합니다. 이미지의 좌표는 (X:59, Y:20), 크기는 (W:190, H:219)를 지정합니다. 
속성 화면에서 이미지로 "yellowLightSmall.png"을 지정하여 신호등을 완성합니다.
마지막으로 패달 이미지를 지정합니다. 패달은 사용자의 입력을 받는 이벤트가 필요하기 때문에 UIButton을 사용하겠습니다. Library윈도우에서 "Round Rect Button"을 찾아 이미지와 같은 방법으로 MainView에 배치합니다.
버튼은 기본값이 텍스트 버튼이므로 속성 윈도우에서 이미지를 사용하는 버튼으로 수정합니다.
버튼의 Type을 "Custom"으로 지정하고 Image속성에 "gasPedalSmall.png"로 지정합니다. 버튼의 좌표와 크기는 다음 그림과 같습니다.
그리고 "Light info Button"을 좌측 화면 아래로 이동하여 배치합니다. 모든 배치 작업이 끝난 화면은 다음과 같습니다.
화면 설계된 요소들을 참조하기 위한 Outlets과 이벤트를 받아서 처리하기 위한 Actions를 정의합니다. 코드에서 참조 하기 위해 반드시 필요한 작업입니다.
MainView.xib의 Inspector에서 MainView의 Identity를 선택하여 "gasPedalPressed" 이름으로 Action을 추가합니다. Actions에서 "+"버튼을 클릭하면 추가할 수 있습니다.
아래의 Outlets에서 "+"버튼을 클릭하여 코드 내에서 참조하기 위한 Outlet을 추가합니다. 이름은 "stopLight"이며 Type은 "UIImageView"로 지정합니다.
추가한 Outlet과 Action을 실제 각 요소와 매핑합니다. MainView의 Connections Inspector를 선택하면 다음과 같습니다.
추가한 "stopLight"와 "gasPedalPressed"가 보입니다. 먼저 Outlet을 매핑하겠습니다. 우측의 원을 마우스로 클릭한 후 드래그하여 원하는 요소를 지정하면 됩니다.  마우스를 드래그하면 화면처럼 선이 나타납니다. 선을 끌어서 해당 요소를 지정하는 것으로 매핑 작업은 끝입니다.

Action을 매핑하겠습니다. Action은 이벤트 처리를 위한 것이므로 Outlets와는 조금 다릅니다.
Outlets와 같이 마우스를 드래그하여 이벤트를 받기 위한 요소를 선택합니다. 선택하면 처리가 가능한 이벤트를 선택할 수 있는 팝업윈도우가 나타납니다. 팝업윈도우에서 원하는 이벤트를 선택해 줍니다.
버튼이 눌렸을 때 처리하기 위해 "Touch Up Inside"를 지정합니다. Outlets과 Action이 매핑된 Inspector는 다음과 같습니다.

프로그램에서 필요한 기본 화면은 이로서 완료 했습니다. 저장하고 인터페이스빌더를 종료합니다. 뒤에서 FlipsideView.xib를 위해 인터페이스빌더를 한번 더 사용할 것입니다.

인터페이스 빌더에서 지정한 Outlets와 Action은 랩퍼 클래스 MainView.xib.designer.cs파일에 멘버 변수와 메소드로서 자동으로 생성됩니다.

MainView.xib.designer.cs 소스
namespace ReactionTime {


// Base type probably should be MonoTouch.UIKit.UIViewController or subclass
[MonoTouch.Foundation.Register("MainViewController")]
public partial class MainViewController {

private MainView __mt_view;

#pragma warning disable 0169
[MonoTouch.Foundation.Export("showInfo")] ..... ①
partial void showInfo (MonoTouch.UIKit.UIButton sender);

[MonoTouch.Foundation.Connect("view")]
private MainView view {
get {
this.__mt_view = ((MainView)(this.GetNativeField("view")));
return this.__mt_view;
}
set {
this.__mt_view = value;
this.SetNativeField("view", value);
}
}
}

// Base type probably should be MonoTouch.UIKit.UIView or subclass
[MonoTouch.Foundation.Register("MainView")]
public partial class MainView {

private MonoTouch.UIKit.UIImageView __mt_stopLight;

#pragma warning disable 0169
[MonoTouch.Foundation.Export("gasPedalPressed")] .....②
partial void gasPedalPressed (MonoTouch.UIKit.UIButton sender);

[MonoTouch.Foundation.Connect("stopLight")] .....③
private MonoTouch.UIKit.UIImageView stopLight {
get {
this.__mt_stopLight = ((MonoTouch.UIKit.UIImageView)(this.GetNativeField("stopLight")));
return this.__mt_stopLight;
}
set {
this.__mt_stopLight = value;
this.SetNativeField("stopLight", value);
}
}
}
}
①은 "info Button"을 클릭한 이벤트를 처리하는 메소드가 정의 된 것입니다. 프로젝트 템플릿에의해 MainViewController.cs에 구현되어 있습니다.
②는 인터페이스빌더에서 추가한 Action인 "gasPedalPressed"메소드의 정의입니다. 구현하는 코드는 다음에 설명합니다.
③은 인터페이스빌더에서 추가한 Outlet인 "stopLight" 프로퍼티의 정의입니다. set/get으로 구현되는 것을 알 수 있습니다. 코드에서 stopLight이름으로 참조가 가능합니다.

오늘은 여기까지 포스팅하겟습니다.
후편에서는 반응 시간을 측정하기 위한 코드와 간단히 FlipsideView를 만들어 보겠습니다.

덤)
AppsAmuck의 예제를 MonoTouch를 이용하여 어제까지 전부 만들어 보았습니다.  실제 어플리케이션을 만들기에 약간 부족함이 없진 않지만, 초기 아이폰 등장과 함께 많이 참고가 되었던 예제들입니다. 물론 지금은 사용하지 않는 코드도 있지만 MonoTouch로 만들면서 현재의 SDK에 맞게 새로 만들었습니다. C#으로 아이폰 어플리케이션 개발에 관심이 있는 분들에겐 좋은 예가 되지 않을까 합니다.  지속적으로 포스팅 하겠습니다.




핑백




 

통계 위젯 (화이트)

67
50
400459

160x600스크래퍼

네이버Analysis