Search code examples
iosuiwebviewuiprogressview

UIWebView with Progress Bar


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!


Solution

  • 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.