Mobile event viewer: User Interface

This is the second post of a series of tutorials for creating an event viewer for iOS. You can find the first post, which deals with basic architecture an network connections, here.

There’s also an accompanying Github project.

This post will be about the user interface. Since no built-in control exist for mimicking the calendar day view in iOS (neither in Android) and I’m not very great drawing controls, I started checking for open source implementations. There’s a very easy to use project on Github by muhku, called calendar-ui.

What we need from it is the MADayView class, along with MAEvent. MADayView, as the name suggests provides a view which renders the calendar day view. It has a delegate and a datasource property. In my example, I rigged both, but only used the datasource. Here’s how I set up the view.

EventListViewController.h changed a little:

As you can see, I imported MADayView.h, and added its datasource and delegate protocols to the header. I also added an IBOutlet for MADayView, and connected it to its counterpart in EventListViewController.xib. Basically the UITableView implementation was replaced to an MADayView implementation. In EventListViewController.m there are some changes too:

The main change here is that instead of UITableView I use MADayView. Its datasource protocol is very easy to satisfy, only a method with the signature: (NSArray*)dayView:(MADayView*)dayView eventsForDate:(NSDate*)startDate needs to be implemented.

This method unfortunately needs to return an array of MAEvent objects. I like to separate third party code from my, so I created a mapper which maps my own Event class to an MAEvent (a variant of the Adapter pattern). This way, if the very unlikely day would come when I want to change the UI in this tutorial, I could do with minimal changes. There are also two callback methods from MADayView which I put in there for paging: nextDate and previousDate. These should be the part of the delegate protocol, but I was sloppy and just use two selectors for the effect.

What may be interesting in these methods are the [actualDate yesterday] and [actualDate tomorrow] calls. These are implemented in a category on NSDate. The code looks like the following:

It simply uses NSDateComponents to increment or decrement the date on which it’s called (thus working with daylight saving times, leap years, etc.).

In the following post, I’ll show how to scroll between days to implement a truly native experience.