UITableView custom header (like FoodSpotting app)

Question

Could somebody explain how this app (FoodSpotting), creates their custom section header? It has a translucent black background, image of the user, and some nice text (loaded up from a server no doubt). My 2 big questions here are:

1. How does the app get the nice black translucency on the section header? 2. How do they get that little triangle arrow attached to the header?

I can pretty much figure out everything else based on using a custom view for the section header.

Answer 1

The Section header is a UIView just like any other. You can create it as beautiful, as complex, or as elaboarate as you like, using Interface Builder if you want, etc. Your table delegate's tableView:viewForheaderInSection is responsible for returning it, just like it is for other cell rows.

As to the little triangle: yeah, this threw us for a bit (we wanted something similar in our app) until we discovered that you can overlap the view with the row by "lying" about it's height: ie tableView:heightForHeaderInSection: returns a value slight less than it actually is. May not be the "right" way, but worked very nicely for us. Like this:

So the header is actually a perfect rectangle, mostly see-through at the bottom, with a small triangle "peeking" out:

Tell iOS that the header is 80px high, like this:

- (CGFloat) tableView:(UITableView *) tableView 
  heightForHeaderInSection:(NSInteger) section {
    return 80;
  }

and it’ll start to draw the “food” row at 80px. Because headers are on top, and because most of header bottom is transparent except for arrow, you should get this effect.

Answer 2

I achieved the desired result in a different way. Instead of using tableView:viewForheaderInSection: (which doesn't work for me), I added an image view that holds the arrow image as a subview of the header view, and set the frame to be just below the header:

// Inside HeaderView.m

UIImageView *arrowImageView = [[UIImageView alloc] initWithImage:self.arrowImage];
arrowImageView.frame = CGRectMake(arrowX, frame.size.height, self.arrowImage.size.width, self.arrowImage.size.height);
[self addSubview:arrowImageView];
[arrowImageView release];

If you watch closely, there are two files (following-captionbubble-dark.png and [email protected]) in Foodspotting.app which look exactly like the arrow shown above in the question. So I guess they might have used a similar technique. Kudos to the Foodspotting team.