UIWebView: display image at boot

Question

In my storyboard, I have a view with a UIWebView that fills the entire area except from the tab and navigation bar. The controller for presentation implements the UIWebViewDelegate protocol. The controller is installed as a delegate for UIWebView:

#pragma mark - UIWebViewDelegate - (void) webViewDidStartLoad:(UIWebView *)webView { NSLog(@"webViewDidStartLoad"); } - (void) webViewDidFinishLoad:(UIWebView *)webView { NSLog(@"webViewDidFinishLoad"); } 

While the UIWebView is loading, I will show a black background with an image indicating that it is loading. How can i do this?

EDIT1: I am trying to add a default ActivityIndicatorView instead of a static image. But it just gives me a black background with a little white area. What is the problem?

 UIImageView *loadingImageView = [[UIImageView alloc] initWithFrame:webView.frame]; UIActivityIndicatorView *spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray]; UIImage *spacer = [UIImage imageNamed:@"spacer"]; UIGraphicsBeginImageContext(spinner.frame.size); [spacer drawInRect:CGRectMake(0,0,spinner.frame.size.width,spinner.frame.size.height)]; UIImage* resizedSpacer = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); loadingImageView.image = resizedSpacer; [loadingImageView setBackgroundColor:[UIColor blackColor]]; [loadingImageView setContentMode:UIViewContentModeCenter]; self.loadingImageView = loadingImageView; 

Answer 1

In your controller .h

 @property (nonatomic, retain) UIImageView *loadingImageView; 

In your .m controller

 @synthesize loadingImageView; - (void)viewDidLoad { ... UIImageView *theLoadingImageView = [[UIImageView alloc] initWithFrame:webView.frame]; theLoadingImageView.image = [UIImage imageNamed:@"your_image.png"]; self.loadingImageView = theLoadingImageView; [theLoadingImageView release]; ... } - (void) webViewDidStartLoad:(UIWebView *)webView { [self.view addSubview:self.loadingImageView]; } - (void) webViewDidFinishLoad:(UIWebView *)webView { [self.loadingImageView removeFromSuperview]; } 

EDIT 1:

If you want to show ActivityIndicatorView instead of a static image, here is a small helper class that I like to use:

LoadingIndicator.h

 #import <UIKit/UIKit.h> @interface LoadingIndicator : UIView { UIActivityIndicatorView *activityIndicator; UILabel *labelMessage; } @property(retain) UIActivityIndicatorView *activityIndicator; @property(retain) UILabel *labelMessage; - (id)init; - (void)show:(NSString *)theMessage; - (void)hide; - (void)refreshPosition; @end 

LoadingIndicator.m

 #import "LoadingIndicator.h" #import <QuartzCore/QuartzCore.h> @implementation LoadingIndicator @synthesize labelMessage, activityIndicator; - (id)init { if (self = [super initWithFrame:CGRectMake(25, 130, 270, 100)]) { // Vue self.backgroundColor = [UIColor blackColor]; self.alpha = 0.80; self.layer.cornerRadius = 5; // Label : message UILabel *theLabelMessage = [[UILabel alloc] initWithFrame:CGRectMake(15, 65, 240, 20)]; theLabelMessage.backgroundColor = [UIColor clearColor]; theLabelMessage.textColor = [UIColor whiteColor]; theLabelMessage.text = NSLocalizedString(@"Loading", @"Loading"); theLabelMessage.textAlignment = UITextAlignmentCenter; theLabelMessage.font = [UIFont boldSystemFontOfSize:16]; theLabelMessage.adjustsFontSizeToFitWidth = YES; self.labelMessage = theLabelMessage; [self addSubview:theLabelMessage]; [theLabelMessage release]; // Activity Indicator UIActivityIndicatorView *theActivityIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge]; theActivityIndicator.frame = CGRectMake(115, 15, 40, 40); self.activityIndicator = theActivityIndicator; [self addSubview:theActivityIndicator]; [theActivityIndicator release]; } return self; } - (void)show:(NSString *)theMessage { self.labelMessage.text = theMessage; [self.activityIndicator startAnimating]; self.hidden = NO; [self.superview bringSubviewToFront:self]; [self refreshPosition]; } - (void)hide { [self.activityIndicator stopAnimating]; self.hidden = YES; } - (void)refreshPosition { self.center = self.superview.center; } - (void)dealloc { self.labelMessage = nil; self.activityIndicator = nil; [super dealloc]; } @end 

Then in your view.h

 #import <UIKit/UIKit.h> #import "LoadingIndicator.h" @interface YourView : UIView { LoadingIndicator *loadingIndicator; } @property(retain) LoadingIndicator *loadingIndicator; - (void)showLoadingIndicator:(NSString *)theMessage; - (void)hideLoadingIndicator; @end 

In your view .m

 #import "YourView.h" @implementation YourView @synthesize loadingIndicator; - (id)initWithFrame:(CGRect)frame { if ((self = [super initWithFrame:frame])) { ... // Add your UIWebView etc ... // Loading Indicator LoadingIndicator *theLoadingIndicator = [[LoadingIndicator alloc] init]; theLoadingIndicator.hidden = YES; // Hidden by default self.loadingIndicator = theLoadingIndicator; [self addSubview:theLoadingIndicator]; [theLoadingIndicator release]; ... } return self; } - (void)showLoadingIndicator:(NSString *)theMessage { NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init]; [self.loadingIndicator performSelectorOnMainThread:@selector(show:) withObject:theMessage waitUntilDone:NO]; [pool release]; } - (void)hideLoadingIndicator { NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init]; [self.loadingIndicator performSelectorOnMainThread:@selector(hide) withObject:nil waitUntilDone:NO]; [pool release]; } - (void)dealloc { self.loadingIndicator = nil; [super dealloc]; } @end 

Finally, in your doing WebView:

 - (void) webViewDidStartLoad:(UIWebView *)webView { [(YourView *)self.view showLoadingIndicator:@"Loading"]; } - (void) webViewDidFinishLoad:(UIWebView *)webView { [(YourView *)self.view hideLoadingIndicator]; } 

It will look something like this:

Answer 2

You simply hide and display the loaded image containing the required message in the UIWebViewDelegate methods.

 - (void)viewDidLoad { [super viewDidLoad]; loadingView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"loading image.png"]]; loadingView.center = CGPointMake(x, y); [webView addSubview:loadingView]; } - (void)webViewDidFinishLoad:(UIWebView *)webView1 { loadingView.hidden = YES; } - (void)webViewDidStartLoad:(UIWebView *)webView1 { loadingView.hidden = NO; }