Custom UIAlertView with UITableView

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.

Hi Jake,
Like Raj, I m in trouble = I can not manage to use your code :(
it s crashing when I init the AlertTableView (client side ) ! My fault, for sure =)
So could you post or send me a little example with a nsarray ?
many ( you can not count all of them ;) thanks in advance !!

I just hit the issue I think Stephen is describing. The row heights don’t seem to line up with the padding created by the message string for row sizes less than 6. (It works for 6 or more because you’ve hardcoded the table height.)

I think the problem has less to do with the code, and more to do with a change in the iPhone API. setFont: and setText: are now deprecated, and the suggested replacements are [textLabel setFont] and [textLabel setText]. I suspect that in the process of deprecation the implementation changed, which affects cell heights. That’s all that’s going on.

Got it. I twiddled the row height to 42 when calculating tableHeight, and implemented the UITableViewDataSource method tableView:heightForRowAtIndexPath: that returns 42 in UIAlertTableView.m, which makes the cells actually 42 pixels high. (I chose 42 because it’s approximately 207/5, so in line with the “6 or more” case.) Seems to work well.

Hi great examples !!! I try hard to find a way to put an image, (logo company) at the top of my tableview. But I didn’t find any solution. How did U managed to do it ?
(I don’t have any view, just a tableview, so addsubview doesn’t work)