UITableView custom header (like FoodSpotting app)

Question

Could somebody explain how this app (FoodSpotting), creates their custom section h

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.