CODEWITHSUNDEEP
iphoneuitableviewgeometry
zardon
zardon

Reputation: 2920

How to do a UITable cell with triangle indicator?

In the Linked in iphone application I noticed that they have a tableview, see the following picture with what appears to have a triangle indicator pointing upwards.

alt text

Notice how the tableview cell has a little triangle pointing upwards and is part of a tableview cell.

The triangle is the ---^--- part of the image.

I'm wondering. How do you make a UITableView with this triangle indicator, and what is this effect called?

Thanks

Upvotes: 1

Views: 988

Answers (2)

Sabby
Sabby

Reputation: 2592

Here is the code to do this,you need to have an image like arrow and put the following code in your CellForRowAtIndexPath Method...

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *celltype=@"cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:celltype];


    for (UIView *view in cell.contentView.subviews) {
        [view removeFromSuperview];
    }
    if (cell == nil)
    {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"] autorelease];
        cell.accessoryType = UITableViewCellAccessoryNone;;
        cell.backgroundColor=[UIColor clearColor];
        UIImage *indicatorImage = [UIImage imageNamed:@"indicator.png"];
         cell.accessoryView =
         [[[UIImageView alloc]
         initWithImage:indicatorImage]
         autorelease];
}

    UILabel *dateValueLabel = [[UILabel alloc] initWithFrame:CGRectMake(170, 68, 140,20 )];
    dateValueLabel.textColor = [UIColor whiteColor];
    dateValueLabel.backgroundColor=[UIColor clearColor];
    dateValueLabel.text=[NSString stringWithFormat:@"%@",[[productArray objectAtIndex:indexPath.row]valueForKey:@"PostedDate"]];
    dateValueLabel.font=[UIFont systemFontOfSize:14];
    dateValueLabel.numberOfLines=3;
    dateValueLabel.adjustsFontSizeToFitWidth=YES;
    [dateValueLabel setLineBreakMode:UILineBreakModeCharacterWrap];
    [cell.contentView addSubview:dateValueLabel];
    [dateValueLabel release];


    return cell;

}

Hope this will help you.I do it this way.........

Upvotes: 3

Brad The App Guy
Brad The App Guy

Reputation: 16275

It's custom.

There are two approaches you could take for this:

  1. Set the UITableView's separator style to none, and add a UIImageView to the UITableViewCell that has the separation line and the triangle drawn in. I would set the origin of the image view cells to be a negative number equal to the height of the triangle. You will have to set the clipsToBounds property to NO, on that UIIMageView as well as the cell's background view and the cell itself.

  2. Basically the same approach as 1, but instead of using a UIImageView, I would override the drawing method of the background view and draw the line using Quartz2D.

Also, I don't use the LinkedIn app, but it that area of content is not getting reused elsewhere or animated, you could make you life even easier, by combining area above and below the line with the arrow into one TableViewCell, and have the separator entirely cosmetic, using either a UIImageView or Quartz.

Upvotes: 5

Related Questions