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