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:
I hope you found this information useful and I wish you much fun with your future individual footer views for your UITableViews.
This is really useful. I was trying to create a button similar to the Delete Contact. Thanks.
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?
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…
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?
You probably forgot to implement heightForFooterInSection in your class. Simply set the footerView background color to see where the footer view really is…
Hi
Thanks for the tutorial
Its kind of working but my rounded rect button is showing square, any thoughts?
nice tutor dude,
however addsubview will increase the retain count by 1, so you should release the added view
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.
The Button does appear, it hides whenever i scroll down to the bottom of the UITableView though :/
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
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
Thanks so much… That was very helpful.
hi
button don't pressed when shown in simulator. plz help