For my upcoming iPhone app I was looking for an easy way to add an info screen that describes the app and some of the features. I found a lot of mentions of \u201cuse UIWebView\u201d, but I couldn\u2019t find a comprehensive tutorial or list of steps. So here is a description of the implementation I came up with and some issues that I ran into.<\/p>\n
The view is relatively simple \u2013 all it has is an instance of UIWebView. Here is the header file:<\/p>\n
#import <UIKit\/UIKit.h>\n\n@interface InfoViewController : UIViewController <UIWebViewDelegate> {\n UIWebView *webView;\n}\n@property (nonatomic, retain) UIWebView *webView;\n\n@end<\/pre>\nIn the init-method, the UIWebView is instantiated and made to use the whole area:<\/p>\n
- (id) init {\n [super init];\n if (self) {\n \/\/set title to navItem\n [[self navigationItem] setTitle:@"Info"];\n\n \/\/ add webView\n CGRect bounds = [self.view bounds];\n bounds.size.height = bounds.size.height - 48; \/\/height for navItem \n webView = [[UIWebView alloc] initWithFrame: bounds];\n webView.delegate = self;\n \n [[self view] addSubview:webView];\n }\n return self;\n}<\/pre>\nI\u2019m not really happy with the \u201cmagical\u201c 48 pixels to account for the navItem, but at least it\u2019s working fine. (If you have a better way, please let me know!)<\/p>\n
Displaying Info Text<\/h2>\nDisplaying HTML<\/h3>\n
Once the view is initialized, displaying an HTML-page such as help.html is pretty simple:<\/p>\n
- (void) viewWillAppear:(BOOL)animated {\n [super viewWillAppear:animated];\n \n \/\/build a request to display help.html\n [webView loadRequest:[NSURLRequest requestWithURL:\n [NSURL fileURLWithPath:[\n [NSBundle mainBundle] pathForResource:@"help" ofType:@"html"]\n isDirectory:NO]]];\n}<\/pre>\nYou just have to add the file help.html to your project and make sure it is part of the target. It gets copied to the simulator or iPhone as part of the installation procedure. You can also include some CSS to properly style the html document (especially for aspects such as fonts or padding).<\/p>\n
Displaying local images<\/h3>\n
In order to display images in the html, you just have to reference like this in the html-file:<\/p>\n
<img src="ScreenshotTop.png" alt="Screenshot Top Part" width="288" height="214"\/><\/pre>\nIf you google for \u201cUIWebView local image\u201d, there are a lot of references to setting the baseURL of the UIWebView. I couldn\u2019t get this to work properly, but instead found that simple references to png-files just work (whereas jpg-files did not work). <\/p>\n
As with all images, they should be properly scaled to the dimensions that you want them to be displayed in order to avoid any re-sizing on the device which can take quite some time for screenshots.<\/p>\n
Displaying the view<\/h2>\nAdding an Info Button to the Navigation Bar<\/h3>\n
There is a standard info button (UIButtonTypeInfoLight) that is ideal for an info screen, but it can\u2019t be used directly in a navigation bar. I order to use this standard button, you have to wrap this button in an UIBarButtomItem:<\/p>\n
UIButton* infoButton = [UIButton buttonWithType: UIButtonTypeInfoLight];\n[infoButton addTarget:self action:@selector(showInfo) forControlEvents:UIControlEventTouchUpInside];\nUIBarButtonItem *infoBarButton = [[UIBarButtonItem alloc] initWithCustomView:infoButton];\n[self.navigationItem setRightBarButtonItem: infoBarButton animated:YES];\n[infoBarButton release];\n[infoButton release];<\/pre>\nShowing the info view<\/h3>\n
In order to show the view, you just initialize the InfoViewController and push it on the display stack:<\/p>\n
-(void) showInfo {\n if (!infoViewController) {\n infoViewController = [[InfoViewController alloc] init];\n }\n [[self navigationController] pushViewController:infoViewController animated:YES]; \n}<\/pre>\nHandling Links<\/h2>\n
When you include links in your html-file (such as to your website, to your product FAQ on the web or a mailto: your support email address), you want them to open in the corresponding app (and not in your UIWebView). In order to do that, you have to implement the UIWebViewDelegate protocol in your InfoViewController, especially the following method:<\/p>\n
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType; \n{\n if ((navigationType == UIWebViewNavigationTypeLinkClicked) || ([request.URL.scheme isEqualToString:@"mailto"])) {\n [[UIApplication sharedApplication] openURL:request.URL];\n return false; \/\/will open links in Safari or MailApp\n } else {\n return true;\n }\n} <\/pre>\nThis method is called whenever a request starts to be loaded in the UIWebView. It looks if is called because a link was clicked (NavigationTypeLinkClicked) or the URL scheme is \u201cmailto\u201d. If that\u2019s the case then we open that link in the \u201csharedApplication\u201d which is Safari (for web pages) or the MailApp (for mailto\u2019s).<\/p>\n","protected":false},"excerpt":{"rendered":"
For my upcoming iPhone app I was looking for an easy way to add an info screen that describes the app and some of the features. I found a lot of mentions of \u201cuse UIWebView\u201d, but I couldn\u2019t find a comprehensive tutorial or list of steps. So here is a description of the implementation I […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32],"tags":[],"class_list":["post-204","post","type-post","status-publish","format-standard","hentry","category-ios"],"_links":{"self":[{"href":"http:\/\/www.smartersoftware.de\/wordpress\/wp-json\/wp\/v2\/posts\/204","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.smartersoftware.de\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.smartersoftware.de\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.smartersoftware.de\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.smartersoftware.de\/wordpress\/wp-json\/wp\/v2\/comments?post=204"}],"version-history":[{"count":0,"href":"http:\/\/www.smartersoftware.de\/wordpress\/wp-json\/wp\/v2\/posts\/204\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.smartersoftware.de\/wordpress\/wp-json\/wp\/v2\/media?parent=204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.smartersoftware.de\/wordpress\/wp-json\/wp\/v2\/categories?post=204"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.smartersoftware.de\/wordpress\/wp-json\/wp\/v2\/tags?post=204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}