Using UIWebView in a UITableViewCell to display dynamic content - ios

Question

I need to display non-editable text with different styles and colors in table view cells. In researching, it seems that UIWebView is the way to achieve the style/color flexibility that I want. Here is what I did: (note iOS 5, XCode 4)
Created a class WebViewTableViewCell derived from UITableViewCell. The class contains a UIWebView.
In storyboard, I created the table view controller with 1 dynamic cell prototype containing a UIWebView object. The cell is of type WebViewTableViewCell. I made the connection between the class UIWebView and the storyboard.
In the table view controller code, overrode "heightForRowAtIndexPath" and used "sizeThatFits" to dynamically adjust the cell height
When I run, all of this "works", except that the cells do not resize to fit all of the text contained in the web view. In fact they do not resize at all; they are the height as drawn in the storyboard. Here is some sample code:
cellForRowAtIndexPath:
UITableViewCell *cell = nil;
WebViewTableViewCell *webCell = (WebViewTableViewCell *)[tableView dequeueReusableCellWithIdentifier:#"cellid"];
// Now populate the cell with dynamic data
NSDictionary *thisData = [self.dynamicData objectAtIndex:indexPath.row];
NSString *myString= [NSString stringWithFormat:#"%#. %#",
[thisData objectForKey:#"key1"],
[thisData objectForKey:#"key2"]];
[webCell.webView loadHTMLString:myStringbaseURL:nil];
cell = webCell;
return cell;
heightForRowAtIndexPath:
WebViewTableViewCell *webCell = (WebViewTableViewCell *) [self tableView:a_tableView cellForRowAtIndexPath:indexPath];
// Now that we have the cell, let it determine what its height should be.
CGFloat rowHeight = 45; // default unless if a problem accessing the cell
if( webCell )
{
CGSize size = [webCell.webView sizeThatFits:CGSizeZero];
rowHeight = rowHeight < size.height ? size.height : rowHeight;
}
One more thing - the cells, although not the correct height, are scrollable. I want to make them a fixed height and not scrollable.
Any thoughts?
--John

Answer 1

To disable scrolling you can just set tableView.scrollEnabled = NO. To get the correct height you can set your view controller as the webview delegate, and do something like this:
- (void)webViewDidFinishLoad:(UIWebView *)webView {
NSString *result = [webView stringByEvaluatingJavaScriptFromString:#"var height = 0; for (var i=0; i < document.all.length; i++) { document.all[i].height; if (document.all[i].height > height) { height = document.all[i].height; } }"];
CGFloat height = [result floatValue];
}
I'm sorry about the big JavaScript, but I think it will work. However, I recommend you to use the built in UILabel that supports NSAttributedString, or an open source UILabel subclass if you support iOS versions prior to 6.

Answer 2

Here is a better aproach to custom tableview.