How to make UITableView Like Below Image?

Question

How to make UITableView like above image?

I know this is grouped table type. but how we can add the image+label+button to header of section.

I have tried

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section

but it starts with CGRectMake(0,0,320,height).

I want just above section and exact width of section just like in image.

Thanks in advance.

Answer 1

CustomCell.h

#import <UIKit/UIKit.h>

@interface CustomCell : UITableViewCell{
    id delegate;
    NSIndexPath *indexpath;
}
@property(nonatomic,assign) id delegate;
@property(nonatomic,retain)NSIndexPath *indexpath;
@property(nonatomic,retain) IBOutlet UIToolbar *Toolbar;


-(IBAction)SelectorLeft:(id)sender;
-(IBAction)SelectorRight:(id)sender;
@end

customcell.m

#import "CustomCell.h"
#import <QuartzCore/QuartzCore.h>
@implementation CustomCell
@synthesize Toolbar;
@synthesize delegate,indexpath;
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // Initialization code
    }
    return self;
}
-(IBAction)SelectorLeft:(id)sender{
    [delegate perfromselector:@selector(left:) withObject:indexpath];
}
-(IBAction)SelectorRight:(id)sender{
    [delegate perfromselector:@selector(left:) withObject:indexpath];
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}

@end

UItbaleView part

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *identifier = @"identifier";
    NSUInteger row = [indexPath row];

    if (row == 0) {
        CustomCell *cell = (CustomCell*)[tableView dequeueReusableCellWithIdentifier:identifier];
        if (cell == nil) {
            self.Cell = nil;
            [[NSBundle mainBundle] loadNibNamed:@"CustomCell" owner:self options:nil];
            cell = self.Cell;
        }
        cell.Toolbar.clipsToBounds=YES;
        CALayer *l=cell.Toolbar.layer;
            // set corner radious
        [l setCornerRadius:10];
            // to apply border on corners
        [l setBorderColor:[[UIColor clearColor] CGColor]];
            // to apply set border width.
        [l setBorderWidth:5.0];

        return cell;
    }else{
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
        if (cell == nil) {
            cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier] autorelease];
        }
        cell.textLabel.text = [NSString stringWithFormat: @"cell %i",row];
cell.delegate = self;
cell.indexpath = indexpath;
        return cell;

    }
    return nil;
}

Also do n't forget to create Customcell.xib and add tool bar through interface builder also create an outlet of CustomCell in tableview class and handle it as above

Answer 2

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
        //create btn left each on handeled by selector
    UIBarButtonItem *btnleft = [[UIBarButtonItem alloc] initWithTitle:@"List of sms" style:UIBarButtonItemStylePlain target:self action:@selector(ListClicked:)];
     //create btn right each on handeled by selector
    UIBarButtonItem *btnright = [[UIBarButtonItem alloc] initWithTitle:@"New" style:UIBarButtonItemStyleBordered target:self action:@selector(NewClicked:)];
        //create uitoolbar then add btns to it as list of array
    UIToolbar *tool = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
        //change style of toolbar to be black
    [tool setBarStyle:UIBarStyleBlack];
    tool.items = [NSArray arrayWithObjects:btnleft,[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil],btnright, nil];

        //this is the parent view that we will add on it the uitoolbar objects and the buttons
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
    [view autorelease];
    [view addSubview:tool];

    return view;
}
-(void)ListClicked:(id)sender{
        //handle here btn left
}
-(void)NewClicked:(id)sender{
    //handle here btn right
}
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
    return 44;
}

if you want the cell not to be in the header you can check for first row in cellforrow at index path... also if you want to do it in another style you can make custom cell and add it also to cellforrowatindexpath

Answer 3

Instead of trying to change the section header view, you might want to create a custom cell with a brown background, a label and a button and use it for the first row. So, in -cellForRowAtIndexPath, you could do something like

if (0 == indexPath.row) {
  return brownCell;
} else {
  return normalCell;
}

There are several ways to create custom cells, I always start from the Table View Programming Guide for iOS.

Answer 4

its easy all what you have to

    -(UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
        NSUInteger row = [indexPath row];
        if (row % 2 == 0) {
            static NSString *identifier = @"RowOne";
            UITableViewCell *cell = (RowTypeOne*)[tableView dequeueReusableCellWithIdentifier:identifier];
            if (cell == nil) {
            cell = [UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault]autorelease];
            }
            cell.Title.text = [datasource objectatindex:row];
            cell.Title.font = [UIFont fontWithName:@"Tahoma" size:16];
cell.contentView.backgroundColor = [UIColor redColor];
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
cell.textLabel.textAlignment = UITextAlignmentRight;
            return cell;
        }else if (row % 2 == 1) {
            static NSString *identifier = @"RowTwo";
            UITableViewCell *cell = (RowTypeOne*)[tableView dequeueReusableCellWithIdentifier:identifier];
            if (cell == nil) {
            cell = [UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault]autorelease];
            }
cell.contentView.backgroundColor = [UIColor redColor];
            cell.Title.text = [datasource objectatindex:row];
            cell.Title.font = [UIFont fontWithName:@"Tahoma" size:16];
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
cell.textLabel.textAlignment = UITextAlignmentRight;
            return cell;
        }
        return nil;
    }