Material: MenuController messes up navigationItems

Created on 27 Oct 2016  路  5Comments  路  Source: CosmicMind/Material

Hi Daniel,

I'm migrating my project to Swift 3. I was using a Menu with FabButtons before and I'm trying to change it to the new MenuViewController approach.

fabMenu = Menu(origin: ...)
fabMenu.direction = .Up
fabMenu.views = [btn1, btn2, ...]

Now, I'm still using FabButtons (instead of MenuItems) and do:

guard let mc = menuController as? ACCMenuController else {
    return
}

mc.menu.delegate = self
mc.menu.views = [btn1, btn2, ...]

I'm using your MenuController project in Samples as reference. I see that you are setting the rootViewController as an instance of AppMenuController(rootViewController:):

window!.rootViewController = AppMenuController(rootViewController: RootViewController())

However, when I do this, my navigationItems don't show up. And if I don't, the Menu doesn't show up (as expected).

How can I solve this?


Xcode version: 8.1 GM
iOS target version: 9.3
Material release: 2.2.5

help wanted

All 5 comments

Hi @Sufi-Al-Hussaini Yes, I can help.

So the latest Menu, MenuView, and MenuViewController have all been consolidated into Menu and MenuController.

Originally, there was a control called Menu that was wrapped by a UIView called MenuView. Now they are together in a single View object called Menu.

If you would like, you are able to place that in your current UIViewController as a subview, and then add the baseSize, itemSize, and views appropriately. This will avoid the issue you are having with navigationItems because the UIVIewController is the same.

If you choose to use the MenuController, then you are introducing a new UIViewController that takes your current one and sets it as the child. In this case you would need to set the navigationItems within a subclass of the MenuController and in the rootViewController you would place the other subviews as before.

The reason Material works this way, is to allow you to layer or stack the controls like MenuController, ToolbarController into organized pieces that are perceived to work all together. This removes a lot of coupling.

I hope this helps. Please reopen or create a new issue if you need :) All the best!

Thank you for your help Daniel.

I'm able to add the Menu to my view controller now.
However, I'm not able to get it to rotate on click. Also, my other buttons don't show up.

I read that the recommended way of accessing the Menu is to use a view controllers associated MenuController. I believe in my case, I should have a Menu property in my view controller.

let menu = Menu()

private func prepareMenu() {
    menu.delegate = self
    menu.views = [btn1, btn2, ...]

    let baseSize = CGSize(width: 56, height: 56)
    let bottomInset: CGFloat = 24
    let rightInset: CGFloat = 24

    view.layout(menu)
        .size(baseSize)
        .bottom(bottomInset)
        .right(rightInset)
}

In your Menu example, you subclass and override the openMenu() and closeMenu() methods to implement the rotate on click and button icon change. I don't understand how I could do this now.
Could you please direct me to a solution?

The Menu has open and close methods:

open func open(duration: TimeInterval = 0.15, delay: TimeInterval = 0, usingSpringWithDamping: CGFloat = 0.5, initialSpringVelocity: CGFloat = 0, options: UIViewAnimationOptions = [], animations: ((UIView) -> Void)? = nil, completion: ((UIView) -> Void)? = nil)

open func close(duration: TimeInterval = 0.15, delay: TimeInterval = 0, usingSpringWithDamping: CGFloat = 0.5, initialSpringVelocity: CGFloat = 0, options: UIViewAnimationOptions = [], animations: ((UIView) -> Void)? = nil, completion: ((UIView) -> Void)? = nil)

You can add a handler to your base button, btn1 triggers the menu to open, and in there, the completion block, or before, you trigger the rotation animation you see in the example.

Thanks again! Problem solved!

wonderful :)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

OrkhanAlikhanov picture OrkhanAlikhanov  路  17Comments

tbergeron picture tbergeron  路  19Comments

ariedoelman picture ariedoelman  路  34Comments

PuneetKohli picture PuneetKohli  路  14Comments

leobouilloux picture leobouilloux  路  21Comments