Dynamic UIWebView UI Sizing

Question

I have text to display in my application. The text contains links that must be interactive. I tried several solutions for creating tappable links in UITextViews and UILabels .

• UITextView links

  • UITextView provides data detectors that collect URLs and make them available.
  • Impossible for me, because the link will only open outside in Safari, there is no way to take control and do what I want with the link.

• UILabel links using "Fancy Labels" ( http://furbo.org/2008/10/07/fancy-uilabels/ )

  • An almost perfect solution that provides link detection and a way for the user to see and click them inline and give me complete control over what to do with the link when clicked.
  • Currently unsuitable, because the implementation uses UIButton for overlay links, and they do not wrap text over long links.

Finally, I decided to use webview. I pass the text to the web view and create the basic HTML wrapper around it, and everything is very bad. This is the same approach that Twitter uses for iPhone (aka Tweetie).

The only problem that I am facing right now is that if the text is too long, web browsing causes overflow and scrolling to view the cropped text. Secondly, if the text is too short, then there is a large area of ​​wasted space below the web view.

Unlike Tweetie, I have more content under webview, and I want to avoid scroll overflow or wasted space. Web browsing is a subspecies of scrolling in any case, so the contents of the entire page can grow without the need to view profiles.

Is there any way to dynamically resize the web view so that it only matches the correct height based on the content?

I have tried many things so far, nothing seems like a solid solution:

• sizeToFit does nothing (or most likely just sets the size of what the current frame is).
• sizeThatFits: returns its current size anyway.
• NSString sizeWithFont:constrainedToSize: not possible, since UIWebView and UIFont have different ideas about what size is 18.
  • Just talk about it. In my testing, I found that the webView with scaleFactor 1.0 and scalesPageToFit set to NO , and the font size for the entire page set to 13.5pt (in CSS) displays text the same size as a UILabel with a UIFont size 18. If anyone will be able to explain that I would be grateful.
• In addition, in webView I use the CSS property word-wrap: break-word; to prevent the webView from scrolling horizontally in long words or URLs. Because of this, the transfer behavior between webView and UILineBreakModeWordWrap completely different. Even using UILineBreakModeCharacterWrap does not give the same results.

Either there is no way to do this, or I'm stupid and skipping something simple. If anyone could give some insight, I would be very grateful. Thanks.

Answer 1

I found a solution to my problem at http://www.iphonedevsdk.com/forum/iphone-sdk-development/1388-getting-actual-content-size-uiwebview.html

I am not sure if this is the best solution, but it works. If anyone has any better ideas, I will be happy to hear them.

I ended up working on this javascript on my web browser in webViewDidFinishLoad: I have one div element that carries my content called body, so my code looks like this:

 - (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *string = [_webView stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"body\").offsetHeight;"]; CGFloat height = [string floatValue] + 8; CGRect frame = [_webView frame]; frame.size.height = height; [_webView setFrame:frame]; if ([[self delegate] respondsToSelector:@selector(webViewController:webViewDidResize:)]) { [[self delegate] webViewController:self webViewDidResize:frame.size]; } } 

I had to slightly substitute the height, since the initial value did not take into account the size of the fields, etc.

After I get the height, I will call my delegate back that the webview has been resized so that the layout can be done.

Answer 2

Actually, you can use -sizeThatFits: with a little trick. See my answer to a similar question.