How to control the color of a UIWebView (before contents load)?

Question

I am trying to have a BLACK colored UIWebView before its contents load. In IB, i tried both making the background color of the UIWebView black, as well as, making it have a transparent background and have its parent view's background be black. Both don't work. When my UIWebView loads the background of it is white. How can I fix this?

*I hope this does not boil down to having to load an html string first (before loading my actual web content) to set the background to black vis CSS.

Answer 1

Since it inherits from UIView, what prevents you of using the backgroundColor property ?

Answer 2

Actually setting the background color cannot make the web view entire black. The content of a webpage is presented in a subview within the web view, a web view contains many undocumented subviews, including a UIScroller which allows you to scroll the contents, and a UIScroller contains UIWebDocumentView which draws the web contents. They are above the background of your web view, so they cover the background, what you can see is the UIWebDocumentView and setting the background color cannot make your web view entire black.

I guess the solution is, you may try to place a black view over your web view, and hide the view when the delegate methods such as webViewDidFinishLoad: or webViewDidStartLoad: are called.

Answer 3

For some reason, the UIWebDocumentView uses neither [UIColor lightGrayColor] nor [webview backgroundColor]. Here is a snippet of code following zonble's answer:

- (void)loadView
{
    ...
    [self setView: webview];
    self.mCoverView = [[UIView alloc] initWithFrame:aRectangleLargeEnough];
    [webview addSubview:self.mCoverView];
    UIColor * matchingGray = [[UIColor alloc] initWithRed:204./255.
                                                    green:204./255.
                                                     blue:204./255.
                                                    alpha:1.];
    [self.mCoverView setBackgroundColor:matchingGray];
    [matchingGray release];
    [self.mCoverView release];
    ...
}

And in both -webViewDidFinishLoad: and -didFailLoadWithError:

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    ...
    [self.mCoverView removeFromSuperview];
    sself.mCoverView = nil; // <- @property (nonatomic. retain)
    ...
}

- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
{
    ...
    [self.mCoverView removeFromSuperview];
    self.mCoverView = nil; // <- @property (nonatomic. retain)
    ...
}

And to add a fade-out once the web page is loaded, replace the -removeFromSuperview by:

{
    ...
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:.75];
    [self.mCoverView setAlpha:0.f]; // Will fade out
    [UIView commitAnimations];
    self.mCoverView = nil; // <- @property (nonatomic. retain)
    ...
}