Question

I am coding in xCode 4.3
This is my first application.

I have a UIViewController, company logo on top, then search bar and then UITableView in the middle (with product names) and bottom footer image. Now I want that once an item is clicked on UITableView, only TableView is replace with a view showing product details.

Right now I can replace the entire view with following code:

if (!self.prodDetailViewController_) 
{        
    self.prodDetailViewController_ = [[PCS1ProdDetailViewController alloc] initWithNibName:@"PCS1ProdDetailViewController" bundle:[NSBundle mainBundle]];
}
[self presentModalViewController:prodDetailViewController_ animated:YES];

But it just increases my work, because I will have to redo the top bar and bottom bar (which remains same in entire application) in all my views.
Is there a way that I just change the element of my main UIViewController to UITableView.

Thanking you in anticipation.

Answer 1

I’m going to assume you’re able to use iOS 5 features here. What you can do is implement a container view controller – much like UINavigationController, but with your own view layout so you can keep logo, search bar, etc. all in place and only transition between views in a part of your view.

I created a new container view controller named ViewController. It has a UIView outlet containerView which is set up in the .xib file, along with a top bar, search bar, and bottom bar (corresponding to the other views you describe in your application). It also has properties tableViewController and detailViewController. In its viewDidLoad implementation, it adds a TableViewController instance as a child view controller. When the table view is tapped, the view controller adds a DetailViewController instance as a child view controller and transitions to it. Tapping a button on the detail view transitions back to the table view, and removes the detail view controller as a child.

Here’s my viewDidLoad method:

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.tableViewController = [[TableViewController alloc] init];
    self.tableViewController.delegate = self; // I implement a protocol TableViewControllerDelegate to know when row is tapped

    // Fix for origin being 20 by default.
    CGRect frame = self.tableViewController.view.frame;
    frame.origin.y = 0.0f;
    self.tableViewController.view.frame = frame;

    [self addChildViewController:self.tableViewController];
    [self.containerView addSubview:self.tableViewController.view];
    [self.tableViewController didMoveToParentViewController:self];
}

I have a delegate method so that the container knows when a table row is tapped, and does the transition between the table view and the detail view. Its implementation follows:

- (void)tableViewController:(TableViewController *)tvc didSelectIndex:(NSInteger)index
{
    self.detailViewController = [[DetailViewController alloc] init];
    self.detailViewController.backButtonBlock = [self backButtonBlock]; // This block handles the transiton from detail back to table
    CGRect detailStartingFrame = self.detailViewController.view.frame;
    detailStartingFrame.origin.x = self.containerView.frame.size.width;
    self.detailViewController.view.frame = detailStartingFrame;

    [self addChildViewController:self.detailViewController];
    [self transitionFromViewController:self.tableViewController
                      toViewController:self.detailViewController
                              duration:0.5
                               options:0
                            animations:^{
                                CGRect newTableFrame = self.tableViewController.view.frame;
                                newTableFrame.origin.x = (-1.0f * newTableFrame.size.width);
                                self.tableViewController.view.frame = newTableFrame;

                                [self.containerView addSubview:self.detailViewController.view];
                                CGRect newDetailFrame = self.detailViewController.view.frame;
                                newDetailFrame.origin.x = 0.0f;
                                self.detailViewController.view.frame = newDetailFrame;
                            } completion:^(BOOL finished) {
                                [self.detailViewController didMoveToParentViewController:self];
                            }];
}

As mentioned above, the detail view executes a block when tapping on a back button. I create this block in ViewController here:

- (GoBackButtonBlock)backButtonBlock
{
    GoBackButtonBlock block = ^ {
        [self.detailViewController willMoveToParentViewController:nil];

        [self transitionFromViewController:self.detailViewController toViewController:self.tableViewController duration:0.5 options:0 animations:^{
            CGRect newDetailFrame = self.detailViewController.view.frame;
            newDetailFrame.origin.x = self.containerView.frame.size.width;
            self.detailViewController.view.frame = newDetailFrame;

            CGRect newTableFrame = self.tableViewController.view.frame;
            newTableFrame.origin.x = 0.0f;
            self.tableViewController.view.frame = newTableFrame;
        } completion:^(BOOL finished) {
            [self.detailViewController removeFromParentViewController];
            [self.detailViewController.view removeFromSuperview];
        }];
    };

    return [block copy];
}

That’s about all there is to it. Be sure to read the “Implementing a Container View Controller” section of the UIViewController class reference for more details. Hope this helps!