HTML
iOS: Using UIWebView to Create Help Screen For Your App
January 7, 2012
0

Using UIWebView is an efficient way to make an About screen, Help screen, or other sort of hard to layout. Consider how easy it is to lay out your ‘page’ in html, instead of having to build it using Interface Builder. You can even use JavaScript and add interactivity if you want.
You can even use the same code for your web page and app.

Locally Stored Files (Embedded in the App)

The process is simple. Create the html and include all the files (in the project, then load the html, using code such as:

	NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html" inDirectory:@"Help"];
	NSURL *url = [NSURL fileURLWithPath:path];
	NSURLRequest *request = [NSURLRequest requestWithURL:url];
        [m_webView loadRequest:request];

Above example assumes your HTML files and all its associated assets (such as images and stylesheet) are in a folder named Help. When adding these files into the project, I usually select the “Create Folder References For Any Added Folders” so that all the files inside that folder is added into the project.

Remote File

You can also load from a remote site, instead of embedding the HTML files into the app. Another extra benefit is that you can modify the HTML content any time you want, as opposed to having to submit a new version to iTunes. The code is something like this:

	NSString *urlAddressString = @"https://www.permadi.com/tutorial/ios-html-help-example/index.php";
        NSURL *url = [NSURL URLWithString:urlAddressString];
        NSURLRequest *request = [NSURLRequest requestWithURL:url];
        [m_webView loadRequest:request];

Fine Tuning

You should take into account is that if you load from the internet, sometimes the device may not have an internet connection, and in that case, you should have a fallback, otherwise user may see a blank screen and think your app is crap. The method that use to check for connection uses the Reachability utility class from Apple: http://developer.apple.com/library/ios/#samplecode/Reachability/

    Reachability* reachability = [Reachability reachabilityWithHostName:@"permadi.com"];
    NetworkStatus networkStatus = [reachability currentReachabilityStatus];


So the complete code looks like this:

    Reachability* reachability = [Reachability reachabilityWithHostName:@"permadi.com"];
    NetworkStatus networkStatus = [reachability currentReachabilityStatus];
    if(networkStatus == NotReachable)
    {
        // Load local version if there's no internet connection
        NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html" inDirectory:@"Help"];
        NSURL *url = [NSURL fileURLWithPath:path];
        NSURLRequest *request = [NSURLRequest requestWithURL:url];
        [m_webView loadRequest:request];
        //[m_webView setBackgroundColor:[UIColor clearColor]];
    }
    else
    {
        NSString *urlAddressString = @"https://www.permadi.com/tutorial/ios-html-help-example/index.php";
        NSURL *url = [NSURL URLWithString:urlAddressString];
        NSURLRequest *request = [NSURLRequest requestWithURL:url];
        [m_webView loadRequest:request];
        //[m_webView setBackgroundColor:[UIColor clearColor]];
    }

Transparent HTML That Shows Through App

If you want the UIWebView to have a transparent background (great in popup), then you should set the Background Color of the UIWebView as Clear Color and set it to non Opaque.

In addition, in the html side, set background-color of the body element to transparent.

<style type="text/css">
body
{
	background-color:transparent;
}
</style>

For this to work on iOS less than version 5, you should call this:

[m_webView setBackgroundColor:[UIColor clearColor]];

Yes, do this even if you already set the background color to Clear Color in the XCode Interface Builder.

Fitting Page into Phone

You can tell iOS to shrink your page to fit by for example:

	if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
	{
		[m_webView setScalesPageToFit:YES];
	}

Example

Attached is an example project that loads a page from the remote site. Download.
Click the i button on the top left to open the HTML view.
The project is made in XCode 4.2.