Feel free to follow me on twitter


Posted on Nov 20, 2013

I had to make a call as to how the user would initially choose their destination station and it was a weigh up between a UIPickerView or a button which presented a UITableView modally. The picker view (in my opinion) looks more aesthetically pleasing and contributes the minimal design but if you’re looking for a station like ‘Wolverhampton’ which comes near the end of the list over 2700 stations, you find yourself scrolling for far too long.  The tableview would have allowed me to implement a ‘search’ box which would be less time consuming for the user, however it adds an extra step to the process and doesn’t feel as ‘clean’.

In the end I decided, based on the fact that users can fast access stations from the ‘recents’ menu  to go with the picker. But to aide it’s use I separated it into two components, one containing each letter of the alphabet and the other containing the stations. The trouble is, Apple doesn’t provide any code for linking the two, so for example when you scroll to the letter ‘H’, the second component doesn’t automatically scroll to the first item beginning with ‘H’, you have to do this yourself. It also needs to work the opposite way, so both components are always in sync. To further complicate matters, I wanted to highlight the selected station in a different colour to make it clear a station has been chosen which involved implementing UIPickerView’s delegate method:

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view

For completeness, here is my solution for making this all work, I opted to used Apples block based indexOfObjectPassingTest method to obtain the index in the array of stations to scroll to based on the users selection.