Adding interactive SplitView for iPad
Hello buddies hope you are enjoying good and and coding. Today we are going to add an interactive split view in an iPad application. Good thing is that it will be added in the mid of application not at first screen. So here we go
create a new project with a single view like this
click on next and give it a name “SplitViewExample”
Now make your project a navigation based project by adding a navigation object and making root to that navigation controller like this
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
AppDelegate.h @property (strong, nonatomic) UINavigationController *navigationController; AppDelegate.m @synthesize navigationController; - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; // Override point for customization after application launch. self.viewController = [[ViewController alloc] initWithNibName:@"ViewController" bundle:nil]; self.navigationController = [[UINavigationController alloc] initWithRootViewController:self.viewController]; self.window.rootViewController = self.navigationController; [self.window makeKeyAndVisible]; return YES; } |
Now create 3 ViewControllers named “ContainerViewController”, “RootViewController” and “DetailViewController”
RootViewController will be inherited from UITableViewController
Before we start working on splitView lets push our control to ContainerViewController from first ViewController
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
#Import ContainerViewController.h and add a method for a button to push in container view controller - (IBAction)gotosplitView:(id)sender { ContainerViewController *containerViewController = [[ContainerViewController alloc] initWithNibName:@"ContainerViewController" bundle:nil]; [self.navigationController pushViewController:containerViewController animated:YES]; } Now go to ContainerViewController.h and create 3 objects with properties like this @property (nonatomic, retain) IBOutlet UISplitViewController *splitViewController; @property (nonatomic, retain) IBOutlet DetailViewController *detailViewController; @property (nonatomic, retain) IBOutlet RootViewController *rootViewController; Keep it in mind you Import Root and Detail controller now go to ViewDidLoad of ContainerViewController.m and set the UIView and navigation bar items etc - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view from its nib. [splitViewController.view setFrame:CGRectMake(0,0, 768, 1024)]; self.view.frame=CGRectMake(0,100, 768, 1024); [self.view addSubview:splitViewController.view]; UIBarButtonItem *anotherButton = [[UIBarButtonItem alloc] initWithTitle:@"Done" style:UIBarButtonItemStyleDone target:self action:@selector(goToSubActivities)]; self.navigationItem.rightBarButtonItem = anotherButton; self.navigationController.toolbarHidden = NO; self.navigationController.navigationBar.hidden=NO; self.title = @"Structure"; } |
To controle view for root you have to write this method in it
1 2 3 4 5 |
- (BOOL)splitViewController:(UISplitViewController *)svc shouldHideViewController:(UIViewController *)vc inOrientation:(UIInterfaceOrientation)orientation NS_AVAILABLE_IOS(5_0){ return NO; } |
Now we move towards “ContainerViewController.xib”. Here you have to add a “SplitViewController” from the given objects on right side and add to navigation controllers in split view
Hook up your split view controller with file’sOwner
Now check your first navigation controller and assign its inner controller to RootViewController and then hook up with file’sOwner of ContainerViewController.xib
Similarly check you 2nd navigation view controller and set its custom class as “DetailViewController” and then hook it up with file’sOwner with DetailViewController outlet and then connect its delegate with “SplitViewController”
Now go on RootViewController and add this code in its .h file
1 |
IBOutlet DetailViewController *detailViewController; |
Now again go on ContainerViewController.xib and Connect you DetailViewController with RootViewController
Now add this code in ViewDidLoad method of RootViewController
1 2 3 4 5 |
self.view.frame = CGRectMake(self.view.frame.origin.x, self.view.frame.origin.y, (self.view.frame.size.width), self.view.frame.size.height-104); self.tableView.backgroundColor=[UIColor redColor]; [self.tableView reloadData]; |
after that you will have to add TableView delegate and data source methods and add whatever you want to show in it.
Now lets move to DetailViewController.h and here we add two objects with property
1 2 3 |
@property (nonatomic, retain) UIPopoverController *popoverController; @property (nonatomic,retain) id detailStruct; |
and 2 methods for handling
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
- (void)splitViewController:(UISplitViewController*)svc willHideViewController:(UIViewController *)aViewController withBarButtonItem:(UIBarButtonItem*)barButtonItem forPopoverController:(UIPopoverController*)pc { [barButtonItem setTitle:@"Structures"]; [[self navigationItem] setLeftBarButtonItem:barButtonItem]; [self setPopoverController:pc]; } - (void)splitViewController:(UISplitViewController*)svc willShowViewController:(UIViewController *)aViewController invalidatingBarButtonItem:(UIBarButtonItem *)barButtonItem { [[self navigationItem] setLeftBarButtonItem:nil]; [self setPopoverController:nil]; } |
Here we go now our working split view is fully ready to work. You may download the source code from here SplitViewExample
Happy Coding and Mind Your Code