I'm working on an app that has table navigation to eventually drill down to UIWebView that displays various information. However, the transition from the slickness of UITableView to the slow wonkiness of UIWebView is jarring for the user so I want to improve that experience however I can.
Specifically, the background of both the tableViews and UIWebView pages have black backgrounds, but when I open the UIWebView it flashes empty white for about a second (this is the case for both local and remote HTML files.) How can I (ideally) preload this process, or (at least) make the "flash" be all black rather than all white? I tried making the view / webView's background black but that didn't seem to help.
In my app right now, when a user selects a cell, the app just loads up the UIWebView subclass and pushes it on the navigation stack. The UIWebView subclass has an activity indicator that starts & stops animating on WebViewDidStartLoad and WebViewDidFinishLoad, which works fine, but it doesn't do anything to help the "white flash."
I have tested it... I'm sending the two method that I have used...
- (void)viewDidLoad {
[super viewDidLoad]; //objWebView is the outlet of UIWebView
[objWebView loadHTMLString:#"<html><body style=\"background-color:black;\"></body></html>" baseURL:nil];
//the more the delay the errors will be less so within 0.1-0.3 would be fine
[self performSelector:#selector(loadURL:) withObject:nil afterDelay:0.1];
}
-(void)loadURL:(id)sender{
[objWebView stopLoading]; //added this line to stop the previous request
NSURL *url = [NSURL URLWithString:#"http://www.google.com"];
NSURLRequest *req = [NSURLRequest requestWithURL:url];
[objWebView loadRequest:req];
}
here I'm performing the request after 0.1 sec, other wise it will look white as in your case. Or you can give your delay time depending upon the time.. Cheers :)
Try in your
-(void)viewDidLoad{
myWebView.hidden = YES;
Then in
-(void)loadURL:(id)sender{
myWebView.hidden = NO;
I used:
[webView setHidden:YES];
[webView setDelegate:self];
when creating my webView and making the request and then added this delegate method to handle completed requests:
- (void) webViewDidFinishLoad:(UIWebView*)webView{
[webView setHidden:NO];
}
Successfully done it.
You have to create a view in Interface Builder first.
Then load the html to the webview using a initWithFrame in the init of your ViewController that contains the webview(this is where the magic happens):
CGRect webFrame = [[UIScreen mainScreen] applicationFrame];
webView = [[UIWebView alloc] initWithFrame:webFrame];
Then simply load the webView into the view in viewWillAppear:
[viewWeb addSubview:webView];
This is really a question of interface designing, which is faster paint directly on the view or paint in a subview and then paint that subview in the view?
I had solved this problem years ago, using the common method of hiding the UIWebView behind a UIImageView, then removing the UIImageView after a delay.
But it suddenly came back, I think on iOS 7.0.4. It was occurring on a brand new iPad Air, as well as an older iPad mini non-retina. After two days of hair-pulling, I finally found a work-around.
Let's say you have webview which is restricted to landscape orientation, initialized like this:
WebView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 1024.0f, 768.0f)];
And then you make it visible after pre-loading, with eg bringSubviewToFront or setHidden:NO on the webview (or alternatively with setHidden:YES or removeFromSuperview on the UIImageView). But instead of seamlessly switching the views, there's a flash and the background color blinks for about half a second.
The fix is to change the size of your webview, ever so slightly:
WebView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 1024.01f, 768.0f)];
The problem and fix is highly reproducible. It works with a change as slight as the fourth decimal place (1024.0001f). At the fifth decimal place (1024.00001f), the flash returns. The value of the height (768.0f) didn't seem to matter.
Or, instead of working around the problem, you could just set the background color of your webview to whatever background color you're using. Unless you're using an image of course.
Related
I must include some 'rich text' instructions* preceding a form; and thought adding a UIWebView to the header of the tableview would work. The HTML is a small file in my resources folder, the CSS is in a style tag in the file; so it's all nice and self contained.
The problem is, the view transitions in; then after a small delay the contents of the webview appear. The effect is jarring, and I don't think hiding the view and fading it in when it's ready would be any more desirable.
I'm creating the view with the code below, in my viewDidLoad method.
UIWebView * wv = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, self.tableView.frame.size.width, HEADER_HEIGHT)];
[wv setBackgroundColor:[UIColor clearColor]];
[wv setOpaque:NO];
NSString *path = [[NSBundle mainBundle] pathForResource:#"HeaderMsg" ofType:#"html"];
assert(path != nil);
NSData *htmlData = [NSData dataWithContentsOfFile:path];
[wv loadData:htmlData MIMEType:#"text/html" textEncodingName:#"utf-8" baseURL:nil];
[self.tableView setTableHeaderView:wv];
[wv release];
I found 2 ugly workarounds, but I'm hoping someone has a better solution; since my workarounds make a real mess out of the code:
On previous screen when you make the
UIMYSCREENViewController, call a
[vc
preloadWebViewWithDelegate:self];
method which will make the webview
using the caller as the delegate.
The caller then retains the vc and
waits for the webview to sent it a
webviewDidFinishLoad method, at
which time it can present the view
and release the vc.
The calling view can make the webview,
wait for it to finish, then create the
new view and pass the webview into it.
At any rate, both of those "solutions" make me gag a little, so I'm hoping others have found a better way.
(*The instructions are mostly simple, styled text with some bullet points (no images or overly aggressive styling); but it takes about 14 carefully aligned UILabel views to simulate this without a webview - and is subject to the whims of the customer wanting to change the message.)
I would create another independent model or controller object to create and retain the webview, hopefully at a higher level and before (maybe during app init) displaying the view with the UI that could bring up the webview.
Consider this the same as pre-staging resources for an action game so that they don't have to be loaded during the game loop, which is a common design pattern.
Consider using this
https://github.com/Cocoanetics/DTCoreText/
I'm adding a UIWebView to my iOS App and I'd like it to open in response to a button getting clicked (so this code is going to be written in one of the button's event handler).
How can I create this UIWebView dynamically in code, position it to cover the entire screen and respond to events (e.g. to UIWEbView's shouldStartLoadWithRequest function so that the UIWebView can ask the native code to close the UIWebView).
I'd specifically like to avoid having to create stuff in Interface-Builder and it would be great if this could be reduced to several lines of code that could be later copy-pasted into other projects easily.
Simple:
UIWebView *webView = [[[UIWebView alloc] initWithFrame:self.view.bounds] autorelease];
webView.delegate = self;
[self.view addSubview:webView];
You just need to implement the WebViewDelegate's method in the controller, that you are making the delegate of the UIWebView.
I'm displayed a small amount of local content in a UIWebView, roughly 3 paragraphs of text and one 100x100px image. When the UIWebView is pushed onto to the nav controller, it takes about half a second before the content is displayed. This occurs on the device, not in the simulator. Obviously the UIWebView needs to do some work before displaying the content, but is there some way I can do this before the pushed view appears? I have not had any luck doing this myself.
Here is where I'm creating and pushing the view controller which contains the UIWebView:
ArticleViewController* viewController = [[ArticleViewController alloc] init];
viewController.article = article;
[viewController view]; //touch the view so it gets loaded
[viewController loadWebView]; //load the web view content
[self.navigationController pushViewController:viewController animated:YES];
[viewController release];
And here is the loadWebView method:
-(void)loadWebView {
NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
NSString* content = article.content;
NSString *html = [NSString stringWithFormat:#"\
<html><body style='background-color: transparent'><style type=""text/css"">body {font-family: helvetica; color: black; font-size: 10pt; margin: 10px 10px 10px 10px}</style>\
%#<div style='text-align:center'><a href='13443574_9709e4cf37.jpg?photographer=test' style='-webkit-tap-highlight-color:rgba(0,0,0,0);'><img src='13443574_9709e4cf37.jpg' height='160' width='230'></a></div></body></html>", content];
[self.webView loadHTMLString:html baseURL:baseURL];
}
Previously I had [viewController loadWebView] in the viewDidLoad method, but the result seems to be the same. A blank screen when the viewController is pushed, followed by the content loading half a second later.
Any ideas?
Problem Confirmed
I too see a half-second or more delay with a white screen before my UIWebView content appears. This happens only on the first use of a UIWebView during that run of the app. Successive appearances of UIWebView are nearly instantaneous. So it seems to me and other folk that the delay must be due to WebKit libraries needing to load and initialize.
Warm-up WebKit
You cannot eliminate the delay. But you can move that delay to the start of your app, to lessen the annoying effect of "blank screen" to your users. The trick is to load UIWebView with a bogus page off-screen, during your app's launch. Build a minimal HTML5 web page in a hard-coded string. I use a correct and valid HTML5 content to minimize the time taken by UIWebView/WebKit to analyze.
This technique works noticeably well on real hardware (iPhone 3GS), not just the iOS Simulator.
In my app delegates didFinishLaunchingWithOptions method, the bottom of the ARC-compliant code looks like this:
…
[self.window makeKeyAndVisible];
// Performance optimization: Warm up the UIWebView widget and its related WebKit libraries.
// We are choosing the trade-off between (A) a slight delay here during app launch to create and abandon a bogus UIWebView instance, and
// (B) a flash of white and noticeable delay as the UINavigationController slides in from the right the first UIWebView we display during the app run.
UIWebView* bogusWebView = [[UIWebView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
NSString* html = #"<!doctype html><html lang=en><head><meta charset=utf-8><title>blah</title></head><body><p>bogus content</p></body></html>";
[bogusWebView loadHTMLString:html baseURL:nil]; // Load the page.
bogusWebView = nil; // Not really needed, but self-documents that we intend to discard this object.
return YES;
This technique seems to reduce most but not quite all of the approximate half-second delay during the user's first appearance of UIWebView on screen. I conclude that most of the delay is due to WebKit warming up, but there must be some overhead related to graphically presenting a UIWebView on-screen. If so, we cannot eliminate that remaining overhead with off-screen work. But nevertheless, this technique eliminates most of the initial delay. So the user's first impression of my app won't be "slow".
You're going to make the user wait, the only question is: is it before or after the webview appears? If you're set on "before", then you should create the controller, load the web view, but wait to push it until the -webViewDidFinishLoad: delegate method fires. Once you receive that, you can push the view.
Using this method to hide the status bar:
[[UIApplication sharedApplication] setStatusBarHidden:YES animated:YES];
When setting "hidden" back to NO, the tap-to-scroll-to-top (in UIWebView, UITableView, whatever) doesn't work any more, and requires a restart of the app to get the functionality back.
Is this a bug (I filed a rdar anyhow) or have I missed a step? Should I perhaps expect this behavior since the statusBar "loses touch" somehow with the respective view?
You could try setting the ScrollsToTop property to true again after re-showing it:
[currentView setScrollsToTop:YES];
If that's not working, are you definitely only showing one view? If there is more than one scrolling view a scrollViewDidScrollToTop message is ignored...
In iOS 5.0 you can access the scrollview property of the UIWebView
webView.scrollView.scrollsToTop = YES;
The following fix by Alex worked for me. Thanks!
((UIScrollView *)[[webView subviews] objectAtIndex:0]).scrollsToTop = NO;
Being in a hurry this fix worked great, however given more time I might've subclassed the UIWebView and accessed the protected UIScrollView member directly.
The worry I have with Alex' method is that it assumes that UIScrollView is at index zero of the subviews (encapsulation allows private members to change). Which suggests another solution still:
for (UIView* v in [webView subviews])
{
if ([v isKindOfClass:[UIScrollView class]])
{
(UIScrollView *)v.scrollsToTop = NO;
}
}
I was having a similar problem where the scroll-to-top functionality was lost. Turns out this will only work when you have only one active view at a time (within the same scroll view). In my case I had a table view and another view which would fade in/out. Adding a removeFromSuperview at the end of the animation did the trick.
The answer was in the UIScrollView.h file comments:
/*
this is for the scroll to top gesture. by default, a single scroll visible scroll view with this flag set will get the call. if there is more than one visible with this
flag set or the delegeat method returns NO, the view isn't scrolled
*/
#property(nonatomic) BOOL scrollsToTop; // default is YES. if set, special gesture will scroll to top of view after consulting delegate
You can use the following code to have the UIWebView ignore scrollToTop without the extra UIScrollView:
((UIScrollView *)[[webView valueForKey:#"_internal"] valueForKey:#"scroller"]).scrollsToTop = NO;
I had a similar problem after playing a Youtube video within my app. scrollsToTop was still set to YES but tapping the status bar had no effect.
I finally realised that my app window was no longer the key window. After adding the following line to a UIWindow subclass (which I already had for other reasons) everything worked as it should again:
if (![self isKeyWindow]) [self makeKeyWindow];
I just ran across a similar behavior in the app I'm currently working on. In its case, if you load a YouTube video from within a UIWebView, scroll to top stops working for the rest of the application's life cycle. I kind of assume this might happen after loading the movie player as well, but haven't confirmed. That functionality has been around a lot longer and probably has fewer bugs.
When there are multiple scrollview, you can also set scrollUpToTop to NO for the others scrollview. cf:
setScrollsToTop with multiple UIScrollView classes and/or subclasses(UITableView)
I want to add my case, I add an UIWebView on an UIScrollView, as h4xxr had answered on the top:
If there is more than one scrolling view a scrollViewDidScrollToTop message is ignored
So, I get a simply way to make it work on webView: just set the scrollView·s scrollsToTop property false.
And when tap the status bar, it won`t got intercepted by the scrollView, and the webView scrolls to the top!
UIScrollView *scrollView = [[UIScrollView alloc] init];
scrollView.frame = self.view.bounds;
scrollView.scrollsToTop = false; //igore scrollView`s scrollsToTop
[self.view addSubview:scrollView];
UIWebView *webView = [[UIWebView alloc] init];
webView.frame = scrollView.bounds;
[scrollView addSubview:webView];
What's the simplest, fastest, or otherwise (objectively) best way to add a couple of controls (e.g. some UIButtons) beneath a UIWebView?
To be clear, I'd like to display a regular scrolling UIWebView, but when scrolling reaches the bottom I'd like there to be some UIControls after the web content. I'd rather not fake it with HTML/CSS content that looks like a control; ideally they should be real controls that I can hook up to my view controller as usual.
I don't know whether it's easiest to try to do this with one big UIScrollView containing both the UIWebView and the controls (will there be scrolling conflicts between the UIScrollView and the nested UIWebView?), or with a UITableView containing the web view and controls in separate cells (will performance be terrible?), or in some other way that I haven't thought of.
Update: I don't imagine that I want the UIWebView itself to actually scroll; I thought I'd need to resize it to accommodate all of its content, disable its scrolling behaviour entirely, and then allow the user to scroll its parent view (either the UIScrollView or the UITableView) to reveal different parts of the UIWebView.
Neither the UIScrollView nor UITableView solutions you proposed will work.
If you put the UIWebView in a UIScrollView, one or the other will intercept the scrolls and scroll its content pane, but the other will not. I'm not sure which one will, I think it would be the UIScrollView. In any case, there is no provision for the UIScrollView to scroll when you reach the end of scrolling in the UIWebView, or vice versa.
If you use a UITableView, the UIWebView will scroll inside its cell, but the UITableView won't scroll at all, or the UIWebView won't scroll at all, and the UITableView will. If you use the 'grouped' table style, it's possible that you could scroll the UIWebView and the UITableView, but it would not be the cohesive sort of experience you are looking for.
The only technique I can think of that might work is to muck around in the internals of the UIWebView and add your UIView containing buttons and whatnot to the scrolling entity used by the UIWebView. This is beyond my ken, but these header dumps will get you started. Keep in mind that if Apple notices what you're doing, they may reject your app, and additionally, the internals may change at any time, breaking your code. If you go this route, try to code it in such a way that missing functionality will cause a graceful failure.
EDIT:
With some discussion and experimenting, the OP and I have come to the conclusion that it is very possible, and there is a way to do it that doesn't rely on internals at all. That is, use an enclosing scroll view, and resize the web view once it has loaded to the full size of its own content view. This size can be found using [webView sizeThatFits:CGSizeZero].
If you did want to use UIWebView's privates to accomplish this, I have a short code example of adding a view to the UIWebView's document view, since I got it all worked out anyway :)
- (void)applicationDidFinishLaunching:(UIApplication *)application {
// Override point for customization after app launch
UIView* testView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)] autorelease];
UIWebView* testWebView = [[[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)] autorelease];
[testView addSubview:testWebView];
[testWebView setDelegate:self];
[testWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:#"http://google.com"]]];
[window addSubview:testView];
[window makeKeyAndVisible];
}
- (void)webViewDidFinishLoad:(UIWebView *)webView {
UIView *insert = [[[UIView alloc] initWithFrame:CGRectMake(0, [[webView _documentView] frame].size.height, 320, 40)] autorelease];
[insert setBackgroundColor:[UIColor greenColor]];
[[webView _documentView] addSubview:insert];
}
I don't believe there is any way to do this within the constraints of the public SDK.
This is how i do it.
- (void)webViewDidFinishLoad:(UIWebView *)webView {
for(UIView *view in [webView subviews]){
if([view isKindOfClass:[UIScrollView class]]){
NSLog(#"Scrollview found with tag %d", [view tag]);
UIScrollView *scroll= (UIScrollView *)view;
[scroll addSubview:self.finishBtn];
[finishBtn setCenter:CGPointMake(webView.center.x, scroll.contentSize.height-30)];
}
}
}