UIPopOver Tutorial

UIPopOverController as its name indicating a pop over controller. With the introduction of iPad, Apple introduced a new control named UIPopOverController that presents user with a nice interface to select certain content (like photos from album) without hiding the main screen or presenting photos album screen completely over the screen like in iPhone and iPod. In this tutorial, we will learn about UIPopOverController in iPad. UIPopOverÇontroller is not present in iPhone so you have to chose different approach if your are making an universal app.

Lets start learning UIPopOverController by creating a demo project as an example. First create an project and named it as UIPopOverController
and select iPad from device family. Now we are done with creating empty project. To use our UIPopOver we will present user with a nice interface view that allow them to chose a gender. For this we will create a UIViewController class named as TestPopOver. To create a new UIViewController class select File–New–File, a window will come up  select first option i.e objectiveC Class, press next
name the file as TestOver, select the checkbox(targeted for iPad) shown in the bottom of the window.

Now we successfully created the TestOver class, select its .xib file and delete the UIView object. Now add new UIView object and set its width and height to 300. Select File Owner and attach view Outlet to UIView Object. Add two button to UIView object and change their name to Male and Female.

Open TestOver.h and create an IBAction as

-(IBAction)buttonAction:(id)sender;

Now, open TestOver xib and attach our buttonAction to Male.Female buttons with TouchUpInside event. Open TestOver.m and define our button action

}

As our popover interface is a different viewController and the class where we want to display UIPopOverController is a different UIViewController. So to know that which gender was selected in TestOver viewController we have to implement delegate so that our app will be notified of correct gender selection.

To create a delegate, select File–New–File, a window will come up  select first option i.e objectiveC protocol, press next name the file as  TestPopOverDelegate and then finish/done.

Open TestPopOverDelegate.h file and create a method named -(void)valueSelectedFromOver:(id)value , this method will notify our app about gender selection.

Now, its time to implement TestOverDelegate, open TestOver.h file and and import TestPopOverDelegate.h

Now lets add some code to our -(IBAction)buttonAction:(id)sender ,

-(IBAction)buttonAction:(id)sender

{

      UIButton *button = (UIButton *)sender;

      [self.delegate valueSelectedFromOver:[button titleForState:UIControlStateNormal]];

}

In the above code first we create an instance of UIButton so that we can get which gender is selected by user. Then with the use of our delegate we will call delegate method valueSelectedFromOver and pass button tittle.

At this moment we will done with our  TestOver class, but still we haven’t implemented UIPopOverController. So let’s do it

Open UIPOPViewController.h and first import TestOver.h

#import “TestPopOver.h”

Notify class that we are going to implement TestOverDelegate, add

Now create an instance of UIPopoverController

 UIPopoverController *popOverController; 

Add IBAction showPopOver  to the show UIPopOverController

-(IBAction)showPopOver:(id)sender;

Open Main.storyBoard and drag UIButton to view area and connect showPopOver IBAction to the UIButton.

Now open UIPOPViewController.m and add showPopOver IBAction definition

-(IBAction)showPopOver:(id)sender

{

    

    TestPopOver *tstPop = [[TestPopOver alloc]initWithNibName:@”TestPopOver” bundle:nil];

    tstPop.delegate=self;

    popOverController = [[UIPopoverController alloc]initWithContentViewController:tstPop];

    popOverController.popoverContentSize = CGSizeMake(300.0, 300.0);

    [popOverController presentPopoverFromRect:[(UIButton *)sender frame]

                                          inView:self.view

                        permittedArrowDirections:UIPopoverArrowDirectionAny

                                        animated:YES];

   

}

 

Here,  we cerated an instance of our TestOver UIViewController class by allocating it and initialising with nib-name. Then we create UIPopOverController instance and initialise it with contentViewController. We will pass our TestOver UIViewController instance as ContentViewController to  UIPopOverController. After this we will define size for UIPopOverController with same size as of our TestOver UIViewController.We will specify position to our UIPopOverController by using presentPopoverFromRect  method of UIPopOverController.

Now when you run the code and press/touch showPopOver a nice UIPopOverController will be displayed.

Now to get value selected by user from popover,  we need to implement  TestOver delegate method

-(void)valueSelectedFromOver:(id)value

{

    NSLog(@”value from POPOVER = %@”,value);

    [popOverController dismissPopoverAnimated:YES];

} 

 

Run the code and see console for the output. If had any questions or queries please feel free to ask.

Source Code:UIPopOverController Code

Youtube Video: