While working on the iMustangs project, we decided that it would be a good idea to include the school fight song. I’m sure we could have found a way to play a .mp3 file, but we decided that it would be best to create a video so that we could display our university logo. What follows is the result of our work in using UIWebView on iOS.

First Attempt

Our first attempt was very light on code and pretty simple. I’d like to show this to you by running through a test project. In Xcode, go ahead and start a new single-view application.

Navigate to the Storyboard in your project. Once you are here, add a web view on top of the current view. Go ahead and stretch the web view to fill the view below. Now, let’s go ahead and connect the web view.

I like to use the assistant editor when I connect UIWebViews and other objects to outlets and actions. Click the assistant editor button near the top right of Xcode (I am currently using 4.3.1). The assistant editor will show the storyboard beside your class, so that you can easily connect an object to a specific line of code in your .h file.

Once you’re in assistant editor mode, click the UIWebView and drag it to just below @interface. Let go.

At this point another dialog should’ve popped that is asking you to name your UIWebView. Go ahead and name it webView (be sure to use correct case).

Now, navigate to your ViewController.m file and paste the following code within the viewDidLoad function. You may replace the url with one of your own.

[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"<a href="http://www.youtube.com/embed/XeIKnBDN4To">http://www.youtube.com/embed/XeIKnBDN4To</a>"]]];

At this point, you should be able to run this project in a simulator and see an MSU youtube video, or whatever URL you substituted. This worked fine for us, until we put it on an actual iPhone…When loading the youtube video through the cellular data plan, and not wifi, we noticed that there would be blank white screen with no activity indicator for 10-40 seconds. I found this very annoying and began to look at other ways to load a UIWebView.

Second Attempt

For the second attempt, my group and I decided that we needed some sort of activity indicator. What follows is a short tutorial on how to load a UIWebView with an activity indicator that will spin while the UIWebView is loading.

From earlier, we still have a UIWebView connected to our ViewController class. To add an activity indicator to our UIWebView, we need to add some more code. Edit your ViewController.h file so that it looks like the code below.

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
{
    IBOutlet UIActivityIndicatorView *activityIndicator;
    IBOutlet UIWebView *webSite;
    NSTimer *timer;
}
@property (retain, nonatomic) IBOutlet UIWebView *webView;
@end

Now, jump over to the storyboard. At this point add an Activity Indicator View. I would suggest centering, but it is your project.

We need to connect the UIWebView and the UIActivityIndicatorView now. So, go ahead and open up your assistant editor. Once you have this open, connect the UIWebView and the UIActivityIndicator to the header file.

Now, let’s jump over to the ViewController.m file and add the following code above viewDidUnload.

- (void)viewDidLoad
{
    [webSite addSubview:activityIndicator];
    [webSite loadRequest:[NSURLRequest requestWithURL: [NSURL URLWithString:@"https://docs.google.com/spreadsheet/embeddedform?formkey=dG5qR3F5LW5EWFBnamtqUjBQZ1dHS0E6MQ"]]];
    timer = [NSTimer scheduledTimerWithTimeInterval:(1.0/2.0) target:self selector:@selector(loading) userInfo:nil repeats:YES];
    [super viewDidLoad];
}

-(void)loading
{
    if(!webSite.loading)
        [activityIndicator stopAnimating];
    else {
        [activityIndicator startAnimating];
    }
}

Now, you should be able to run this project and get something that looks like the image at the top of this post. Below are my complete ViewController.h and ViewController.m files.

// This is the ViewController.h
#import
@interface ViewController : UIViewController
{
    IBOutlet UIActivityIndicatorView *activityIndicator;
    IBOutlet UIWebView *webSite;
    NSTimer *timer;
}
@property (retain, nonatomic) IBOutlet UIWebView *webView;
@end

//This is the ViewController.m file
#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController
@synthesize webView;

- (void)viewDidLoad
{
    [webSite addSubview:activityIndicator];
    [webSite loadRequest:[NSURLRequest requestWithURL: [NSURL URLWithString:@"http://www.youtube.com/embed/XeIKnBDN4To"]]];
    timer = [NSTimer scheduledTimerWithTimeInterval:(1.0/2.0) target:self selector:@selector(loading) userInfo:nil repeats:YES];
    [super viewDidLoad];
}

-(void)loading
{
    if(!webSite.loading)
        [activityIndicator stopAnimating];
    else {
        [activityIndicator startAnimating];
    }
}
- (void)viewDidUnload
{
    [self setWebView:nil];
    [super viewDidUnload];
    // Release any retained subviews of the main view.
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone) {
        return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
    } else {
        return YES;
    }
}

- (void)dealloc {
    [webView release];
    [super dealloc];
}
@end

I hope this helps you set up your UIWebView with an activity indicator. Please let me know if you have any questions or if I have messed up anything in this tutorial. It happens 🙂