iOS Web Page Local

Posted by On 1月 30, 2014 0 Comment

As a strategy, we sometimes use local html as smart phone page.
The nice thing is easy to arrange.
Compare to native application, web page layout is easier for designer.
And share resource with several platforms(Android, iOS, etc…).

Prepare Local HTML file

This is my sample HTML file

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=yes" />
<title>Title</title>
</head>
<body>
<h1>Smart Phone Web</h1>
<p>This is Test</p>
</body>
</html>

I saved this file under project.
html file

Objective-C code

@interface InternalHTMLViewController ()
@property (nonatomic) UIWebView *web;
@end

@implementation InternalHTMLViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Web view
    self.web = [[UIWebView alloc] initWithFrame:self.view.bounds];
    self.web.scalesPageToFit = YES;  // Enable pinch out or not
    self.web.delegate = self;
    self.web.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;  // This is key
    [self.view addSubview:self.web];
    
    // Load web page
    NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"]];
    NSURLRequest *req = [NSURLRequest requestWithURL:url];
    [self.web loadRequest:req];
}

#pragma mark - UIWebViewDelegate
-(void)webViewDidStartLoad:(UIWebView*)webView {
    [UIApplication sharedApplication].networkActivityIndicatorVisible = YES;  // Indicator on
}

-(void)webViewDidFinishLoad:(UIWebView*)webView {
    [UIApplication sharedApplication].networkActivityIndicatorVisible = NO;   // Indicator off
}
@end

To fix orientation problem, that is 

self.web.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;

Result

Portrait
portrait html
Landscape
Landscape

Smart phone web site is another topic. I need to learn.

Ref

TOPICS