How to show detail info with popover

 

This tutorial is updated for x code 7.3 & swift 2.2

Even with new big screen iPhone 6 & 6 plus you are still working on limited space. You cannot explain everything in your app. People who pay $30,000 for a car never open the car manual. So when someone pays $0.99 will never open help files to understand what every setting means. This is where popover comes in.

  1. First lets set up the x code project as usual. Create new single view application X code project. Set the values as follows and save it on your desktop.

new x code project

 

2. Go to main storyboard and select view controller. Set its size to iPhone 4”

iPhone 4 inch

 

3. Add label and button to main storyboard. Rename label to Settings & rename button to (?)

add label & button

 

4. Add new view controller to main storyboard. Set its size to Freeform & status bar to None.

new view controller

 

5. Set the new view controllers Freeform width to 200 & height 50.

set height & width

 

6. Go back to identity inspector & check Use preferred explicit size. Make sure width and height is same.

set preferred explicit size

 

7. Add label to new view controller & rename it to This is main settings.

add label

 

8. Hold Control & drag (?) button to new view controller

Screen Shot 2015-03-15 at 10.17.44 pm

9. Select popover presentation

Screen Shot 2015-03-15 at 10.17.53 pm

10. Select the segue & set identifier for popoverInfo

segue identifier

 

11. In view controller swift file add UIPopoverPresentationControllerDelegate

class ViewController: UIViewController, UIPopoverPresentationControllerDelegate {

12. Override the prepare for segue method as follows

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
    if segue.identifier == "popoverInfo" {
        let popoverViewController = segue.destinationViewController
        popoverViewController.modalPresentationStyle = UIModalPresentationStyle.Popover
        popoverViewController.popoverPresentationController!.delegate = self
    }
}

13. To make popover on any device force popover as follows

func adaptivePresentationStyleForPresentationController(controller: UIPresentationController) -> UIModalPresentationStyle {
    return UIModalPresentationStyle.None
}

Now build and run app in iPhone 5s & click on the (?) button

iOS Simulator Screen Shot 15-Mar-2015 10.41.10 pm
Download X code file
Challenge: create a login form & explain what each field is for with popover

iOS Simulator Screen Shot 15-Mar-2015 9.41.49 pm
Download Challenge Solution

Total 5 Votes
0

Tell us how can I improve this tutorial?

+ = Verify Human or Spambot ?