Contents

Home Study
✔ Viewer
Develop
2015.01.02 23:23

[ios] UIWebView를 이용한 로컬 HTML 파일 표시

hooni
Views 1340 Comment 0
Atachment
Attachment '2'
?

Shortcut

PrevPrev Article

NextNext Article

Larger Font Smaller Font Up Down Go comment Print
?

Shortcut

PrevPrev Article

NextNext Article

Larger Font Smaller Font Up Down Go comment Print
OS 앱 내부에서 웹 페이지를 통해 정보를 전달하려면 UIWebView를 사용하면 된다. URL만 전달하면 UIWebView가 알아서 간단하고 멋지게 웹 페이지를 표시해준다. 그럼, 조건을 하나 추가해서 인터넷이 안되는 오프라인 상태에서도 웹 페이지를 표시하려면 어떻게 해야될까? 답은 간단하다. 필요한 파일들을 전부 앱에 포함시키면 된다. HTML, 자바스크립트, 스타일시트나 이미지 할 것 없이 모두 앱에다 추가하고 UIWebView를 사용하면 된다.

 아래 샘플 프로젝트는 트위터의 부트스트랩(Bootstrap) 프레임워크와 jQuery를 사용하는 간단한 웹 사이트를 UIWebView를 통해 표시하고 있다. 텍스트들은 아무 의미가 없고, Learn more 버튼을 터치하면 다른 페이지로 이동하고 Alert은 알림을 표시하며 Reload는 화면을 새로 고친다. 온라인/오프라인 가리지 않고 잘 작동한다.

screen.jpg


# 상대 경로를 이용한 링크
특별한 기술이 필요한 건 아니다. 앱에 포함시킬 html 페이지에서 참조되는 모든 로컬 파일들은 상대 경로로 지정한다는 사실만 기억하면 된다. 하위 폴더의 파일에는 "폴더 명/"을, 상위 폴더의 파일에는 ".../" 를 붙여준다. 샘플 프로젝트의 www 폴더에는 두 개의 html 파일과 부트스트랩 폴더가 포함되어 있다. index.html을 살펴보면 알겠지만 각 파일의 경로가 상대 경로를 사용한다는 것을 제외하면 웹 서버에 호스팅되는 일반적인 html 파일과 다를 게 없다.(호스팅되는 html 파일들도 상대경로를 쓴다..-_-;)

새 프로젝트 생성 및 폴더 추가
Single View Application 템플릿을 이용해 새 iOS 프로젝트를 생성한다. 기본으로 생성되는 ViewController 클래스에 UIWebView 아울렛을 추가하고 UIWebViewDelegate 메시지들을 추가해준다. NIB 파일에도 UIWebView를 추가하고 아울렛과 델리게이트를 지정해준다.

#import <UIKit/UIKit.h>
 
@interface ViewController : UIViewController <UIWebViewDelegate>
 
@property (nonatomic, strong) IBOutlet UIWebView *webView;
 
@end

프로젝트 네비게이터에서 프로젝트를 선택하고 우 클릭, "Add Files to ..."를 선택한다. 준비한 www 폴더를 선택하고 Destination에 체크, Folders 옵션은 "Create folder references for any added folders"를 선택한다. Add to targets도 체크한다. 프로젝트에 파란색 www 폴더가 추가된다.

# UIWebView 설정
viewDidLoad 메시지에 index.html를 요청하는 코드를 추가한다. 번들에 포함된 html 파일의 경로를 이용한 NSURLRequest 객체를 생성해야 한다. 파일 경로 지정 시 추가한 디렉터리 명을 지정해줘야 한다. 기억해 두자.

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.webView.scrollView.bounces = NO;
    
    NSString *indexFilePath =
        [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"
            inDirectory:@"www"];

    NSURL *indexUrl = [NSURL fileURLWithPath:indexFilePath];
    NSURLRequest *request = [NSURLRequest requestWithURL:indexUrl];
    
    [self.webView loadRequest:request];
}


# 하이브리드 애플리케이션?
샘플 앱의 화면을 스타일시트를 통해 iOS 기본 UI와 완벽히 똑같이 변경했다고 상상해보자. 사용자가 네이티브 앱 화면인지 웹 화면인지 구분을 할 수 있을까? 실제 PhoneGap과 같은 대다수의 하이브리드 앱 개발 프레임워크들이 이런 방식을 사용한다. 샘플 프로젝트와 원리와 동일하다. HTML/CSS로 이루어진 뷰와 네이티브 코드로 이루어진 컨트롤러 사이를 웹 엔진(= UIWebView)가 연결해주는 방식이다. 샘플이 너무 간단해서 믿기지 않겠지만 사실이다. 샘플 앱에서 "Reload" 버튼을 터치하면 네이티브 앱이 어떤 식으로 반응하는지 확인해보길 바란다.

[출처] http://deeplu.blogspot.kr/2013/03/ios-uiwebview-html.html

Facebook Twitter Google Pinterest KakaoStory Band
Up Down Go comment Print
Select Editor
?
Write with WYSIWYG Close
List of Articles
No. Category Subject Author Date Views
153 Etc 이클립스(Eclipse) 유용한 단축키 ㅋㅋ hooni 2013.04.23 21839
152 Develop [doc] Json Framework 설치와 사용 file hooni 2013.04.23 21960
151 PPT [ajax] 크로스 도메인(Cross Domain) 이슈 해결 방안 file hooni 2013.04.23 21979
150 System/OS 컴파일러 수업 자료(교재 : 컴파일러 입문) file hooni 2003.04.23 22073
149 Develop [iphone] 화면 전환 Portrait & Landscape Mode hooni 2013.04.23 22361
148 System/OS [mac] 맥(OSX)에서 root 패스워드 설정하기 hooni 2013.04.23 22630
147 Develop [vb] 문자열에서 태그 제거함수 (Visual Basic) file hooni 2013.04.23 22678
146 Etc 영어공부에 도움될만한 사이트 모음 hooni 2013.05.14 22692
145 Algorithm Polynomial time 이란? ㅋㅋ hooni 2013.04.23 22785
144 Develop 밸런싱 로봇.. 최종.. (관련 논문도 첨부) ㅋㅋ file hooni 2013.04.23 22877
143 PPT [doc] 정보보호이론 강의자료 (중앙대꺼..) 2 file hooni 2013.04.23 22878
142 Develop [ios] UILabel top alignㅎㅎ hooni 2013.04.23 22893
Write
Board Pagination Prev 1 ... 81 82 83 84 85 86 87 88 89 90 ... 98 Next
/ 98