UIButton in UITableView Footer

04 Jul 00:00 , Andreas Katzian

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:

Recent Posts