Change the location of an UImenu in swift

Question

I want to add an UIMenu to my application, I was practicing with it and now have the question if is possible to set the location of the UIMenu a little higher than the button is currently displaying it:

as you can see in this photo the menu currently overlay the tab bar and I wanted to set it a little higher than than the tab bar. here is my code:

let menu = UIMenu(title: "", children: [
  UIAction(title: NSLocalizedString("Gallery", comment: ""), image: UIImage(systemName: "folder"), handler: {
    (_) in
    self.loadPhotoGallery()
  })
])

btnMenuExtras.menu = menu

Is it possible that we can provide x/y relative offset, or x/y absolute screen position to pop up UIMenu? — Cheok Yan Cheng, Oct 03 '21 at 05:53
@CheokYanCheng probably not possible, unless you clone it - check out https://github.com/christianselig/ChidoriMenu — aheze, Oct 03 '21 at 07:07

score 13 · Accepted Answer · edited Aug 23 '22 at 14:53

iOS 14+

Sinse iOS 14 UIControl has method that provides point to which attach a menu

/// Return a point in this control's coordinate space to which to attach the given configuration's menu.
@available(iOS 14.0, *)
open func menuAttachmentPoint(for configuration: UIContextMenuConfiguration) -> CGPoint

so you can override UIButton to provide desired location for a menu (calculated or hardcoded) relatively to the button itself (`cause it is in button's coordinate space) and use that button either in storyboard (as a class for control) or created programmatically (if you need to inject it somewhere):

class MyButton: UIButton {
    var offset = CGPoint.zero
    override func menuAttachmentPoint(for configuration: UIContextMenuConfiguration) -> CGPoint {
        // hardcoded variant
//      return CGPoint(x: 0, y: -50)

        // or relative to orginal
        let original = super.menuAttachmentPoint(for: configuration)
        return CGPoint(x: original.x + offset.x, y: original.y + offset.y)
    }
}

class ViewController: UIViewController {

    @IBOutlet weak var btnMenuExtras: MyButton!   // << from storyboard

    override func viewDidLoad() {
        super.viewDidLoad()

        let menu = UIMenu(title: "", children: [
            UIAction(title: NSLocalizedString("Gallery", comment: ""), image: UIImage(systemName: "folder"), handler: {
                (_) in
//              self.loadPhotoGallery()
            })
        ])

        // offset is hardcoded for demo simplicity
        btnMenuExtras.offset = CGPoint(x: 0, y: -50)    // << here !!
        btnMenuExtras.menu = menu
    }
}

Result:

Demo prepared & tested with Xcode 13 / iOS 15

Thanks for the valuable input. However, for button in toolbar, we usually use `UIBarButtonItem` which is not inherit from `UIControl`. (I found it is possible to add UIButton to UIToolbar. But I not not sure what is the possible side effect of using UIButton as opposed to UIBarButtonItem) — Cheok Yan Cheng, Oct 03 '21 at 15:19
Ok. I figure out what is the unwanted side effect of using `UIButton` as opposed to `UIBarButtonItem`. Using `UIButton` instead of `UIBarButtonItem`, will cause toolbar items sizing issue. — Cheok Yan Cheng, Oct 03 '21 at 15:25

score 1 · Answer 2 · answered Oct 05 '21 at 11:20

You can use menuAttachmentPoint method of UIControl for UIButton to locate menu and convert that UIButton Into UIBarButtonItem By using bellow extension

@available(iOS 14.0, *)
open func menuAttachmentPoint(for configuration: UIContextMenuConfiguration) -> CGPoint

extension UIButton {
  func toBarButtonItem() -> UIBarButtonItem? {
     return UIBarButtonItem(customView: self)
  }
}

score 1 · Answer 3 · answered Oct 06 '21 at 03:09

I would like to extend the answer of @Asperi and @Jayesh Patel, on how we can apply the technique on UIBarButtonItem

//
// Technique provided by @Asperi
//
class MyButton: UIButton {
    var offset = CGPoint.zero
    override func menuAttachmentPoint(for configuration: UIContextMenuConfiguration) -> CGPoint {
        // hardcoded variant
//      return CGPoint(x: 0, y: -50)

        // or relative to orginal
        let original = super.menuAttachmentPoint(for: configuration)
        return CGPoint(x: original.x + offset.x, y: original.y + offset.y)
    }
}

let image = UIImage(systemName: "ellipsis.circle", withConfiguration: UIImage.SymbolConfiguration(scale: .default))
let button = MyButton()
button.setImage(image, for: .normal)

let menu = UIMenu(title: "", children: [
    UIAction(title: NSLocalizedString("Gallery", comment: ""), image: UIImage(systemName: "folder"), handler: {
        (_) in
    })
])
// offset is hardcoded for demo simplicity
button.offset = CGPoint(x: 0, y: 50)    // << here !!

//
// This is how we can make UIButton as UIBarButtonItem
//
button.menu = menu
button.showsMenuAsPrimaryAction = true

//
// Technique provided by @Jayesh Patel
//
let threeDotsBarButtonItem = UIBarButtonItem(customView: button)
var items = toolbar.items
items?.append(threeDotsBarButtonItem)
toolbar.items = items

Change the location of an UImenu in swift

3 Answers3

Linked