Transparent View at the Top of a UITableView

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

For the XIB method:

• Create a new UIViewController (with XIB)
• Add to it your UITableView and your UIView.

• Make them both subviews of the default UIView (called View) and make sure that they are added in the correct order. UITableView should be the first in the list, your view should be second (so your view is on top of the UITableView).

• In the .m file implement the minimum for UITableViewDataSource and UITableViewDelegate:

  -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;

  -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;

  -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;

  -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;

• In Interface Builder select the UITableView list and go to 'Connection Inspector'. There drag dataSource and delegate to 'File Owner'.

Save and run. You should be done now.

Answer 2

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.