UIWebView：加载时显示图像

Question

在我的故事板中，我有一个带有 UIWebView 的视图，它填充了除选项卡和导航栏之外的整个区域。视图的控制器实现了 UIWebViewDelegate 协议。控制器被设置为 UIWebView 的委托：

#pragma mark - UIWebViewDelegate
- (void) webViewDidStartLoad:(UIWebView *)webView {
    NSLog(@"webViewDidStartLoad");
}

- (void) webViewDidFinishLoad:(UIWebView *)webView {
    NSLog(@"webViewDidFinishLoad");
}

当 UIWebView 加载时，我将显示一个黑色背景，并显示一个图像，表明它正在加载。我怎样才能做到这一点？

编辑1： 我正在尝试添加默认的 ActivityIndi​​catorView 而不是静态图像。但这只是给了我一个带有小白色区域的黑色背景。问题是什么？

UIImageView *loadingImageView = [[UIImageView alloc] initWithFrame:webView.frame];
UIActivityIndicatorView *spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
UIImage *spacer = [UIImage imageNamed:@"spacer"];    
UIGraphicsBeginImageContext(spinner.frame.size);
[spacer drawInRect:CGRectMake(0,0,spinner.frame.size.width,spinner.frame.size.height)];
UIImage* resizedSpacer = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
loadingImageView.image = resizedSpacer;
[loadingImageView setBackgroundColor:[UIColor blackColor]];
[loadingImageView setContentMode:UIViewContentModeCenter];
self.loadingImageView = loadingImageView;

Answer 1

在你的控制器 .h 中

@property (nonatomic, retain) UIImageView *loadingImageView;

在你的控制器 .m

@synthesize loadingImageView;

- (void)viewDidLoad {

    ...

    UIImageView *theLoadingImageView = [[UIImageView alloc] initWithFrame:webView.frame];
    theLoadingImageView.image = [UIImage imageNamed:@"your_image.png"];
    self.loadingImageView = theLoadingImageView;
    [theLoadingImageView release];

    ...
}

- (void) webViewDidStartLoad:(UIWebView *)webView {

    [self.view addSubview:self.loadingImageView];
}

- (void) webViewDidFinishLoad:(UIWebView *)webView {

    [self.loadingImageView removeFromSuperview];
}

编辑 1:

如果你想显示 ActivityIndi​​catorView 而不是静态图像，这里有一个我喜欢使用的小帮助器类：

LoadingIndicator .h

#import <UIKit/UIKit.h>


@interface LoadingIndicator : UIView {

    UIActivityIndicatorView *activityIndicator;
    UILabel *labelMessage;

}

@property(retain) UIActivityIndicatorView *activityIndicator;
@property(retain) UILabel *labelMessage;

- (id)init;
- (void)show:(NSString *)theMessage;
- (void)hide;
- (void)refreshPosition;

@end

LoadingIndicator.m

#import "LoadingIndicator.h"
#import <QuartzCore/QuartzCore.h>

@implementation LoadingIndicator

@synthesize labelMessage, activityIndicator;

- (id)init {    
    if (self = [super initWithFrame:CGRectMake(25, 130, 270, 100)]) {

        // Vue
        self.backgroundColor = [UIColor blackColor];
        self.alpha = 0.80;
        self.layer.cornerRadius = 5;

        // Label : message
        UILabel *theLabelMessage = [[UILabel alloc] initWithFrame:CGRectMake(15, 65, 240, 20)];
        theLabelMessage.backgroundColor = [UIColor clearColor];
        theLabelMessage.textColor = [UIColor whiteColor];
        theLabelMessage.text = NSLocalizedString(@"Loading", @"Loading");
        theLabelMessage.textAlignment = UITextAlignmentCenter;
        theLabelMessage.font = [UIFont boldSystemFontOfSize:16];
        theLabelMessage.adjustsFontSizeToFitWidth = YES;

        self.labelMessage = theLabelMessage;
        [self addSubview:theLabelMessage];
        [theLabelMessage release];

        // Activity Indicator
        UIActivityIndicatorView *theActivityIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
        theActivityIndicator.frame = CGRectMake(115, 15, 40, 40);

        self.activityIndicator = theActivityIndicator;
        [self addSubview:theActivityIndicator];
        [theActivityIndicator release];

    }
    return self;
}

- (void)show:(NSString *)theMessage {

    self.labelMessage.text = theMessage;
    [self.activityIndicator startAnimating];
    self.hidden = NO;
    [self.superview bringSubviewToFront:self];
        [self refreshPosition];
}

- (void)hide {
    [self.activityIndicator stopAnimating];
    self.hidden = YES;
}

- (void)refreshPosition {

    self.center = self.superview.center;
}

- (void)dealloc {
    self.labelMessage = nil;
    self.activityIndicator = nil;

    [super dealloc];
}

@end

然后在您的视图中。h

#import <UIKit/UIKit.h>
#import "LoadingIndicator.h"


@interface YourView : UIView {

    LoadingIndicator *loadingIndicator;

}

@property(retain) LoadingIndicator *loadingIndicator;

- (void)showLoadingIndicator:(NSString *)theMessage;
- (void)hideLoadingIndicator;

@end

在您的视图中。m

#import "YourView.h"


@implementation YourView

@synthesize loadingIndicator;


- (id)initWithFrame:(CGRect)frame {
    if ((self = [super initWithFrame:frame])) {

        ...

        // Add your UIWebView etc

        ...

        // Loading Indicator
        LoadingIndicator *theLoadingIndicator = [[LoadingIndicator alloc] init];
        theLoadingIndicator.hidden = YES;   // Hidden by default

        self.loadingIndicator = theLoadingIndicator;
        [self addSubview:theLoadingIndicator];
        [theLoadingIndicator release];

        ...


    }
    return self;
}

- (void)showLoadingIndicator:(NSString *)theMessage {
    NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init];

    [self.loadingIndicator performSelectorOnMainThread:@selector(show:) withObject:theMessage waitUntilDone:NO];

    [pool release];
}

- (void)hideLoadingIndicator {
    NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init];

    [self.loadingIndicator performSelectorOnMainThread:@selector(hide) withObject:nil waitUntilDone:NO];

    [pool release];
}

- (void)dealloc {
    self.loadingIndicator = nil;

    [super dealloc];
}


@end

最后在您的 WebView 委托中：

- (void) webViewDidStartLoad:(UIWebView *)webView {

    [(YourView *)self.view showLoadingIndicator:@"Loading"];
}

- (void) webViewDidFinishLoad:(UIWebView *)webView {

    [(YourView *)self.view hideLoadingIndicator];
}

这将如下所示：

Answer 2

您只需在 UIWebViewDelegate 方法中隐藏和取消隐藏包含所需消息的加载图像即可。

- (void)viewDidLoad {

    [super viewDidLoad];

    loadingView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"loading image.png"]];

    loadingView.center = CGPointMake(x, y);

    [webView addSubview:loadingView];

}

- (void)webViewDidFinishLoad:(UIWebView *)webView1

{
    loadingView.hidden = YES;

}


- (void)webViewDidStartLoad:(UIWebView *)webView1

{

    loadingView.hidden = NO;

}