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