UITableView add WebView and ImageView Cells - ios

Question

I need to programmatically add two different types of cells to my UITableView. The content of these cells is not known until runtime. The first type is an HTML formatted string and the second is an image. There can be any combination of these cells and they can occur in any order.
In the IB, I've set up two prototype cells, one with the id 'htmlCell' and the other 'imageCell'. Here is the relevant code:
public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
var cell = UITableViewCell(style: UITableViewCellStyle.default, reuseIdentifier: "htmlCell")
let thisSection = self.sections[indexPath.row]
if thisSection.type! == "html" {
let htmlString = thisSection.text
let htmlHeight = contentHeights[indexPath.row]
let webView:UIWebView = UIWebView(frame: CGRect(x:0, y:0, width:cell.frame.size.width, height:htmlHeight))
cell.addSubview(webView)
webView.tag = indexPath.row
webView.scrollView.isScrollEnabled = false
webView.isUserInteractionEnabled = false
webView.delegate = self
webView.loadHTMLString(htmlString!, baseURL: nil)
} else if thisSection.type! == "image" {
cell = UITableViewCell(style: UITableViewCellStyle.default, reuseIdentifier: "imageCell")
let imageName = "logo"
let image = UIImage(named: imageName)
let imageView = UIImageView(image: image)
imageView.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width-20, height: 200)
cell.addSubview(imageView)
return cell
}
return cell
}
func webViewDidFinishLoad(_ webView: UIWebView) {
if (contentHeights[webView.tag] != 0.0) {
// we already know height, no need to reload cell
return
}
let strHeight = webView.stringByEvaluatingJavaScript(from: "document.body.scrollHeight")
contentHeights[webView.tag] = CGFloat(Float(strHeight!)!)
tableView.reloadRows(at: [NSIndexPath(item: webView.tag, section: 0) as IndexPath], with: UITableViewRowAnimation.automatic)
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return self.contentHeights[indexPath.row]
}
The content loads, but it's a bit of mess. Here is a screenshot to provide an example. In this case, the image should appear between the two webviews. But as you can see, the image lands directly on top of the second webview, with the two top borders aligned.
Also, when I click on the image, it completely disappears. I'm assuming that it goes behind the second webview. Just a guess.
The CGRects that I am using have somewhat arbitrary widths and heights at the moment. I suspect that this is where part of the issue lies. Finally, the webViewDidFinishLoad always returns a height of 667.0 regardless of the true height of the webview content.
Anyone know how I can make these views land in the correct sequence? Thank you.

Answer 1

There are many potential issues here, let's tackle a few of them and see if that get's you going :)
If you defined prototype cells in IB and your tableView is properly linked to the xib or storyboard file, then you should dequeue cells instead of construct them.
Try this:
public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell: UITableViewCell //declare but don't assign yet. Use let because after we assign once, we wont be reassigning.
...
if thisSection.type! == "html" {
cell = tableView.dequeueReusableCell(withIdentifier: "htmlCell", for: indexPath)
...
} else if thisSection.type! == "image" {
cell = tableView.dequeueReusableCell(withIdentifier: "imageCell", for: indexPath)
...
}
return cell
}
Notice, we declare and return cell at the top level scope and assign the cell only when we know what type it will be. Now that you are dequeueing, the cells will be reused when appropriate and reduce the number of allocation made when a user scrolls making your app zippier.
Next, since you are adding subviews to your cells, you'll need to clear the subviews each time you dequeue a cell. This requires a bit of additional code but will make things a lot cleaner in the long run.
After each call to dequeueReusableCell... add:
cell.contentView.subviews.forEach({ $0.removeFromSuperview() })
So far so good. You've got the cells dequeuing cleanly, but now we need to make sure we setup the cells properly.
First, the html cell:
Remove the line:
let htmlHeight = contentHeights[indexPath.row]
The tableView is ultimately responsible for sizing the cells and the content will take up the full size of the cell. Replace the next 2 lines with this:
let webView = UIWebView(frame: cell.contentView.bounds)
webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
cell.contentView.addSubview(webView)
The autoresizing mask makes sure that if the cell's content view size changes, the webview will be resized as well. Since the content view is managed by iOS, the webview will always be the width of the tableview and the height will be whatever you provide in the delegate method heightForRow. Notice also, we never add subviews directly on to the cell, always on to it's contentView.
Next, we'll do the same for the imageCell:
let image = UIImage(named: "logo")
let imageView = UIImageView(frame: cell.contentView.bounds)
imageView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
imageView.contentMode = .aspectFit //this makes sure the image take ups the full size of the image view, but no more. and this keeps the image's aspect ratio. Adjust this to other content modes if necessary.
imageView.image = image
cell.contentView.addSubview(imageView)
Ok, now we have cells that are being setup and leaving the sizing out of the equation. So let's get sizing working in the right place:
The biggest challenge that you'll face in building this is getting the cell heights right. Since the images are in your bundle, you'll know their size as soon as you instantiate the UIImage, however we don't want to do this more than absolutely necessary. You might want to come up with a more performant way of doing this later, but for now we'll create a UIImage and get it's height:
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
if thisSection.type! == "html" {
return self.contentHeights[indexPath.row]
} else if thisSection.type! == "image" {
let image = UIImage(named: "logo")
let imageHeight = (image.size.height * tableView.bounds.size.width) / image.size.width // The proportional size of the image stretched to the table view's width
return imageHeight
}
}
Your method for calculating the web view height and reloading cell might work, but it might appear clunky to the user. My suggestion at this point would be to return a fixed height for the web content. When the user taps a web cell, you can push a new view controller with a web view that can display all the content. Otherwise you can try having all of your html generate web content of roughly the same size.
Ok, this was long but hopefully gets you off to a good start :) I'm happy to follow up if you need more clarification.