Easy custom UITableView drawing

Question

All,

I found the code in Matt Gallagher site ( http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html ) for this really neat design for a Table View... Im very new to Cocoa and Im having a hard time figuring out how to wire the darn thing in IB...

I loved the design and wanted to use something similar in a more complex structure... Nav Bar / Tab Bar with a few other views / TableView for the data in the first view... I found lots of tutorials to do that and got it working... When I tried to use that design in my project, things went crazy... in My MainWindow.xib I cant have a UIView where the arrow is pointing...

the nib looks like this:

Tab Bar Controller
 Tab Bar
 Nav Controller
      Navigation Bar
      Table View Controller
         Table View
---->>>>     (UIView for the backgroundImage ) 
         Navigation Item
      Tab Bar Item
     UIView Controller
      Tab Bar item
  Window

can anyone guide me in the right direction??

Thanks !!!

Answer 1

It sounds like you're not having issues with the table view as much as the construction of the hierarchy around the table.

Instructions for creating the hierarchy would be as follows. I think you've diverged at around step 9:

1. Start with new copy of the default iPhone "View" template
2. Throw away the view controller class.
3. Open the MainWindow.xib and delete the view controller there too.
4. Find the controllers in the Interface Builder library palette (they're the yellow spheres at the top of the "Cocoa Touch" library in "Objects" mode whose icons contain other objects).
5. Drag the tab view controller into your MainWindow.xib file at the top level.
6. Expand the tab view (triangle next to its name in the list view of the xib)
7. Drag a navigation controller into your expanded tab view (if this works, it should appear as one of the tabs along with the two view controllers that are there by default)
8. Expand the navigation controller
9. Drag a view controller (not a table view controller) into the navigation controller. It should appear as the content of the navigation controller.
10. Select the view controller (single click).
11. Press Command-4 (or select "Identity Inspector" from the "Tools" menu).
12. In the "Class Identity" popup menu, select EasyCustomTableController (this assumes that the current xib file is part of an Xcode project and this Xcode project already has EasyCustomTableController added to it).
13. Add a UIImageView to the view controller's view (this is your background image)
14. Add a UITableView to the view controller's view (this is your table). Add this view so it is after (and hence on top of) your image view.
15. There should be a tableView outlet on the view controller. Connect this to the table view.
16. Connect the app delegate's viewController to the tab bar controller (back in Xcode you can optionally change the type of this property to UITabViewController)

Should work.

The trick is that UITableViewController can't be used if you want the view to contain more than just a table. For this reason, you must use UIViewController and recreate the functionality that the UITableViewController adds. See here for how this is done:

http://cocoawithlove.com/2009/03/recreating-uitableviewcontroller-to.html

Answer 2

Thank you Matt (kind of cool that you answered)!!

I really appreciate the help... I've been messing around with it and got it to work using a UIViewController in another view (being created from the tableview)... Once I had the UITableViewController in the navigation I dropped the imageview & used a gray color; it looks great!! The initial screen has the rows big enough that scrolling is not an issue... I will go back and try to change that now...

I do have to say that IB is by far the most challenging step in app development for a newbie coming into Cocoa Touch !!! Yikes!