UIButton in UITableView Footer

Published on July 4, 2009 by Andreas in I talk code and iPhone OS. 13 Comments Tags: , , , , , .

Once upon a time, there was a pretty UITableView within my iPhone user interface. This table included some UITableViewCells which were used to provide some information of a specific data record. At this time I thought that it would be nice to have a big red delete button at the end of the table (like we can locate it in the edit mask of the Apple Calendar App).

To realize such a button at the end of the table we can simply use the ability to define our own footer view for each section within a UITableView. The next steps describe how we can do that for a single section.

1. First of all we define a new UIView within our interface declaration.

@interface ... {
    ...
    UIView *footerView;
}

2. Then we have to provide the specific height for our footer view in our UITableViewDelegtate implementation.

// specify the height of your footer section
- (CGFloat)tableView:(UITableView *)tableView
	heightForFooterInSection:(NSInteger)section {
    //differ between your sections or if you
    //have only on section return a static value
    return 50;
}

3. The last step is to create and customize our footer view within the UITableViewDelegtate implementation. The following code shows how to create a footer view which contains a big red glossy button (here you will find images for glossy buttons).

// custom view for footer. will be adjusted to default or specified footer height
// Notice: this will work only for one section within the table view
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {
 
    if(footerView == nil) {
        //allocate the view if it doesn't exist yet
        footerView  = [[UIView alloc] init];
 
        //we would like to show a gloosy red button, so get the image first
        UIImage *image = [[UIImage imageNamed:@"button_red.png"]
		stretchableImageWithLeftCapWidth:8 topCapHeight:8];
 
        //create the button
        UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        [button setBackgroundImage:image forState:UIControlStateNormal];
 
        //the button should be as big as a table view cell
        [button setFrame:CGRectMake(10, 3, 300, 44)];
 
        //set title, font size and font color
        [button setTitle:@"Remove" forState:UIControlStateNormal];
        [button.titleLabel setFont:[UIFont boldSystemFontOfSize:20]];
        [button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
 
        //set action of the button
        [button addTarget:self action:@selector(removeAction:)
                        forControlEvents:UIControlEventTouchUpInside];
 
        //add the button to the view
        [footerView addSubview:button];
    }
 
    //return the view for the footer
    return footerView;
}

4. If everything worked well, you will get a user interface like that:

Footer in UITableView

I hope you found this information useful and I wish you much fun with your future individual footer views for your UITableViews.

13 Responses to “UIButton in UITableView Footer”

Feed for this Entry Trackback Address
  • Paul
    August 16, 2009 at 7:51 pm

    This is really useful. I was trying to create a button similar to the Delete Contact. Thanks.

  • ned
    September 28, 2009 at 4:52 pm

    Thanks nice tutorial.
    I'm using this in UITableVIew, however when the uitable loads… it is showing right away and overlaying on top of the cell. How do I get the button to show only at the bottom of rows?

  • F.R.E.E
    October 8, 2009 at 2:55 am

    it kind of works for me, I get the button displayed, but the hot spot is about 2 pixels wide in the upper left corner of the button…

  • Vivar
    October 22, 2009 at 4:46 pm

    Thanks.
    I have the same problem as F.R.E.E – the hot spot is about 2 pixels wide in the upper left corner of the button. Do you know how to modify the hot spot region?

  • Steve
    January 14, 2010 at 11:48 am

    Hi
    Thanks for the tutorial

    Its kind of working but my rounded rect button is showing square, any thoughts?

  • victo
    March 2, 2010 at 2:13 pm

    nice tutor dude,
    however addsubview will increase the retain count by 1, so you should release the added view

  • Robbo
    April 17, 2010 at 8:03 pm

    I get the same issue – the button is totally square. Tried playing with the values but to no avail. has anybody fould a solution to this? The code looks fine to me.

  • David Schiefer
    May 24, 2010 at 8:09 pm

    The Button does appear, it hides whenever i scroll down to the bottom of the UITableView though :/

    • anka_
      June 15, 2010 at 8:32 pm

      Hi David,

      yes that's true, because it is the footer of a section and if your table view is scrollable it will hide if you scroll down. So the only way you can avoid this is to set scrollEnabled=NO of your table view or you have to place your button separately on a additional view in front of your table view.

      Cheers,
      Andreas

  • emilie
    June 22, 2010 at 9:21 am

    Hi thanks for this tutorial.
    However, I have a problem. My button appears, on perfect place. But, when I click on, I can't access to -(void) acquit_clicked:(id)sender;
    I wrote – (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {
    …
    [redButton addTarget:self action:@selector(acquit_clicked:) forControlEvents:UIControlEventTouchUpInside];
    …} and acquit_clicked method looks like :
    -(void) acquit_clicked:(id)sender{
    NSLog(@"ça passe dans la méthode pour acquitter l'alarme");
    }
    But nothing is printed in the console.
    Can't understand…
    Does anybody encounter the same issue ?Thanks
    Emilie

  • dhvidding
    July 3, 2010 at 1:21 am

    Thanks so much… That was very helpful.

  • prateek
    July 8, 2010 at 10:00 am

    hi
    button don't pressed when shown in simulator. plz help

Leave a Reply