I have been working on a story: “As a user, I should be able to search for hotels around a given location so that I can add the hotel to my trip.”.

I built my basic form for the user to fill out the location information and provided my awesome continue button to get hotels:

I quickly realized that the user’s location could be resolved to more than a single place. If the user entered in county: US and then city: Greenville, there would be 10 or so matches. I would need the user to choose which was the correct city. One way to do this would have been to take the user to a new UITableViewController with all the matches and ask the user to choose a match, then pop then continue on to find the hotels around the selected location. While this would work, I dont like it. What if it worked like Google Maps? The Google Maps application shows the user a UIAlertView with an embedded TableView. It’s pretty clean. It works well because the user does not need to go to a separate page to choose a location match. I want my user to have this same experience.

If you have used the UIAlertView much, you know it is very limited on custimization opportunity. I decided to subclass UIAlertView to build my new location selector. I ran into a few “a ha” moments when trying to mimic the Google Apps look and feel. First, their UIAlertView has rouned top and bottom corners that are independent of the TableView. They are actually using a PlainStyle TableView and when you scroll the table in the alert, the table looks like it is sitting inside of a rounded rect UIScrollView. Tricky Indeed!

Our solution was to use some transparent rounded corners with a dropshadow on the top image. We also wanted the height of the custom alert to be dynamic based on the size of the embedded UITableView. However, UIAlertViews do not have a frame or height property. The height of the UIAlertView is based on the length of its message property. Our solution to this problem was to identify the number of rows in the table and add return characters to the message property of the UIAlertView.

Here is what it ended up looking like:

This entry was posted on Thursday, March 26th, 2009 at 9:03 am and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.