MvvmCross - Flyout Navigation, Hamburger Menu, Sliding Menu for Android and iOS

Question

Summary

I'm looking to have a single MvvmCross solution for iOS and Android that implements FlyoutNavigation/hamburger menu/sliding menu for the navigation.

Sample Code

https://github.com/benhysell/V.FlyoutTest

Problem

The Android project works without issue, the iOS project is taking the Views and doubling the frame size. I'm not sure if its because of how I'm using the FlyoutNavigation component on iOS, or something I'm doing with using FlyoutNavigation in MvvmCross. I played around with custom ViewPresenters without any luck.

Detailed Problem Description

I've seen several solutions to implementing a FlyoutNavigation/hamburger menu/sliding menu for MvvmCross, but none of the implementations address both Android and iOS in a unified solution. Each method had their own Core project and then their own ideas on where to put the menu data, manage views, etc.

Thus I set out to create one unified architecture.

See https://github.com/benhysell/V.FlyoutTest for the working demo of a single solution with both iOS and Android projects that both implement a FlyoutNavigation/hamburger menu/sliding menu.

I found and followed http://motzcod.es/post/60427389481/effective-navigation-in-xamarin-android-part-1, source: https://github.com/jamesmontemagno/Xam.NavDrawer for the Android project, and it works great. The Android project uses a native navigation drawer with fragments and swaps Views in and out nicely.

In my solution using this architecture I have three main ViewModels...HomeViewModel, EnterTimeViewModel, and CreateNewJobViewModel. HomeViewModel holds the sliding menu data, the other two provide the views the user would interact with. In my example I'm creating an hours entry application, thus a user can enter time against a job, or create a new job.

To use my ViewModels in iOS I decided to use the FlyoutNavigation component, https://github.com/Clancey/FlyoutNavigation. I attempted to use the links/projects described in http://slodge.blogspot.com/2013/07/awesome-sliding-menus-from-big-frank.html, but was not successful augmenting their implementation with the already established .Core project that the Android project was dependent on.

I was able to quickly implement the FlyoutNavigation component in my HomeView in iOS and I thought I was free and clear, but the Views themselves are 2x the size they should be on the device. In the screen shots the titles of 'Enter Time' and 'Create New Job' should be centered, like any other title in MvvmCross, but are way off to the right. See the three screen shots of 'Enter Time' View, the menu open, and 'Create New Job' View. ::I used the Pause button for a quick and dirty 'hamburger'::

It feels like I'm missing something simple/I need to implement a custom ViewPresenter for iOS, but my attempts to follow others have not been successful. Thoughts on a direction I should be taking/things I should be trying?

Answer 1

Found it! @Stuart pointed me in the correct direction!

I do not proclaim this is the cleanest solution for Android and iOS menus...but it is a start.

To solve my resizing issues I changed where I was setting the FlyoutNavigation View.Frame and View.Bounds to ViewWillAppear in HomeView.

public override void ViewWillAppear(bool animated) { base.ViewWillAppear(animated); navigation.View.Frame = UIScreen.MainScreen.Bounds; navigation.View.Bounds = UIScreen.MainScreen.Bounds; }

Updated code is posted to github https://github.com/benhysell/V.FlyoutTest

Answer 2

I think the problem will be that you are hosting your FlyoutNavigationController inside a ViewController which is itself already inside a NavigationController.

My guess is that the FlyoutNavigationController is probably picking up a larger width as a result.

Looking at the source - https://github.com/Clancey/FlyoutNavigation/blob/master/FlyoutNavigation/FlyoutNavigationController.cs#L248 - it looks like FlyoutNavigationController uses View.Bounds.Width to layout it's subViews - so it might be possible to get your current code working if you adjust the Flyout Bounds as well as the Frame.

Overall, though, I'd recommend looking at mechanism like Frank's - http://slodge.blogspot.com/2013/07/awesome-sliding-menus-from-big-frank.html - or like the back-to-basics https://github.com/sequence/MonoTouch.SlidingControls (Not sure if this builds currently). I find using these and taking on the custom presenter works well for me.

One final thing... good job - I'd love to see a unified sample across Droid and iOS :)