How do I make an image cover the screen when a view is loading?

Question

I have a webview and when you click a link on a webpage, I want the screen to show an image for the duration of the time that the page is laoding (it sounds weird, but it's for a good reason).

I'm new to XCode and have done a few tutorials, but it's still murky to me how to make things happen in XCode (and objective C in general).

It seems that the process should be this - in the webViewDidStartLoad method, I call a class, which is a UIImageView. In that class is the image. And in webViewDidFinishLoad, I then either remove the image, or lower it on the stack.

I just am confused as to all the things you need to do to make this happen. Here's what I have so far:

A class called loadingView which has a method in it called showLoadingScreen. In this method I have the code:

 UIView *view=[[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 480)];
 [view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"Icon-76.png"]]];

Then I go to the storyboard and insert a new UIView over the webView, and give it the class loadingView. And then I control clicked from this UIView to the ViewController.h, and dropped it in the view controller, creating the code:

@property (strong, nonatomic) IBOutlet UILabel *loadingPageView;

and imported loadingView.h.

Is this correct? If yes, then I need to put this method into webViewDidStartLoad, but I can't figure out what code to put there. It seems I to do something like:

[self.view addSubview:imageView];

But I don't know how to customize this to my code.

Answer 1

Step 1: Declare an imageview property somewhere:

@property (strong, nonatomic) UIImageView * coverImageView;

Step 2: Show Image view in webViewDidStartLoad

- (void) webViewDidStartLoad:(UIWebView *)webView {
    if (!_coverImageView) _coverImageView = [[UIImageView alloc]init];
    _coverImageView.frame = self.view.bounds;
    _coverImageView.image = [UIImage imageNamed:@"Icon-76.png"];
    [self.view addSubview:_coverImageView];
}

Step 3: Remove Image View in webViewDidFinishLoad

- (void) webViewDidFinishLoad:(UIWebView *)webView {
    [_coverImageView removeFromSuperview];
}

Answer 2

If you want a view to cover the screen, use:

[[[UIApplication sharedApplication] keyWindow] addSubview:myImageView];

This will add your UIImageView to your key UIWindow, which will show over any UIViewController. Otherwise, add your UIImageView as a subview of your UIWebView. If you want to guarantee that your UIImageView is at the top of the view stack, call:

[self.webView bringSubviewToFront:myImageView];

Either way, maintain your UIImageView as a global property/ivar so you can later call:

[myImageView removeFromSuperview];