Two questions regarding this iPhone UI

Question

I'm taking a look at some basic UI principles that the mint.com team put into the iPhone application. A quick screenshot that I'm referencing is here: http://tinyurl.com/dm5j9d

I have two questions regarding this UI:

1) There is an elegant space between the UITableViewCell's in which you can see the mint green background of the UITableView. I don't happen to see any delegate method that allows to set a spacer between cells. How is this typically done?

2) The last cell has what appears to be a UIView with the last updated time from the server. This UIView scrolls in sync with the table. Is it just an additional UITableViewCell styled differently from the rest of the cells and appended to the table?

Answer 1

The space may be inter-section spacing, or it may just be empty space within their custom cells.

The view at the bottom is probably a tableFooterView. This view (and its matching tableHeaderView) appears at the bottom of the table and scrolls with it.

EDIT: On second thought, that actually depends on what you mean by "scrolls with it". If it scrolls just like a normal cell, it's a tableFooterView; if not, it might be a section footer (I've never tried using these).

Answer 2

1) The app is certainly using a custom tableFooterView, since you can see the shadow under the cell.

Mint either set the background color of the table view to that minty-green and added a slightly-transparent PNG for the shadow, or the green bar + shadow is a PNG itself and is used as the footer view.

There is a delegate method to define the height of the header/footer, however. Using this in combination with the custom footer view is your best bet.

2) I would assume that the updating view is just a custom footer view for the last section (if that's how they've configured their table).

Eg:

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {
    if (section == 4) {
        // return updating time view
    } else {
        // return default shadow view
    }
}