Question

When you open Mail on an iPhone and tap Edit, select an email and tap Move, a UITableView appears with all the folders you can put the mail in. At the top is a transparent view that shows the email you selected. When you move your finger down, the view stays in place, when you move it up, the cells are visible through the transparent view.

How did apple configure this view? I thought of two ways, but they both don’t work:

• The view is returned as the header view of the UITableView. Doesn’t work because the view stays at the top even if the table view is moved down.

• The view is static at the top, the frame of the table view starts at the bottom of the transparent view. This doesn’t work because when the table view is moved up, it is visible through the transparent view.

Any ideas on how to recreate this effect?

Answer 1

You need to create your transparent view and then add it as a subview to the view controller so it’s a sibling of the UITableView. You would do this in the viewDidLoad() method.

- (void)viewDidLoad
{
    int viewHeight = 50;

    // Assume myTableView is a UITableView variable
    myTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height - 44) style:UITableViewStylePlain];
    myTableView.scrollIndicatorInsets = UIEdgeInsetsMake(viewHeight, 0, 0, 0);
    myTableView.contentInset = UIEdgeInsetsMake(viewHeight, 0, 0, 0);

    UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(0,0,self.view.frame.size.width,viewHeight)]; 

    // Configure your view here.
    myView.backgroundColor = [UIColor colorWithRed:0.0 green:0.7 blue:0.8 alpha:0.75];

    [self.view addSubview:myTableView];
    [self.view addSubview:myView];
    [myView release];

}

You could also setup your view using an XIB, but I’ll leave that as an exercise for you.

Edit: Removed the requirement for the the UITableView delegate methods and custom header view by using the contentInset property instead.

Note: see additional comments below.