adsense4


[iPhone][MonoTouch] 13번째 예제 : MyGoogle iPhone

오늘은 UIWebView를 사용하여 구글 모바일 사이트에 접근 하는 법과 HTML파일을 읽어 UIWebView에 표시하는 것을 살펴 보겠습니다.

새 솔루션을 "MyGoogle"이름으로 Utility프로젝트를 선택하여 만듭니다.
프로젝트에 파일을 추가 합니다. 팝업메뉴에서 Add - Add Files를 선택합니다.
파일 목록에서 "about.html"을 선택하여 추가합니다.
추가한 후의 파일 목록 화면입니다. 추가한 파일에 대해서 컴파일 옵션을 "Content"로 설정 합니다. 방법은 앞의 예제를 참고하세요.
"MainView.xib"를 더블클릭하여 인터페이스빌더를 실행합니다. Library윈도우에서 "UIWebView"객체를 선택하여 MainView의 전체 크기로 설정합니다.
화면과 같이 구성합니다. 주의 할 점은 뷰의 크기와 같은 크기로 UIWebView를 설정하기 때문에 "info Button"이 보이지 않게 됩니다. 이유는 "info Button"보다 순서가 늦기 때문입니다.
"info Button"을 "UIWebView"위에 표시하기 위해서 다음과 같이 합니다. 객체 목록 윈도우에서 "UIWebView"를 선택하여 "info Button"보다 순서가 앞에 있도록 조정해 줍니다. 다음 화면과 같이 순서가 조정이 되면 됩니다.
"info Button"의 타입이 현재 "Light"이기 때문에 구글같이 바탕이 흰색인 사이트의 경우 잘 보이 않게 됩니다. "info Button"의 Attributes윈도우에서 타입을 "info Dark"로 변경해 줍니다. "info Dark"는 버튼의 배경색을 짙은 회색으로 지정해 주기 때문에 조금은 잘 보이게 됩니다. 물론 배경이 검은색에 가까운 경우는 잘 안보이게 됩니다.
다음은 "UIWebView"를 코드에서 접근하기 위해 Outlet을 선언합니다. MainView와 MainViewController 두군데에서 선언이 가능한데 예제에서는 MainViewController에 정의 해 주겠습니다. 뷰의 로드가 완료된 시점을 알려주는 이벤트(ViewDidLoad)를 사용하기 위해서 입니다. MainViewController의 Identity윈도우에서 Outlet에 "webView"이름으로 정의 합니다. 타입은 "UIWebView"로 설정해 줍니다.
"webView"를 화면의 "UIWebView"와 연결해 줍니다. MainViewController의 Connections윈도우에서 연결 작업을 해 주거나 객체 목록 윈도우에서 File's Owner를 선택한 후 오른쪽 버튼을 눌러 열린 팝업 화면에서 연결 작업을 해 줍니다.
File's Owner의 팝업 윈도우입니다.
저장을 하고 종료합니다.
MainView.xib.designer.cs파일을 편집기로 열어 보면 추가된 Outlet에 대한 정의가 되어 있음을 알 수 있습니다.
	public partial class MainViewController {
....
private MonoTouch.UIKit.UIWebView __mt_webView;
...
[MonoTouch.Foundation.Connect("webView")]
private MonoTouch.UIKit.UIWebView webView {
get {
this.__mt_webView = ((MonoTouch.UIKit.UIWebView)(this.GetNativeField("webView")));
return this.__mt_webView;
}
set {
this.__mt_webView = value;
this.SetNativeField("webView", value);
}
}
....
}
"FlipsideView.xib"파일을 인터페이스 빌더로 열고 "UIWebView"를 추가 합니다. 추가하는 방법은 "MainView.xib"의 방법과 같습니다. Navigation Bar의 공간을 제외한 뷰의 전체 크기로 "UIWebView"를 추가합니다. "Title"을 "MyGoogle"로 변경합니다.
FlipsideView의 경우는 "UIWebView"가 Navigation Bar보다 순서가 뒤입니다. 화면과 같은 순서의 객체 목록이 아니라면 "UIWebView"화면 위로 Navigation Bar가 표시되게 됩니다. 객체의 순서에 다시한번 조심하세요.
다음은 "UIWebView"와 연결할 Outlet을 선언합니다. 이번에도 FlipsideViewController에 선언하겠습니다. FlipsideViewController의 Identity윈도우에서 "webView"이름으로 "UIWebView"타입의 Outlet을 추가합니다.
Connections윈도우에서 추가된 "webView"와 화면의 "UIWebView"를 연결해 줍니다. 화면과 같이 됩니다.
다음은 객체 목록 윈도우에서 "File's Owner"를 선택하고 오른쪽 버튼을 눌러 팝업 윈도우를 표시한 화면입니다.
저장하고 인터페이스빌더를 종료합니다. FlipsideView.xib.designer.cs을 열고 "webView"가 선언된 것을 확인 할 수 있습니다.
	public partial class FlipsideViewController {
...
private MonoTouch.UIKit.UIWebView __mt_webView;

...
[MonoTouch.Foundation.Connect("webView")]
private MonoTouch.UIKit.UIWebView webView {
get {
this.__mt_webView = ((MonoTouch.UIKit.UIWebView)(this.GetNativeField("webView")));
return this.__mt_webView;
}
set {
this.__mt_webView = value;
this.SetNativeField("webView", value);
}
}
}
먼저 FlipsideViewController.cs에 코드를 작성하겠습니다. "UIWebView"에 HTML을 표시하기 위해서 직접 파일을 읽어 들여 NSData형으로 전달하는 방법을 적용합니다.

FlipsideViewController.cs source :

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


