How to create a Facebook-App style notifications custom table?
- by Tim Büthe
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:...".
My code in "tableView:cellForRowAtIndexPath:" looks like this:
UIButton *usernameButton;
UILabel *mainLabel, *secondLabel;
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
// cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
cell = [[[UITableViewCell alloc] initWithFrame:CGRectMake(0.0, 0.0, 220.0, 60.0) reuseIdentifier:CellIdentifier] autorelease];
[cell setBackgroundColor: [UIColor yellowColor]];
usernameButton = [[[UIButton alloc] initWithFrame:CGRectMake(0.0, 0.0, 220.0, 15.0)] autorelease];
usernameButton.tag = USERNAME_BUTTON_TAG;
// ... format, font etc.
usernameButton.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight;
[cell.contentView addSubview:usernameButton];
mainLabel = [[[UILabel alloc] initWithFrame:CGRectMake(0.0, 20.0, 220.0, 15.0)] autorelease];
mainLabel.tag = MAINLABEL_TAG;
// ... format, font etc.
mainLabel.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight;
[cell.contentView addSubview:mainLabel];
secondLabel = [[[UILabel alloc] initWithFrame:CGRectMake(0.0, 40.0, 220.0, 15.0)] autorelease];
secondLabel.tag = SECONDLABEL_TAG;
// ... format, font etc.
secondLabel.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight;
[cell.contentView addSubview:secondLabel];
} else {
usernameButton = (UIButton *) [cell.contentView viewWithTag:USERNAME_BUTTON_TAG];
mainLabel = (UILabel *)[cell.contentView viewWithTag:MAINLABEL_TAG];
secondLabel = (UILabel *)[cell.contentView viewWithTag:SECONDLABEL_TAG];
}
usernameButton.titleLabel.text = @"Peter";
mainLabel.text = @"sent you a message: ...";
secondLabel.text = @"11 minutes ago";
return cell;
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 an example of the cell's content:
Peter sent you a message: "Hello! What are you doing?"
Peter should be click/tab-able and his message, which has a variable length, should be italic and wrapped if necessary.
