UIWebView with Progress Bar

user3220034 picture user3220034 · Jan 21, 2014 · Viewed 35.7k times · Source

Hi I'm new to programming and I'm trying to make my first app for iPhones on Xcode. My app contains of a button which opens a UIWebView when pressed and loads up a homepage. Now I also want to add a Progress View to the WebView like Safari also uses, which indicates the progress of loading the page. How can I do that?
My code so far for loading the URL in the UIWebView:

.h

IBOutlet UIWebView *webView;

.m

- (void)viewDidLoad
{
[webView loadRequest:[NSURLRequest requestWithURL: [NSURL URLWithString:@"http:/www.google.com/"]]];

Thanks for your help!

Answer

WolfLink picture WolfLink · Jan 21, 2014

To have an accurate UIProgressView, you need to have some task that:

  • You can get information from while it isn't complete
  • Quantify its "completeness" as a percentage based on that information.

Now when you are loading your UIWebView, thats not possible. And Apple doesn't do it either. Apple often uses fake UIProgressViews to give you something to look at while the page is loading. Mail also uses fake progress views. Go try it out for yourself. This is how Apple's fake progress views work:

  • The progress view starts moving at a slow, constant rate
  • If the task finishes before the bar completes, it suddenly zips across the rest to 100% before disappearing
  • If the task takes a long time, the progress view will stop at 95% and will stay there until the task is complete.

To achieve this, you will have to animate the progressView manually. You could subclass it but that would probably be a bit advanced for you. The simplest way would be this:

In myViewController.h

@interface myViewController : UIViewController {
     BOOL theBool;
     //IBOutlet means you can place the progressView in Interface Builder and connect it to your code
     IBOutlet UIProgressView* myProgressView;
     NSTimer *myTimer;
}
@end

In myViewController.m

#import "myViewController.h"
@implementation myViewController
- (void)webViewDidStartLoad:(UIWebView *)webView{
     myProgressView.progress = 0;
     theBool = false;
     //0.01667 is roughly 1/60, so it will update at 60 FPS
     myTimer = [NSTimer scheduledTimerWithTimeInterval:0.01667 target:self selector:@selector(timerCallback) userInfo:nil repeats:YES];
}
- (void)webViewDidFinishLoad:(UIWebView *)webView{
     theBool = true;
}
-(void)timerCallback {
    if (theBool) {
         if (myProgressView.progress >= 1) {
              myProgressView.hidden = true;
              [myTimer invalidate];
         }
         else {
              myProgressView.progress += 0.1;
         }
    }
    else {
         myProgressView.progress += 0.05;
         if (myProgressView.progress >= 0.95) {
              myProgressView.progress = 0.95;
         }
    }
}
@end

Then, where your task gets completed, set theBool = true; and the progress view will take care of itself. Change the values in the if statement thing to control the speed of the animation.