UITableView and UIImage inside a UIView

Question

Hi,

I am developing an application that currently has a View Controller (call it ViewControllerX). The MainWindow.xib file contains the following:

File's Owner              UIApplication  
First Responder           UIResponder  
AppX App Delegate         myAppDelegate  
myViewControllerX         myViewControllerX  
Window                    UIWindow  

When I look at the MainWindow.xib in Interface Builder it shows View Loaded from "myViewControllerX". The myViewControllerX.xib file for this contains the following:

File's Owner              UIApplication  
First Responder           UIResponder  
MainView                  UIView
  Image View (image1.jpg) UIImage View (Inside MainView)
  Rounded Rect Button     UIButton (Inside MainView)
  Rounded Rect Button     UIButton (Inside MainView)
  Table View              UITableView  (Inside MainView)

On the Table View, I have the Outlets set to dataSource = File's Owner and Delegate = File's Owner. The Referencing Outlet is set to mTableView which is defined using IBOutlet in XCode. When I run this all works fine and the table gets populated.

When the users clicks an Item within the Table View I want a new view to slide into place, which also contains a TableView (basically the first View Controller shows an overview list, when the user clicks on an Item I want it to show the details of the choice). In the myViewControllerX.m file, I have the following code:

- (void)tableView:(UITableView*)theTableView didSelectRowAtIndexPath:(NSIndexPath*)theIndexPath 
{
[self.navigationController pushViewController:self.mViewControllerY animated:YES];
}

I have created a ViewControllerY and have the following files:

ViewControllerY.xib, ViewControllerY.m and ViewControllerY.h.

In the .xib file for ViewControllerY, I have:

File's Owner              UIApplication  
First Responder           UIResponder  
Table View                UITableView

When I run this it works (so the code and the hook-ups in Interface Builder are ok). The Problem is it takes over the whole of the view whereas want I want it to have an Image (and other UI objects) as well as a Table View. I've tried changing the UITableView of ViewControllerY to be of type UIView and then adding an UIImageView and UITableView inside of the UIView in a similar way to ViewControllerX but I can't get it to work and now I'm not sure what to do! So, my question is, how do I go about Implementing this? I'd like to be able to have it setup in Interface Builder, so how to I change it to handle this? e.g How do I hook up the dataSource, Delegate and Outlets etc.

Thanks in Advance for any help in this. I've tried all kinds of things but I just can't seem to get it to work. I'm sure I'm almost there and must be missing something that is very obvious!

All the Best Dave

Answer 1

Your UINavigationController uses a content view that more or less completely covers your device screen. And this view is used for your main view. If you ask this UINavigationController to push another view, he uses this very same view to swap in the ViewControllerYs view which also covers the complete screen.

To gain the behavior you need, you should create a second "embedded" Navigation Controller instance which is responsible only for that part that is initially by your table view. Display your table view as the main view and then ask this Navigation Controller to swap in your other views into this part of the screen.

Answer 2

After taking a step back and doing a bit more digging, I came up with the answer.

High Level Explanation.

ViewControllerY needs to be of class UIViewController, not UITableViewController. The ViewControllerY : UIViewController definition in the .h file should include the Table View Delegate and the Data Source protocols. A member of the ViewControllerY has to hold the UITableView* - call it mTableView and should be defined as an IBOutlet.

The table view delegate methods should then use self.mTableView to access the table.

In Interface Builder, the UIView Object needs to have an Outlet "view" hooked up to the File's Owner and the Table View inside the UIView needs to have the dataSounce and the Delegate set to File's Owner and the mTableView Outlet also needs to be hooked to the File's Owner.

Low Level Explanation.

in ViewControllerY.h do the following:

@interface ViewControllerY : UIViewController <UITableViewDelegate,UITableViewDataSource>
{
UITableView*  mTableView;
}

@property (nonatomic, retain) IBOutlet UITableView* mTableView;

In ViewControllerY.m, in the Table View Delegate methods, access the mTableView like so:

myNewCell = (UITableViewCell*)[self.mTableView dequeueReusableCellWithIdentifier:myCellIdentifier];

(obviously you need to define and handle all the other Table View Methods in the normal way.

ViewControllerY.xib should have the following in it:

File's Owner       ViewControllerY
First Responder    UIResponder
View               UIView
  Image View       UIImageView
  Table View       UITableView

Control Drag from the File's Owner to the View and select "view". Control Drag from the Table View to the File's Owner and select Data Source. Control Drag from the Table View to the File's Owner and select Deligate. Control Drag from the File's Owner to the Table View and select mTableView.

That's it! You can then add other UI objects inside the UIView and hook them up as appropriate in the normal way. I'm not sure if this is the only or best solution but is works and I'm happy with it.

Hope this helps someone with the same or similar problems. It's a bit confusing til you get the hang of it.