MvvmCross ViewModel transition from the left

Question

I am developing an app for iOS using MvvmCross. On one of my Views I have some basic report data that is displayed in a tableview.

When the table row is touched a new view containing a detail report is displayed by making the call to ShowViewModel passing some parameters in a Dictionary. This works fine.

When the user swipes left or right the app needs to show the detail report for the next or previous item in the original list. I am doing this by updating some parameters and calling ShowViewModel again. The logic behind this is all working fine.

My problem; ShowViewModel animates the new view coming in from the right. This is perfect when the user has swiped left. However when swiping right it seems counter intuitive. How can I make ShowViewModel animate or transition in from the left side?

Answer 1

if you look to the MvvmCross source code here you see how the default behavior is showing the ViewControllers

You need to change that by doing something like the following: How to change the Push and Pop animations in a navigation based app

for that, one idea is to have a custom view presenter and catch navigation to that particular view-model (override Show(IMvxTouchView view) )

or, maybe derive from UINavigationController, set it to MvvmCross to use it (look to the MvxSetup), and on some events change transition to that particular view

similar to this question How to specify view transitions on iPhone

Answer 2

This is the solution I was able to come up with following the helpful pointers in the answer from Andrei N. In the end I opted for a TransitionFlipFromRight and TransitionFlipFromLeft when scrolling between detail reports. Hopefully it is useful to somebody else.

I already had a presenter class that was inherited from MvxModalSupportTouchViewPresenter

public class BedfordViewPresenter : MvxModalSupportTouchViewPresenter

Within this class I added a property of MvxPresentationHint.

private MvxPresentationHint _presentationHint;

In the override of method ChangePresentation the above property is used to store the passed in parameter

    public override void ChangePresentation (MvxPresentationHint hint)
    {
        _presentationHint = hint;
        base.ChangePresentation (hint);
    }

Two new MvxPresentationHint class were declared (see later)

In the presenter class the Show method was overridden

    public override void Show(IMvxTouchView view)
    {
        if (_presentationHint is FlipFromRightPresentationHint) {
            var viewController = view as UIViewController;
            MasterNavigationController.PushControllerWithTransition (viewController, UIViewAnimationOptions.TransitionFlipFromRight);

        }
        else
            if (_presentationHint is FlipFromLeftPresentationHint)  {
                var viewController = view as UIViewController;
                MasterNavigationController.PushControllerWithTransition (viewController, UIViewAnimationOptions.TransitionFlipFromLeft);
            }
            else {
                base.Show (view);
            }

        _presentationHint = null;
    }

A new class that provides extensions to a UINavigationController was created with the method PushControllerWithTransition

public static class UINavigationControllerExtensions
{
    public static void PushControllerWithTransition(this UINavigationController 
        target, UIViewController controllerToPush, 
        UIViewAnimationOptions transition)
    {
        UIView.Transition(target.View, 0.75d, transition, delegate() {
            target.PushViewController(controllerToPush, false);
        }, null);
    }
}

All that needs to be defined now are the two new MvxPresentationHint class derivations. These belong in your Core class library project rather than the iOS application project.

public class FlipFromLeftPresentationHint : MvxPresentationHint
{
    public FlipFromLeftPresentationHint ()
    {
    }
}

and

public class FlipFromRightPresentationHint: MvxPresentationHint
{
    public FlipFromRightPresentationHint ()
    {
    }
}

I hope this is a help to someone else trying to do something similar

Answer 3

Share my solution for android:

On view:

    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        var view = base.OnCreateView(inflater, container, savedInstanceState);

        var layout = view.FindViewById<LinearLayout>(Resource.Id.swippeable);

        var swipeListener = new SwipeListener(this.Activity);

        swipeListener.OnSwipeLeft += (sender, e) => this.ViewModel.LeftCommand?.Execute(); //Here use command into view model

        swipeListener.OnSwipeRight += (sender, e) => this.ViewModel.RightCommand?.Execute();

        layout.SetOnTouchListener(swipeListener);

        return view;
    }

Gesture listener:

public class SwipeListener : SimpleOnGestureListener, View.IOnTouchListener
{
    private const int SWIPE_THRESHOLD = 100;
    private const int SWIPE_VELOCITY_THRESHOLD = 100;

    private readonly GestureDetector gestureDetector;

    public SwipeListener(Context ctx)
    {
        this.gestureDetector = new GestureDetector(ctx, this);
    }

    public Boolean OnTouch(View v, MotionEvent e)
    {
        return this.gestureDetector.OnTouchEvent(e);
    }

    public event EventHandler OnSwipeRight;

    public event EventHandler OnSwipeLeft;

    public event EventHandler OnSwipeTop;

    public event EventHandler OnSwipeBottom;

    public override Boolean OnDown(MotionEvent e)
    {
        return true;
    }

    public override Boolean OnFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)
    {
        Boolean result = false;

        float diffY = e2.GetY() - e1.GetY();

        float diffX = e2.GetX() - e1.GetX();

        if (Math.Abs(diffX) > Math.Abs(diffY))
        {
            if (Math.Abs(diffX) > SWIPE_THRESHOLD && Math.Abs(velocityX) > SWIPE_VELOCITY_THRESHOLD)
            {
                if (diffX > 0)
                {
                    SwipeRight();
                }
                else
                {
                    SwipeLeft();
                }
                result = true;
            }
        }
        else if (Math.Abs(diffY) > SWIPE_THRESHOLD && Math.Abs(velocityY) > SWIPE_VELOCITY_THRESHOLD)
        {
            if (diffY > 0)
            {
                SwipeBottom();
            }
            else
            {
                SwipeTop();
            }
            result = true;
        }

        return result;
    }

    public void SwipeRight()
    {
        this.OnSwipeRight?.Invoke(this, EventArgs.Empty);
    }

    public void SwipeLeft()
    {
        this.OnSwipeLeft?.Invoke(this, EventArgs.Empty);
    }

    public void SwipeTop()
    {
        this.OnSwipeTop?.Invoke(this, EventArgs.Empty);
    }

    public void SwipeBottom()
    {
        this.OnSwipeBottom?.Invoke(this, EventArgs.Empty);
    }
}