Search code examples
iosuitableviewuiwebviewnsattributedstring

Best approach for UITableViewCell with complex format

I'm new to iOS development pondering how best to approach a fairly simple design problem. I want to display a set of items, each one of which has the structure as sketched. In a given set, not more than 10's of items.

Sketch

Each item includes a thumbnail image, a heading, a blurb, and a set of buttons. There are two complications:

  1. The amount of text and number of buttons is variable.
  2. The text requires some internal formatting (italics and bold).

I've considered these approaches:

  1. Use a table view, with custom, resizable UITableViewCell, probably using something like OHAttributedLabel for the text. For the variable number of buttons, either lay these out programmatically or possibly use the new collection view (for older iOS, have to use 3rd party grid view).

  2. Use a table view with custom cell based on UIWebView.

  3. Do the whole set as one UIWebView.

  4. Use a table view with sections; each item having its own section and parsing out the buttons and text to rows.

Would love to get suggestions about how a more experienced iOS dev would approach this.

EDIT: I am now considering that the best way may be:

5) Use UICollectionView for the whole thing.

UPDATE: In the end, I laid the whole thing out in code as a custom table cell (ie., #1). This was a good choice, not only for the reasons given in the answer, but because as someone new to iOS development, it's something I needed to get under my belt. Didn't even use collection view for the buttons, because I was worried about performance and also the hassle of supporting iOS5.

I do think that using collection view for the whole design (#5) would have been an elegant solution, and I actually started down that path. However, some complications not shown in the simplified pic above made that unwieldy.

2nd UPDATE: #1 turned out to be a dead end. My final solution used a UIWebView (#3) - see answer.

Solution

  • I originally accepted (and implemented) @Daij-Djan's answer, but now I believe the best approach is #3 (UIWebView). It comes down to performance.

    UITableView strains to perform well with custom cells with subviews, especially in the context of cells with varying heights. The rows of buttons make the scrolling choppy. As suggested by Apple in Cells and Table View Performance , I made sure that subviews were all opaque, however there is no way to follow the suggestion of "Avoid relayout of content."

    Add onto that dynamic cell heights and attributed strings and these tables scroll pretty poorly. I suppose the next optimization would be to override drawRect, but at that point I decided to try UIWebView.

    UIWebView is not without its performance issues either! Its scrolling performance degrades pretty fast as the content grows, however, I can manage that by hiding content and letting user "open" it as desired.