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.
First of all we define a new UIView within our interface declaration.
@interface ... {
...
UIView *footerView;
}
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;
}
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.
// 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;
}
If everything worked well, you will get a user interface like that:

Leave a Reply