Adding interactive SplitView for iPad

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

Screen Shot 2015-05-31 at 4.37.21 pm

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

Screen Shot 2015-06-04 at 1.24.03 am

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 :)

 

Leave a Reply

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