A transparent view at the top of the UITableView

Question

When you open Mail on iPhone and click “Edit”, select an email message and tap “Move”, a UITableView appears with all the folders in which you can put the mail. At the top there is a transparent view that displays your email address. When you move your finger down, the view remains in place when you move it, cells are visible through a transparent view.

How did Apple tune this view? I thought of two ways, but they both do not work:

• The view is returned as the view of the UITableView header. It does not work because the view remains at the top, even if the table view is moved down.

• The view is static from above, the table view frame starts at the bottom of the transparent view. This does not work, because when the table view moves up, it is displayed through a 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 subtask to the view controller so that it is a native 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 can also customize your presentation using XIB, but I will leave this as an exercise for you.

Edit: The requirement for UITableView delegation methods and a custom header using the contentInset property has been contentInset .

Note: see additional comments below.

Answer 2

For the XIB method:

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

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

• The .m file implements a 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 the dataSource and delegate it to the "File Owner".

Save and run. You must do it now.