How to Use Container View Controller

Container View Controller is one of the interesting View Controllers that I used recently in XCode. Apple has provided many standard view controllers for iOS Developer in XCode such as Table View Controller, Tab Bar Controller, Navigation View Controller for most common standard projects for iOS developers. But for a certain projects with unique design, we have to use container view controller.

I have been using container view controller for a while and I love it. Here is a simple guide on how to use it. I will create a simple mobile app with 3 different view controllers:-

Simple Container View Controller Programming Example

1. MainVC
2. ProfileVC
3. Menu VC

Description
– Contain a navigation with 2 buttons.
– When the Profile button is clicked, the MainVC will slide to left and the ProfileVC will appear.
– When the Menu button is clicked, the Main VC will slide to right and the MenuVC will appear.

Container View Controller Project Setup

Update: I have been busy for the last few months, just updated this post on February 2014.

Step 1: Create a new project and delete the existing .h and .m file that was created by the XCode

Step 2: Create the subclasses below:-
MainVC, MenuVC, ContainerVC and ProfileVC subclass of UIViewController
ShareSetting subclass of NSObject

Step 3: Link the existing view controller objects on storyboard with ContainerVC.

Step 4: Drag and drop the Container View in storyboard into the ContainerVC View Controller object. Rename this Container View as “MenuVC”. The position and side for this container view should be X: -260 Y: 20 Width: 320 Height: 548. Attach the MenuVC subsclass to the view controller comes with the Container View.

Step 5: Drag and drop another Container View into the same view controller and name it as “ProfileVC”. X: 260 Y: 20 Width: 320 Height: 548. Remember to attach ProfileVC subclass to the created view controller.

Step 6: Drag and drop the last Container View and name it as “MainVC”. X: 0 Y: 20 Width: 320 Height: 548. Attach the subclass to the view controller.

Step 7: Change background for each view controller object (MainVC, MenuVC and ProfileVC) to different colors.

Step 8: Add a title to MenuVC and ProfileVC

Step 9: Add a simple navigation bar and 2 buttons to MainVC.

If you are doing correctly, you should see a screen shot similar to below:

Container View Controller Coding

1. ShareSetting
– This class is basically used to share actions/behavior for the same buttons across a few different view controllers. Although in this simple project, we only have 1 view controller that uses the buttons. In more complex projects, we usually need this ShareSetting. Add the following codes to the class.

In ShareSettings.h
#import “foundation.h”
@interface ShareSettings : NSObject
@property (nonatomic) BOOL menuTapped;
@property (nonatomic) BOOL profileTapped;
+ (id)sharedSettings;
@end

In ShareSettings.m

#import “ShareSettings.h”
@implementation ShareSettings
+ (id)sharedSettings
{
static id shareSettings = nil;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
shareSettings = [[self alloc] init];
});
return shareSettings;
}
@end

2. ContainerVC
– This is the main class that control the animation behavior for 3 different view controllers (MainVC, MenuVC and ProfileVC)

In ContainerVC.m
#import “ContainerVC.h”
#import “ShareSettings.h”
@interface ContainerVC ()
@property (weak, nonatomic) IBOutlet UIView *MenuVC;
@property (weak, nonatomic) IBOutlet UIView *ProfileVC;
@property (weak, nonatomic) IBOutlet UIView *MainVC;
@property (strong, nonatomic) ShareSettings * shareSettings;
@end

@implementation ContainerVC
– (void)viewDidLoad
{
[super viewDidLoad];
self.shareSettings = [ShareSettings sharedSettings];
self.shareSettings.menuTapped=NO;
self.shareSettings.profileTapped=NO;
}
-(void)viewDidAppear:(BOOL)animated{
[super viewDidAppear:animated];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(menuTapped) name:@”menuTapped” object:nil];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(profileTapped) name:@”profileTapped” object:nil];
}
-(void)viewDidDisappear:(BOOL)animated{
[super viewDidDisappear:animated];
[[NSNotificationCenter defaultCenter] removeObserver:self name:@”menuTapped” object:nil];
[[NSNotificationCenter defaultCenter] removeObserver:self name:@”profileTapped” object:nil];
}
-(void)menuTapped{
if(self.shareSettings.menuTapped){
[UIView animateWithDuration:0.3 animations:^{
self.MainVC.frame = CGRectMake(0, self.MainVC.frame.origin.y, self.MainVC.frame.size.width, self.MainVC.frame.size.height);

self.MenuVC.frame = CGRectMake(-260, self.MenuVC.frame.origin.y, self.MenuVC.frame.size.width, self.MenuVC.frame.size.height);
}];
} else{
[UIView animateWithDuration:0.3 animations:^{
self.MainVC.frame = CGRectMake(260, self.MainVC.frame.origin.y, self.MainVC.frame.size.width, self.MainVC.frame.size.height);

self.MenuVC.frame = CGRectMake(0, self.MenuVC.frame.origin.y, self.MenuVC.frame.size.width, self.MenuVC.frame.size.height);
}];
}
self.shareSettings.menuTapped=!self.shareSettings.menuTapped;
}
-(void)profileTapped{
if(self.shareSettings.profileTapped){
[UIView animateWithDuration:0.3 animations:^{
self.MainVC.frame = CGRectMake(0, self.MainVC.frame.origin.y, self.MainVC.frame.size.width, self.MainVC.frame.size.height);

self.ProfileVC.frame = CGRectMake(260, self.ProfileVC.frame.origin.y, self.ProfileVC.frame.size.width, self.ProfileVC.frame.size.height);
}];
} else{
[UIView animateWithDuration:0.3 animations:^{
self.MainVC.frame = CGRectMake(-260, self.MainVC.frame.origin.y, self.MainVC.frame.size.width, self.MainVC.frame.size.height);

self.ProfileVC.frame = CGRectMake(0, self.ProfileVC.frame.origin.y, self.ProfileVC.frame.size.width, self.ProfileVC.frame.size.height);
}];
}
self.shareSettings.profileTapped=!self.shareSettings.profileTapped;
}
3. MainVC
– This is the Main View Controller which contains the navigation bar, the Menu Button and Profile Button.
– The 2 buttons that were created on the storyboard should be “Control + Drag” into the subclass. So that there will be 2 functions created in the subclass and every time the button is tapped, we will receive the action in the functions.

#import “MainVC.h”
@interface MainVC ()
@end
@implementation MainVC
– (void)viewDidLoad
{
[super viewDidLoad];
}
– (IBAction)menuBtnTapped:(UIButton *)sender {
[[NSNotificationCenter defaultCenter] postNotificationName:@”menuTapped” object:nil];
}
– (IBAction)profileBtnTapped:(UIButton *)sender {
[[NSNotificationCenter defaultCenter] postNotificationName:@”profileTapped” object:nil];
}

Last Step: You are done! For your information, the MenuVC and ProfileVC subclasses are created but there is no function for this simple example. You may add tableview to MenuVC and create a real profile for ProfileVC by adding some text field, photo and etc.

For more information, you can check Out: View Controller Programming Guide for iOS