• Skip to main content
  • Skip to primary sidebar
  • Home
  • About
  • My Portfolio
  • Contact

mobileoop

I am a Senior iOS developer based on Singapore. Developing iOS Mobile apps for about 8 years now.

  • Home
  • About
  • Portfolio
  • Contact Me

How to Use Container View Controller

November 16, 2013 by Ricky 1 Comment

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.

Profile View controller
Main View controller style=
Menu View controller


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:
Simple Container View Controller Programming Setup

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

Filed Under: iOS, iPad, iPhone, MVC, Objective-C

Reader Interactions

Comments

  1. Justin says

    May 9, 2016 at 4:19 am

    you can share your code for me ?

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Search This Website

About Me

profile for Ricky at Stack Overflow, Q&A for professional and enthusiast programmers
I have been developing iOS mobile apps for about 8 years now. Currently, I am working as a Senior iOS Developer at a company based in Singapore.

mobileoop.com is a website that I share my thoughts on the latest technology particularly on the mobile apps and its ecosystems. Sometimes, I also write my experience in working on various iOS projects (my online portfolio).

This is my Github profile.

You may connect to me via LinkedIn: My LinkedIn.

Recent Posts

  • MVVM and RxSwift – iOS Apps Development
  • hotspot – Mobile Apps for Singapore Tourists
  • Nestia – Lifestyle Mobile Apps in Singapore
  • Watch Over Me Version 6.0
  • Chan Wu – Audio and Video Freelance iOS App Project
  • Getting Location Updates for iOS 7 and 8 when the App is Killed/ Terminated/ Suspended
  • Auto Layout Advanced Techniques for iOS 8 and 7 using XCode 6 on Storyboard
  • How to Use Auto Layout in XCode 6 for iOS 7 and 8 Development
  • The Comparison Between Swift and Objective-C Programming Language
  • Swift, Home Automation and Indoor Positioning System

Copyright © 2023 mobileoop.com