2009년 10월 11일
[iPhone][MonoTouch] 다섯번째 샘플 : Count Me In (1)
이번 예제는 UIButton, UILabel 그리고 UIImageView의 간단한 사용 방법에 대해서 배울 수 있습니다. 이전 예제와 크게 다른 것이 없죠.Appsamuck 샘플 : CountMeIn
예제에 대해서 설명을 하면, (+)버튼을 클릭하면 상단의 숫자가 1씩 999까지 증가하고, (-)버튼을 클릭하면 반대로 1씩 0까지 감소합니다. 이전 예에서도 있던 (i)버튼을 클릭하면 화면을 전환하여 다른 뷰를 보여줍니다.
화면의 UI구성은 Interface Builder에서 모두 이루어지므로 코드의 부담은 없습니다. 다만 MonoTouch의 버그인지 모르겠지만, 뷰의 크기가 제대로 반영되지 않는 것 같습니다. 해결하기 위해 원 예제에는 없는 위치 조정 코드를 추가 했습니다.
어플리케이션에 필요한 이미지들입니다. 왼쪽부터 icon.png , backgroundPattern.png, iconGreenAdd.png, iconRedSubtract.png 이름으로 다운 받아 둡니다.
1. MonoDevelop을 실행합니다. "CountMeIn"이름으로 새 솔루션을 생성합니다.
2. 솔루션에 뷰 컨트롤러를 관리하기 위한 디렉토리를 생성합니다.
iPhone그룹에서 "View Interface Definition with Controller" 타입을 선택합니다. "RootViewController" 이름을 지정하고 생성합니다.
다음 그림과 같이 3개의 파일이 생성됩니다.
같은 방법으로 "MainViewController"와 "FlipsideViewController" 이름으로 뷰 컨트롤러를 추가합니다. 추가 된 최종 화면은 다음과 같습니다.
4. Interface Builder를 실행하여 MainWindow.xib를 열고 서브 뷰로서 RootViewController를 연결합니다.
이제 RootViewController를 Window의 서브뷰로 등록하기 위해 Main.cs를 편집기로 읽어 들입니다.
// The name AppDelegate is referenced in the MainWindow.xib file.
public partial class AppDelegate : UIApplicationDelegate
{
// This method is invoked when the application has loaded its UI and its ready to run
public override bool FinishedLaunching (UIApplication app, NSDictionary options)
{
// If you have defined a view, add it here:
// window.AddSubview (navigationController.View);
window.AddSubview(rootViewController.View);
window.MakeKeyAndVisible ();
return true;
}
// This method is required in iPhoneOS 3.0
public override void OnActivated (UIApplication application)
{
}
}5. MainViewController.xib를 Interface Builder에서 열고 화면 설계를 합니다. 먼저 다운 받아 두었던 이미지들을 솔루션에 추가합니다. 화면에서 보는 것과 같이 이미지의 빌드 옵션을 "Content"로 설정합니다. 
처음 추가 했을 때의 빌드는 "Nothing"으로 되어 있습니다. 말그대로 아무것도 하지 않기 때문에 빌드 시에 어플리케이션 폴더로 복사되지 않습니다. 반드시 설정을 변경해 주도록 합니다. 개발 환경(MonoDevelop)에서 자동으로 처리해 주지 않기 때문에 프로그램에 영향을 주는 리소스는 주의해야 합니다.
MainViewController.xib에 다음과 같이 화면 설계를 합니다.
| Objects | 속성 |
| UIImageView | Image : backgroundPattern.png Size : x=0, y=0, width=320, height=460 |
| UITextField | type : Bezel Style Size : x=20, y=20, width=280, height=118 |
| UILabel | Text : 9999 Size : x=30, y=30, width=261, height=100 |
| UIButton | Type : Custom Buttom Image : iconGreenAdd.png Size : x=20, y=288, width=100, height=100 |
| UIButton | Type : Custom Buttom Image : iconRedSubtract.png Size : x=200, y=288, width=100, height=100 |
6. MainViewController의 화면 표시와 각 이벤트에 대한 코드를 추가합니다.
RootViewController.xib.cs파일을 편집기로 읽어 들입니다. 클래스 RootViewController의 멤버로서 MainViewController를 지정합니다.
public partial class RootViewController : UIViewController
{
MainViewController mainViewController;
...ViewDidLoad() 함수를 override하여 생성합니다. 함수에 MainViewController를 생성하고 서브 뷰로서 추가해 줍니다.
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
mainViewController = new MainViewController();
this.View.InsertSubviewBelow(mainViewController.View, infoButton);
}여기까지 작업으로 메인 뷰를 화면에 표시하는 것까지 완료 했습니다. 다음엔 FlipsideViewController의 간단한 화면 설계와 실제 숫자를 카운트하는 동작을 추가해 보겠습니다.
---
MonoTouch와 MonoDevelop의 업데이트가 있었습니다. 해당 홈페이지를 참고하세요.
# by | 2009/10/11 12:24 | iPhone | 트랙백 | 핑백(1) | 덧글(0)
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]
... 지난 설명에 이어서 마무리 해 봅니다.[iPhone][MonoTouch] 다섯번째 샘플 : Count Me In (1) 7. FlipsideViewController.xib파일을 Interface Builder로 열고 화면 설계를 하죠. 간 ... more