namespace MyGoogle
{

public partial class FlipsideViewController : UIViewController
{
public FlipsideViewController (string nibName, NSBundle bundle) : base(nibName, bundle)
{
}

public override void ViewDidLoad () .... ①
{
base.ViewDidLoad ();
View.BackgroundColor = UIColor.ViewFlipsideBackgroundColor;
//
UINavigationBar navBar = (UINavigationBar)this.View.Subviews[0]; .... ②
UINavigationItem navItem = navBar.Items[0]; .... ③

Console.WriteLine("Title = {0}", navItem.Title);
navItem.Title = "MyGoogle"; .... ④

this.webView.UserInteractionEnabled = true; .... ⑤

String filePath = NSBundle.MainBundle.PathForResource("about", "html"); .... ⑥
Console.WriteLine("filePath = {0}", filePath);
NSData data = NSData.FromFile(filePath); .... ⑦
NSUrl baseUrl = NSUrl.FromString("http://neojjang.egloos.com"); .... ⑧
this.webView.LoadData(data, "text/html", "UTF-8", baseUrl); .... ⑨
}

/*
// Override to allow orientations other than the default portrait orientation.
public override bool ShouldAutorotateToInterfaceOrientation (UIInterfaceOrientation toInterfaceOrientation)
{
// Return true for supported orientations
return (InterfaceOrientation == UIInterfaceOrientation.Portrait);
}
*/

public override void DidReceiveMemoryWarning ()
{
// Releases the view if it doesn't have a superview.
base.DidReceiveMemoryWarning ();

// Release any cached data, images, etc that aren't in use.
}

public override void ViewDidUnload ()
{
// Release any retained subviews of the main view.
// e.g. this.myOutlet = null;
}

partial void done (UIBarButtonItem sender)
{
if (Done != null)
Done (this, EventArgs.Empty);
}

public event EventHandler Done;
}
}
① ViewDidLoad()이벤트는 xib의 뷰가 로드된 후에 필요한 처리를 할 수 있도록 제공합니다. "about.html"을 읽어 들여 화면에 표시하는 작업을 하게 됩니다.
② ②〜④는 Navigation Bar의 Title항목을 프로그램적으로 수정하는 코드입니다. this.View.Subviews는 뷰에 등록된 하위 뷰들을 배열로 저장하고 있는 속성입니다.
this.View.Subviews[0]는 0번째 뷰, 즉 제일 처음 등록된 뷰의 객체를 반환합니다. UINavigationBar로 형변환을 했습니다.
③ NavigationBar에 등록된 하위 아이템들 중에 0번째 아이템을 반환해 줍니다.
④ NavigationBar의 Title을 가리키는 아이템이므로 Title을 필요한 문자열로 변경합니다. 앞선 Utility형 프로젝트에 모두 똑같이 적용이 되는 코드입니다.

⑤ UIWebView.UserInteractionEnabled 속성은 사용자로부터 이벤트를 받을 수 있게 할 것인지를 결정합니다.
true이면 이용자의 터치에 반응하여 처리합니다. 반대로 false이면 어떠한 터치에도 반응하지 않게 됩니다.

⑥ NSBundle.MainBundle은 어플리케이션 디렉토리에 존재하는 NSBundle객체입니다.
"about.html"파일도 MainBundle을 통해 접근합니다. PathForResource()메소드는 파라미터에 해당하는 리소스가 존재하는 경로를 반환합니다.
⑦ ⑥에서 구한 경로의 파일을 NSData형으로 읽어 들입니다.
Objective-C에서 NSData는 바이트형 버펴를 다루기 위해 사용됩니다.

⑧ NSUrl 객체를 만듭니다. 다음에서 데이터를 로딩하기 위한 베이스 URL로 사용됩니다.
⑨ UIWebView.LoadData()는 NSData형 데이터를 주어진 MIME타입과 인코딩(UTF-8)으로 읽어 들여 렌더링하여 표시합니다.

다음은 MainViewController.cs에 코드를 작성합니다. 여기서는 직접 URL을 이용하여 웹서버로부터 페이지를 표시하겠습니다.

MainViewController.cs source :

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

namespace MyGoogle
{
public partial class MainViewController : UIViewController
{

public MainViewController (string nibName, NSBundle bundle) : base(nibName, bundle)
{
// Custom initialization
}

public override void ViewDidLoad () .... ①
{
base.ViewDidLoad ();

//set userInteractionEnabled to true so the user can click links
this.webView.UserInteractionEnabled = true; .... ②

//[webView loadRequest:[[NSURLRequest alloc] initWithURL:[[NSURL alloc] initWithString:@"http://www.google.com"]]];
this.webView.LoadRequest(new NSUrlRequest(new NSUrl("http://www.google.co.kr"))); .... ③
}

...
}
}
① ViewDidLoad()이벤트는 xib의 뷰가 로드된 후에 필요한 처리를 할 수 있도록 제공합니다.
② 화면에서 사용자의 클릭등의 이벤트를 처리 할 수 있도록 합니다. this.webView.UserInteractionEnabled를 true로 설정합니다.
③ UIWebView.LoadRequest()는 NSUrlRequest를 이용하여 웹사이트에 접속하여 결과를 화면에 표시합니다.
NSUrlRequest는 NSUrl객체를 생성자로 받아서 웹요청에 필요한 객체를 생성합니다.

코드를 저장하고 컴파일 한 후 시뮬레이터에서 실행시켜 봅니다. 실행 결과 화면입니다.
오늘은 UIWebView를 사용하는 간단한 방법을 알아 봤습니다.
샘플 코드 : MyGoogle.zip





 

통계 위젯 (화이트)

67
50
400459

160x600스크래퍼

네이버Analysis