adsense4


[iPhone][MonoTouch] 8번째 예제 : Flickr KML iPhone

앞 예제에서 OpenUrl메소드를 이용해 전화를 거는 기능을 구현해 봤습니다. 이번에는 아이폰의 기본 어플리케이션인 구글맵 어플리케이션을 실행시키고 플리커 서비스에서 KML파일을 표시하는 어플리케이션을 구현해 보겠습니다.
구글맵 어플리케이션을 실행 시키는 방법은 전화를 거는 것과 마찬가지로 URI형태로 "maps://" 스킴(프로토콜)을 사용하거나 직접 구글맵 URL"http://maps.google.com"을 지정해 주면 됩니다. 참고로 메일 어플리케이션은 "mailto:"를 사용하며, SMS문자를 보내기 위해서는 "sms:"를 사용하면 됩니다.

새 솔루션을 생성하는 것으로 시작합니다. Utility형으로 "FlickrKML"이름의 솔루션을 생성합니다.
생성된 기본 솔루션 목록입니다.
어플리케이션 아이콘과 어플리케이션에서 사용할 이미지를 프로젝트에 추가합니다. 오른쪽 버튼의 팝업 메뉴에서 Add Files를 선택하여 추가합니다.
추가할 파일은 flickrKML.png와 globe.png 두개의 이미지입니다.
한번에 복수의 파일을 선택하기 위해서는 CMD(Command)키를 동시에 누르고 해당 파일을 선택해 주시면 됩니다.
추가한 파일에 대해 컴파일 옵션을 지정합니다. 이미지 파일을 선택하고 오른쪽 버튼을 눌러 팝업 메뉴를 실행합니다. "Build Action"메뉴의 "Content"를 지정해 주는 것으로 끝납니다.
아이폰의 바탕화면에 보여질 어플리케이션 아이콘을 지정합니다. 프로젝트의 Options윈도우에서 화면과 같이 "iPhone Application"을 선택하여 나온 화면의 "Application Icon" 항목에 globe.png이미지를 추가합니다.
화면에서 파일 선택 버튼을 누르면 다음 화면이 나타납니다.
globe.png파일을 선택합니다. 설정이 완료된 결과는 화면과 같습니다.
"OK"버튼을 눌러 종료합니다.

어플리케이션의 MainView를 만들겠습니다. 프로젝트에서 MainView.xib를 더블클릭하여 인터페이스빌더를 실행합니다. 제일 먼저 MainView의 배경색을 바꾸겠습니다. 화면에서 보는 것처럼 MainView를 선택하고 Attributes윈도우를 실행합니다. 많은 항목 중에서 "Background"가 회색으로 되어 있는 것을 검은색으로 지정합니다. 아래 화면과 같습니다.
구글맵 어플리케이션 실행을 알리기 위한 버튼을 추가하겠습니다. Library에서 버튼을 선택하여 MainView에 추가 하고, Attribute윈도우의 "Title"에 "Load Flickr KML"을 지정합니다. 아래 화면을 참고 해 주세요.
추가한 버튼의 밑에 이미지를 추가하겠습니다. 그러기 위해서는 Library에서 ImageView를 선택하여 MainView의 적당한 위치에 적당한 크기로 져다 놓습니다. 크기는 가능한 이미지보다 크게 지정하면 되겠습니다.
이미지뷰를 선택한 Library화면입니다.
이미지뷰를 위치시킨 MainView 디자인 화면입니다.
Attributes윈도우의 "Image"항목에 "flickrKML.png"이미지를 지정합니다. 디자인 화면에는 "?"의 조그만 상자로 표시 될 것입니다. MonoDevelop과 인터페이스빌더가 아직 연동이 안되는 문제입니다. 파일 이름이 틀리지 않는다면 문제 없습니다.

버튼이 눌렸을 때 처리하기 위한 Action을 추가합니다. MainView의 Identity윈도우에서 이름을 "loadFlickrKML"이름으로 Action을 추가합니다.
Connections윈도우에서 loadFlickrKML을 버튼에 화면과 같이 연결합니다.
버튼에서 처리 가능한 이벤트 목록이 나타납니다. "Touch Up Inside"이벤트를 지정하여 줍니다. 버튼을 눌렀을 때 처리하기 위한 이벤트입니다.
지정된 후의 Connections윈도우 결과 화면입니다.
MainView.xib를 저장합니다.

다음은 "info Button"이 눌렀을 때 나타나는 FlipsideView.xib파일을 인터페이스빌더로 작업하겠습니다. FlipsideView 디자인 화면에서 "Title"을 더블클릭하여 편집 모드로 들어갑니다. 화면은 편집이 가능한 화면입니다.
Title을 "Flickr KML"로 바꿔 주고 저장한 후 인터페이스빌더를 종료합니다.
인터페이스빌더를 이용한 화면 디자인 작업은 끝났습니다. 지금부터는 실행에 필요한 코드를 만들어 보겠습니다. 간단하므로 전체 코드를 보며 설명합니다.
 
MainView.cs 소스:

using MonoTouch.UIKit;
using System.Drawing;
using MonoTouch.Foundation;
using System;

namespace FlickrKML
{
public partial class MainView : UIView
{
public MainView (IntPtr handle) : base(handle)
{
}

public override void Draw (RectangleF rect)
{
//Drawing code
}

partial void loadFlickrKML (UIButton sender) .... ①
{
string kmlURL = "maps://?f=q&hl=en&geocode=&q=http%3A%2F%2Fapi.flickr.com%2Fservices%2Ffeeds%2Fgeo%2Fkr%2F%26format%3Dkml_nl%26ie%3DUTF8%26z%3D1"; .... ②

if(UIApplication.SharedApplication.OpenUrl(new NSUrl(kmlURL))) .... ③
{
Console.WriteLine("OK!");
} else
{
Console.WriteLine("지원하지 않습니다.");
}
}

}
}
① Action 함수를 추가합니다.
편집기에서 "partial"을 입력하면 화면에 보이는 것처럼 현재 정의 가능한 Action목록을 제공해 줍니다. 예제에선 "loadFlickrKML"이 나타납니다. 선택하면 함수가 정의 된 코드가 추가됩니다. 이로서 화면에서 버튼을 클릭시 실행될 함수가 준비 되었습니다.

② 구글맵 어플리케이션을 실행하기 위한 URL입니다. 구글맵에 flickr의 KML을 전달하기 위한 내용을 URL인코딩하여 전달하고 있습니다.

③ 전화걸기 예제에서 설명한 UIApplication.SharedApplication.OpenUrl()에 ②의 값을 NSUrl 객체로 전달함으로서 구글맵 어플리케이션을 실행시킵니다. 실행 결과가 bool형으로 반환되기 때문에 결과를 판단하여 간단히 내용을 출력합니다. 안타깝게도 구글맵 어플리케이션은 시뮬레이터에선 실행이 안됩니다.

여기까시 작업하고 컴파일하고 실행시켜 봅니다. 화면과 같은 결과가 나오면 성공입니다.
"info Button"을 클릭하면 다음 화면이 보여집니다. "Done"버튼을 클릭하면 실행 화면으로 전환됩니다.
다음 화면은 실기에서 구글맵 어플리케이션이 실행 된 화면입니다.

이상으로 AppsAmuck의 MonoTouch 8번째 예제를 마칩니다.
샘플코드 : FlickrKML.zip





 

통계 위젯 (화이트)

625
99
399202

160x600스크래퍼

네이버Analysis