Add an activity indicator on a uiwebview
Make a loading View:
@implementation yourViewController{; UIView* loadingView;}
In your viewDidLoad
:
loadingView = [[UIView alloc]initWithFrame:CGRectMake(100, 400, 80, 80)];loadingView.backgroundColor = [UIColor colorWithWhite:0. alpha:0.6];loadingView.layer.cornerRadius = 5;UIActivityIndicatorView *activityView=[[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];activityView.center = CGPointMake(loadingView.frame.size.width / 2.0, 35);[activityView startAnimating];activityView.tag = 100;[loadingView addSubview:activityView];UILabel* lblLoading = [[UILabel alloc]initWithFrame:CGRectMake(0, 48, 80, 30)];lblLoading.text = @"Loading...";lblLoading.textColor = [UIColor whiteColor];lblLoading.font = [UIFont fontWithName:lblLoading.font.fontName size:15];lblLoading.textAlignment = NSTextAlignmentCenter;[loadingView addSubview:lblLoading];[self.view addSubview:loadingView];
This view will look like this:
Be careful, if you want to use the cornerRadius, you have to import <QuartzCore/QuartzCore.h>
framework, and of corse before import, add QuartzCore
framework to your project !
Detect when webview stop loading:
- (void)webViewDidFinishLoad:(UIWebView *)webView { [loadingView setHidden:YES];}
you have to implement UIWebViewDelegate
protocol, and
webView.delegate = self;
and make it visible:
- (void)webViewDidStartLoad:(UIWebView *)webView { [loadingView setHidden:NO];}
How do I make the activity indicator stop only when the web page appears?
Your object can become delegate
for webView
to listen to -webViewDidFinishLoad
delegate method. So:
- (void)viewDidLoad { // Create the UIWebView UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds]; webView.delegate = self; // Here is the key ...}...- (void)webViewDidFinishLoad:(UIWebView *)webView { [self.view viewWithTag:100].hidden = YES;}
You may also implement -webViewDidStartLoad:
to show activity indicator instead of showing it in -viewDidLoad
method.
How do I add words to the activity indicator like "Loading"?
You should create a separate UILabel
, there is no way to add text to standard UIActivityIndicatorView
If you are looking for this on Swift, here it is:
var boxView = UIView()func webViewDidStartLoad(webView_Pages: UIWebView) { // Box config: boxView = UIView(frame: CGRect(x: 115, y: 110, width: 80, height: 80)) boxView.backgroundColor = UIColor.blackColor() boxView.alpha = 0.9 boxView.layer.cornerRadius = 10 // Spin config: let activityView = UIActivityIndicatorView(activityIndicatorStyle: UIActivityIndicatorViewStyle.WhiteLarge) activityView.frame = CGRect(x: 20, y: 12, width: 40, height: 40) activityView.startAnimating() // Text config: let textLabel = UILabel(frame: CGRect(x: 0, y: 50, width: 80, height: 30)) textLabel.textColor = UIColor.whiteColor() textLabel.textAlignment = .Center textLabel.font = UIFont(name: textLabel.font.fontName, size: 13) textLabel.text = "Loading..." // Activate: boxView.addSubview(activityView) boxView.addSubview(textLabel) view.addSubview(boxView)}func webViewDidFinishLoad(webView_Pages: UIWebView) { // Removes it: boxView.removeFromSuperview()}
Don't forget to call UIWebViewDelegate:
class ViewController: UIViewController, UIWebViewDelegate {
And set the delegate for the webView on the viewDidLoad:
webView.delegate = self