UITableViewCell subclassed - background for specific position

Question

Hi everyone,

i just created a subclass of uitableviewcell and used it in my cellforrowatindexpath.

after adding a simple uilabel my cell looks currently something like this:

my aim is to style the cell like

but how to do that? first i thougt about simply adding a uiimageview and sending it to back with the rounded corners and the arrow in it.

but in real this are three different types of a cell. one for top, one for the middle part, one for the bottom part of a section.

any hints how to handle this three "custom" cells in one subclass of uitableviewcell? thanks for all tips!

choise

// if anything is unclear, leave a comment! ;)

Answer 1

Using CustomCell may resolve your problem. Learn how to to add UILabel and UIImage into a Cell.

http://iphone.zcentric.com/2008/08/26/uiimageview-in-a-custom-cell/

Answer 2

you can use the layer to edit a specific UI-element. (default TableView, not grouped)

myTable.layer.cornerRadius = 7.0;
myTable.layer.borderWidth = 1;
myTable.backgroundColor = [UIColor colorWithRed:0.89 green:0.89 blue:0.89 alpha:1.0];

Getting the .layer to working you should #import <QuartzCore/CAAnimation.h> and also link the QuarzCore.framework (Project Target -> General -> "Add"-Button)

For the arrow you should use an image and replace the default disclosure button. I have not the time to do all the rest, but I'm sure you will ask again if somethings not right ;)

Answer 3

ok, now I understand that you want to redesign a grouped table view. I have made an sample application: Download (mediafire.com 55kb)

Here the Code:

#define numberOfRows 5

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 2;
}

- (NSInteger)tableView:(UITableView *)table numberOfRowsInSection:(NSInteger)section {
    return numberOfRows;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    if (indexPath.row == 0)
        return 42;
    else
        return 41;
}

- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *kCustomCellID = @"CustomCell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kCustomCellID];
    if (cell == nil)
    {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:kCustomCellID] autorelease];

        UIImage *theIMG;
        if (indexPath.row == 0) // you have to make a fourth image if only one cell exist
            theIMG = [UIImage imageNamed:@"1.png"];
        else if (indexPath.row == numberOfRows -1) // the last cell
            theIMG = [UIImage imageNamed:@"3.png"];
        else
            theIMG = [UIImage imageNamed:@"2.png"];

        UIImageView *mg = [[UIImageView alloc]initWithImage:theIMG];
        cell.backgroundView = mg;
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
    }
    // check out how large your image should be if the table is not over the full screen
    //NSLog(@"Row:%i Width:%f", indexPath.row, cell.backgroundView.frame.size.width);

    cell.backgroundColor = [UIColor clearColor];
    cell.textLabel.text = @"TEXT";
    return cell;
}