This is the final part of the workshop series. In it you’ll learn how to display a popover view on top of the secondary view controller’s view. A popover is a type of view controller that grab the user attention and suspend everything else in the user interface. Popover use limited space by placing a smaller “view” on top of the current view. Prior to iOS 8 the popover view could only be used on the iPad device. Now popovers are used on iPhone and iPad device.
To show the popover view, you have to tap a button on the secondary view controller’s navigation bar. It will show two items: the currently displayed image’s file name and its size (width x height), like this:
 |
| Figure 4-1 |
Step 1: add a View Controller in the project
The first step in configuring the SVCDemo app to display a popover, is to add a UIViewController class in the project. It will serve as the popover’s view.
- Launch the SVCDemo app in Xcode.
- Click the + icon below the Project Navigator panel.
- From the popup menu, select New File…
- Select the Cocoa Touch Class template and click Next.
- Provide information shown in Figure 4-2 for the class.
 |
| Figure 4-2 |
Step 2: Add A View Controller Scene On The storyboard
Drag a View Controller object from the Object Library and drop it on the right side of scene 6.
Step 3: Design the View Controller scene
The new View Controller scene you added on the storyboard will serve as the popover’s view and it will have only one control-an Label object. We will programmatically add information about the image that’s shown in the secondary view’s image view control on the Label. Do the following to design the new View Controller scene.
Drag a Label object from the Object Library and drop it on the scene and set these attributes for it:
Frame: X=16, Y=20, Width=568, Height=70
Alignment: Left
Font Size: System 14.0
Lines: 3
Click the Auto Layout Bar’s Pin button and enable the top, leading and trailing space constraints, check the Height constraint checkbox as well, then click the Add 4 Constraints button.
 |
| Figure 4-3 |
The next thing you have to do is connect the View Controller scene to the PopoverViewController.swift class file, and set the Storyboard ID property, via the Identity Inspector. The reason why you set the Storyboard ID is because you will be referencing the scene in code.
 |
| Figure 4-4 |
Now, declare this IBOutlet property variable for the Label control somewhere at the top of the PopoverViewController.swift class file. So we can reference it in code.
@IBOutlet weak var lblPhotoInfo: UILabel!
In Interface Builder, connect the property variable to the Label control. The easiest way to do it, is in the Document Outline window. Just control-drag from the Popover View Controller object to the Label control-see step 1 in the image below. Release your mouse when the Label control is highlighted, then select lblPhotoInfo from the pop up-see step 2 in the image below. To verify the connection, right-click the Label object in the Document outline. You should see the connection in a pop up window-see step 3 in the image below.
 |
| Figure 4-5 |
There’s just a few more things you have to do and you are through with designing the Popover View Controller scene. Drag a Bar Button Item from the Object Library and drop it in the right corner of the Detail View Controller’s navigation bar. Double-click the button and enter Photo Info. Now, click the DetailViewController.swift file and add these variable declaration statements at the top of the file.
class DetailViewController: UIViewController {
@IBOutlet weak var imageView: UIImageView!
@IBOutlet weak var photoNameLable: UILabel!
@IBOutlet weak var photoInfoButtonItem: UIBarButtonItem!
var selectedFlower = []
var selectedFileSize = CGFloat()
var photoFileName : String!
var imgWidth = Int()
var imgHeight = Int()
}
Next declare this IBAction method for the Photo Info button, somewhere at the bottom of the DetailViewControll.swift class file.
@IBAction func showPhotoInfo(sender: AnyObject) {
}
Return to the Main.storyboard file and connect the photoInfoButtonItem property variable to the Bar Button Item you added on the Detail View Controller scene’s navigation bar. Also, connect the showPhotoInfo() IBAction function to the Bar Button Item.
That’s it, you are through with designing the Popover View Controller scene. Notice we didn’t create a segue for the Photo Info button, in Interface Builder. That’s because we will add code in the showPhotoInfo() function to configure the Popover View Controller scene so it look like a popover and display information about the image that’s loaded in the Detail View Controller’s image view.
Step 4: Add code in the DetailViewController showPhotoInfo() function
The last thing you have to do now is, add code in the DetailViewController.swift file’s showPhotoInfo() function. Before, I show you the code, modify the DetailViewController class so that it conforms to the UIPopoverPresentationControllerDelegate protocol; because will be implementing a delegate method of the UIAdaptivePresentationControllerDelegate protocol, even though we’ve conformed DetailViewController to the UIPopoverPresentationControllerDelegate protocol.
class DetailViewController: UIViewController, UIPopoverPresentationControllerDelegate {
Now, here’s the code to add in the showPhotoInfo() function.
@IBAction func showPhotoInfo(sender: AnyObject) {
var popoverViewController = UIStoryboard(name: "Main",
bundle: nil).instantiateViewControllerWithIdentifier("idPopovevc") as? PopoverViewController
popoverViewController?.modalPresentationStyle = UIModalPresentationStyle.Popover
popoverViewController?.popoverPresentationController?.delegate = self
popoverViewController?.popoverPresentationController?.barButtonItem = photoInfoButtonItem
popoverViewController?.popoverPresentationController?.permittedArrowDirections = .Any
popoverViewController?.preferredContentSize = CGSizeMake(210.0, 70.0)
// We must present the popover's view controller befor initializing
// the popoverviewcontroller's label control
self.presentViewController(popoverViewController!, animated: true, completion: nil)
if imgWidth != 0.0 {
popoverViewController?.lblPhotoInfo.text = "File Name: \(photoFileName)\nFile Size: \(imgWidth)w x \(imgHeight)h"
} else {
popoverViewController?.lblPhotoInfo.text = "File Name: noimage.png\nFile Size: 250w x 250h"
}
}
You added code in the showPhotoInfo() function to get an instance of the Popover View Controller scene from the storyboard. Configured six of its properties. Present the popover onscreen then set its label object to show two items: the currently displayed image view control’s file name and its size (width x height).
Step 5: Implement A Delegate Function
By default, the Popover View Controller scene will show up as a popover on the iPad device/simulator. However the scene will not show up as a popover on the iPhone device/simulator. To fix that problem, you have to implement this delegate method of the UIAdaptivePresentationControllerDelegate protocol in the DetailViewController.swift file.
func adaptivePresentationStyleForPresentationController(controller: UIPresentationController) -> UIModalPresentationStyle {
return UIModalPresentationStyle.None
}
That’s it you are through with adding code in the DetailViewController.swft class file to make the popover view work. Run the app; first in the iPhone 4 or 5 simulator, then in any one of the iPad simulators. You should see output similar this one, on the simulator’s screen. If you want the center popover’s content; you’ll have to do the following in Interface Builder; set the Popover View Controller scene’s Label control’s Alignment attribute to Center.
This conclude the workshop series, How to Use The iOS 8 Split View Controller. Click this link to download the SVCDemo project we created in the tutorial.