Search code examples
c#iosxamarinxamarin.iosmvvmcross

MvvmCross iOS hamburger Menu without plugins iOS Native


What I would like

Okay,This is What I would like to do in MvvmCross without any plugins just native code. I did find a Tutorial on how to it, but I would like it in MvvmCross.iOS Have a look at what I would like to do in MvvmCross.iOS

Please advise or forward a better tutorial for MvvmCross.iOS

points to remember

The hamburger menu should have a draggable effect like the image I have linked

what I have tried

ViewDidLoad() -->

UIPanGestureRecognizer gesture = new UIPanGestureRecognizer();


        gesture.AddTarget(() => HandleDrag(gesture));
        this.View.AddGestureRecognizer(gesture);

        panGestureRecognizer = new UIScreenEdgePanGestureRecognizer ( HandleSwipeRight);
        panGestureRecognizer.Edges = UIRectEdge.Left;
        this.View.AddGestureRecognizer(panGestureRecognizer);

HandleDrag() -->

        protected void HandleDrag(UIPanGestureRecognizer recognizer)
    {
        PointF offset2 = (System.Drawing.PointF)recognizer.TranslationInView(View);


        if (recognizer.State != (UIGestureRecognizerState.Cancelled | UIGestureRecognizerState.Failed
            | UIGestureRecognizerState.Possible))
        {
            Console.WriteLine("Here");
            // NEED TO LOAD ANOTHER VIEW HERE
            openMenu();

        }

    }

openMenu() -->

        public void openMenu()
    {
        viewBlack.Hidden = false;
        this.view.Hidden = false;
        UIView.Animate(
             duration: 0.3,
             delay: 0,
             options: UIViewAnimationOptions.CurveEaseInOut |
                 UIViewAnimationOptions.Autoreverse,
             animation: () =>
             {

            this.view.LayoutIfNeeded();
                 this.viewBlack.Alpha = this.maxBlackViewAlpha = 0.5f;
             },
             completion: () =>
             {
                 panGestureRecognizer.Enabled = false;
             }
        );
    }

hideMenu() -->

        public void closeMenu(){

        UIView.Animate(
    duration: 0.3,
    delay: 0,
    options: UIViewAnimationOptions.CurveEaseInOut |
        UIViewAnimationOptions.Autoreverse,
    animation: () =>
    {
            this.view.LayoutIfNeeded();
            this.viewBlack.Alpha = 0;
    },
    completion: () =>
    {
            panGestureRecognizer.Enabled = true;
            viewBlack.Hidden = true;
            view.Hidden = true;
    }
    );
    }

My Custom Hamburger menu UIView -->

            view = new UIView();
        view.Frame = new CGRect(0, 0, UIScreen.MainScreen.Bounds.Width / 1.1, UIScreen.MainScreen.Bounds.Height);
        var gradientLayer = new CAGradientLayer();
        gradientLayer.Colors = new[] { UIColor.FromRGB(64, 0, 128).CGColor, UIColor.FromRGB(0, 0, 128).CGColor };
        gradientLayer.Locations = new NSNumber[] { 0, 1 };
        gradientLayer.Frame = view.Frame;
        view.BackgroundColor = UIColor.Clear;
        view.Layer.AddSublayer(gradientLayer);
        var viewline = new UIView();
        viewline.Frame = new CGRect(20, 60, 100, 1);
        viewline.BackgroundColor = UIColor.White;
        var bb = new UIBarButtonItem();
        var Allbutton = new UIButton(new CGRect(0, 20, 135, 20));
        Allbutton.SetTitleColor(UIColor.Black, UIControlState.Normal);
        Allbutton.TitleLabel.BackgroundColor = UIColor.White;
        Allbutton.SetTitle("Login", UIControlState.Normal);
        var myPrefbutton = new UIButton(new CGRect(0, 120, 135, 20));
        myPrefbutton.SetTitleColor(UIColor.Black, UIControlState.Normal);
        myPrefbutton.SetTitle("Logout", UIControlState.Normal);
        myPrefbutton.TitleLabel.BackgroundColor = UIColor.White;
        view.BackgroundColor = UIColor.White;
        view.Add(Allbutton);
        view.Add(viewline);
        view.Add(myPrefbutton);
        view.Hidden = true;
        this.View.AddSubviews(view);

this is the only code I was able to convert into MvvmCross.iOS from tutorial(SWIFT) and it's works but I cannot drag the menu to show, what happens is that it load up normally and it's fast

Note!!! I am not using any Storyboards or nib files just using pure code for this hamburger menu

please has a good look at the .gif notice that the menu is draggable which makes it's animation slow and not fast.

if I have confused you please don't be sad I have just started coding in iOS and MvvmCross... I'm still a noob


Solution

  • Got it to work

    first had to create a UIVew class -->

    SideMenuView : MvxViewController

    then set the X to minus... it will be zero if a user selects the navbaritem I also added a overlay UIView

            viewBlack = new UIView();
            viewBlack.Frame = new CGRect(0, 0, UIScreen.MainScreen.Bounds.Width, UIScreen.MainScreen.Bounds.Height);
            viewBlack.BackgroundColor = UIColor.Black;
            viewBlack.Alpha = 0.5f;
            viewBlack.Hidden = true;
            this.View.AddSubviews(viewBlack);