How to create a Facebook-App style notifications custom table?

Question

I want to add a custom table to my iPhone app, that should look and work like the one used in the facebook app showing the notifications. It should contain rows with links in it. The text should be black, while the tap-able parts should appear blue.

As a already figured out, labels only have one font, color and so on and you can't mix styles within it, I would have to use different components. The tab-able text parts maybe UIButtons with custom style without any border.

I tried different approches to build the custom cell. I used Interface Builder, to layout components, but since the different parts have variable lengths they overlaid each other. I also tried to add instances of UIButton and UILabel as a subview to the cell's contentView as descibed in Apple's tutorial. The problem with this is that: The position and size of the components is fix and set when they get created using "initWithFrame:...".

In a nutshell, I want to add the labels and buttons without a fix position or size, the buttons clickable and the cell height should automatically set according to the content.

Here is a screenshot of the Facebook's App notifications view:

Answer 1

In your facebook example it seems that this is only one line with a linebreak.

To allow linebreaks, just add this to your cellForRowAtIndexPath

// load cell description; set nrOfLines to 0 to allow linebreaks
cell.detailTextLabel.numberOfLines = 0;

With that you should be able to deal with fixed positions an dynamic content.

Answer 2

Option 1: Use a UIWebview to display the text and format it as HTML. For the links, use a custom URL that sends back to your app which responds by displaying the appropriate view.

Option 2: Use the NSString UIKit Additions to directly manage either the size of the labels or to draw the text into images which can function as buttons. In either case, you will use the addition's methods to calculate the display size of the string in pixels and then adjust the size of the individual display view (label, button, image etc) as needed before the tableview's delegate returns the cell to the tableview.

Either options takes a lot of careful coding. It will be nice when the iPhoneOS supports attributed strings.

Edit:

It looks like Three20 has a styled text view. It also looks like you can put in tables and that it supports links. I haven't used it but it may do what you want.

Answer 3

You would think this would be easy, but it's actually pretty damn hard. UIKit isn't set up for this. The easiest way is to use the Three20 library -- at least read the code, so you'll get an understanding of what it takes.

There might be something in OS 4 that makes it easier. If you find out, please post it!