Explanation Table View

10 August 2014

When I released Daily Offers 1.3 back in July 2013, it was the most significant update I’d done to the app since launch.
The headline feature of that release was the ability to search for supermarket offers or products and allowing searches to be given a name and saved.

The entry point to this feature is the Search All Offers screen, which is a table view listing your saved searches that’s accessed from the Daily Offers
home screen. It implements the usual table view editing features of being able to delete your saved searches and change their order.

The basic approach I took to achieve this is to have a SPSSearchViewController that subclasses UITableViewController. The table view within this view controller is
set to a new SPSExplanationTableView that subclasses UITableView. Here’s the header file code for SPSExplanationTableView:

As you can see, it just has a single property for an SPSExplanationView. This is the bordered view that will contain the explanatory text and sit in the
middle of the table view when it’s empty. It’s exposed as a property so the view can be hidden by the search view controller after some searches have been saved.
The header for SPSExplanationView has a single convenience constructor method (I guess you’d call this a factory method in languages such as Java):

The tableView:explanationWithText: convenience constructor creates an SPSExplanationView and passes it the passed text to display within the view.
It then adds this new view as a subview of the passed table view. The initWithText: constructor does some maths to calculate the y position of
the view. This is because the iPhone currently has two different screen heights and we want the view to be nicely vertically centred within its parent table
view. It uses a macro named RETINA_4_DISPLAY to calculate the screen dimensions of the device on which it’s running. I got this macro from a Stack Overflow answer and
it looks like this:

Now obviously all this positional code will have to be revisited once the rumoured larger screen iPhone(s) is/are on sale. It’s most definitely not forwards-compatible!
The rest of the initWithText: method is simply concerned with setting up the appearance of the view and adding a UILabel to it for displaying the explanation text.

You’ll hopefully remember that the SPSTableView class contained a single property for holding an instance of the SPSExplanationView class we’ve just been examining.
Here’s the implementation of SPSExplanationTableView:

The awakeFromNib message is sent when the class is loaded from an Interface Builder archive or a nib file. SPSExplanationTableView uses this opportunity to set its SPSExplanationView property to a new
instance using the tableView:explanationWithText: convenience constructor we saw earlier. It passes itself as the table view and some text that explains how to use the search feature. I found that I also had
to override the layoutSubviews method to make sure the SPSExplanationView appeared in front of its parent table view.

As a pedantic aside, Apple should really have named this method LayOutSubviews (with the capital "O"), as the verb lay out is different to the noun layout, and
laying out subviews is what we’re doing here. Anyway, with all that work done, here’s what the final result looks like in Daily Offers. Not too shabby!