iPhone popup menu like iPad popover?
Asked Answered
L

8

36

How can i implement this popup menu in iphone app like a popover in ipad?

alt text


EDIT: This is the best at moment: https://github.com/runway20/PopoverView enter image description here

Liguria answered 22/1, 2011 at 16:54 Comment(2)
@Kev You close my question because it's not a real question? After 12439 views? and a lot of comments/answer? It's so strange as question? Maahh.Liguria
In my opinion this is a perfectly valid question.Sharpfreeze
B
22

Have a look at the iPhone UIPopoverController implementation: WEPopover

Barrack answered 24/2, 2011 at 9:25 Comment(3)
Thank you. Do you know if using WEPopover in my app is ok if I want to put it on the Store?Natheless
Should be. I don't know the details since a colleague did the implementation, but we've got a modified version of it in our live app.Embouchure
Suragch's answer below is now the standard way of doing this after iOS 8.Yerkovich
S
34

iOS 8 and later

Beginning with iOS 8, you can use UIPopoverPresentationController for iPhones in addition to iPads.

enter image description here

Setup

  • Add a UIBarButtonItem to your main View Controller.
  • Add another View Controller to the storyboard. Change it to the size that you want the popover to be and add any content that you want it to have. For my example I just added a UILabel. If you want a whole menu, then just add a table view or list of buttons.
  • Add a segue from the bar button item to the view controller that you will use as the popover. Rather than show, choose Present as Popover.

enter image description here

  • Select the segue in the storyboard and set the identifier to popoverSegue (or whatever string you called it in the code).

enter image description here

  • In the Attributes inspector for the popover view controller, check Use Preferred Explicit Size and confirm that it is the size you want it to be.

enter image description here

Code

This is the code for the main view controller that has the bar button item in it.

class ViewController: UIViewController, UIPopoverPresentationControllerDelegate {

    override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
        if segue.identifier == "popoverSegue" {

            let popoverViewController = segue.destinationViewController
            popoverViewController.modalPresentationStyle = UIModalPresentationStyle.Popover
            popoverViewController.popoverPresentationController!.delegate = self

        }
    }

    // MARK: - UIPopoverPresentationControllerDelegate method

    func adaptivePresentationStyleForPresentationController(controller: UIPresentationController) -> UIModalPresentationStyle {

        // Force popover style
        return UIModalPresentationStyle.None
    }
}

Popover at an arbitrary anchor point

If you want to set the popover to appear somewhere besides a bar button item (on a UIButton for example) then you need to set the sourceView and sourceRect. See this answer for details.

enter image description here

Further reading

The above example comes mostly from the first link.

Seashore answered 30/8, 2015 at 11:10 Comment(0)
B
22

Have a look at the iPhone UIPopoverController implementation: WEPopover

Barrack answered 24/2, 2011 at 9:25 Comment(3)
Thank you. Do you know if using WEPopover in my app is ok if I want to put it on the Store?Natheless
Should be. I don't know the details since a colleague did the implementation, but we've got a modified version of it in our live app.Embouchure
Suragch's answer below is now the standard way of doing this after iOS 8.Yerkovich
M
19

On iPhone you would generally use a UIActionSheet for a stack of buttons like that. It slides up from the bottom, rather than popping up next to the button, but that's the standard behavior on iPhone.

Mamelon answered 22/1, 2011 at 16:56 Comment(5)
uhm... how can i implement it? PS: the screenschot above come from iphone app!Liguria
@Paska: which iphone app is this? i'm curiousLaurelaureano
@Laurelaureano I don't remember, but is a view with rounded corner and an arrow image! Nothing so easy!Liguria
Ya better to stick with action sheet cos most of the iPhone users have used to it.Breezeway
It is worth noting that the Facebook iOS app uses this "popover" style on the iPhone, even though standard UIKit only allows popovers on the iPad. Given that there are many users of the Facebook app, one can assume that a large number of people will now be quite accustomed to a popover style display on an iPhoneSharpfreeze
P
7

There is one that is even better than WEPopover. Developed by a company called 50pixels, it is called FPPopover.

You can download FPPopover at https://github.com/50pixels/FPPopover

Payment answered 16/7, 2012 at 19:30 Comment(2)
This doesn't work with UIBarButtonItems (in my limited experience anyway)Vindication
Also has a lot of memory issues loggedSamba
G
5

You would have to manually instantiate a UIView using a custom background image or drawing with transparency, add some UIButtons (or other type of custom view) on top, and also somehow handle all touches outside that view.

Note that is is non-standard UI. An actionsheet would be more HIG compliant.

Guillotine answered 22/1, 2011 at 19:46 Comment(0)
H
2

To get a popover from a right side bar button item on a navigation controller that is part of a tableview controller, the following worked for me for Swift 4 and Xcode 9.

  1. Follow the steps in Suragch answer above (as edited by the Community.)
  2. Do not implement the Segue as shown in the answer above. For some reason, the segue causes the popover to go full screen despite setting the explicit size.
  3. Give your popover view controller a title in Attributes Inspector
  4. Add the following code in the TableView controller where the popup will show.
  5. Modify the string identifier (the one here is referencing a Constant.swift file)
  6. Modify "as! FilterVC" to use the title of the your popover view controller.

    /// Shows a filter popover view
    @IBAction func filterBtnPressed(_ sender: UIBarButtonItem) {
        let popover = storyboard?.instantiateViewController(withIdentifier: FILTER_VC) as! FilterVC
        popover.modalPresentationStyle = UIModalPresentationStyle.popover
        popover.popoverPresentationController?.backgroundColor = UIColor.green
        popover.popoverPresentationController?.delegate = self
        popover.popoverPresentationController?.backgroundColor = ColorPalette.Blue.Medium
        popover.popoverPresentationController?.sourceView = self.view
        popover.popoverPresentationController?.sourceRect = CGRect(x: self.view!.bounds.width, y: 0, width: 0, height: 0)
        popover.popoverPresentationController?.permittedArrowDirections = .up
        self.present(popover, animated: true)
    } }
    
    
    func adaptivePresentationStyle(for controller: UIPresentationController) -> UIModalPresentationStyle {
        return UIModalPresentationStyle.none
    }
    
Hyposensitize answered 30/9, 2017 at 21:57 Comment(0)
N
1

You can check WYPopoverController: https://github.com/sammcewan/WYPopoverController

Nitrosamine answered 17/11, 2014 at 12:41 Comment(0)
B
0

The screenshot above is not a UIActionSheet. It looks like a simple UIView subclass with custom UIButtons on top of it. So go ahead and create the subclass according to your needs and then add it as a subview to your view every time you need it.

Braxton answered 22/1, 2011 at 17:57 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.