How to swipe back in Xamarin.iOS?

Question

I have a ContentPage with a WebView in my shared Xamarin project.

To enable Android's back button within the WebView, I used the following code:

protected override bool OnBackButtonPressed()
{
      _myWebView.GoBack();
      return true;
}

As we all know, iOS does not have a back button. I want to enable swiping left in order to navigate to the previous Webview page.

What is the easiest way or approach?

score 1 · Accepted Answer · edited May 23 '17 at 12:18

I would suggest implementing a custom renderer for the WebView and attach a gesture recognizer to the underlying UIWebView. This is how the WebViewRenderer for iOS is implemented in Xamarin Forms.

The Xamarin Forms WebView is actually a UIWebView on iOS. So you can implement the Swift code from the following answer in your renderer: https://stackoverflow.com/a/32012660/6192895. Converting this Swift code to C# is fairly trivial, but this is also a potential solution:

Basic solution

public class SwipeWebViewRenderer : WebViewRenderer
{
    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);

        var view = NativeView as UIWebView;
        var swipeBackRecognizer = new UISwipeGestureRecognizer(HandleSwipeBack);
        swipeBackRecognizer.Direction = UISwipeGestureRecognizerDirection.Right;

        view.AddGestureRecognizer(swipeBackRecognizer);
    }

    void HandleSwipeBack()
    {
        (Element as WebView).GoBack();
    }
}

This solution is fairly basic, it just does the GoBack() action without actually showing the swipe of the page like the normal Safari browser does. So you might have to add some more code if that's what you need.

Transitioning

You can make use of CoreAnimation for this. Use this as your HandleSwipeBack method:

void HandleSwipeBack()
{
    CATransition animation = new CATransition();
    animation.Type = CAAnimation.TransitionPush;
    animation.Subtype = CAAnimation.TransitionFromLeft;
    animation.Duration = 0.50;
    animation.TimingFunction = CAMediaTimingFunction.FromName(CAMediaTimingFunction.EaseInEaseOut);

    (NativeView as UIWebView).Layer.AddAnimation(animation, CALayer.Transition);
    (Element as WebView).GoBack();
}

This will not get you the exact same behaviour as the Safari browser, as it will not cancel the animation if you stop the swipe halfway for example. It is possible to do so, but it would require more code.

Extra information

You might also be able to draw some inspiration from this Pull Request for a SwipeGestureRecognizer, which was not included in Xamarin Forms because unit tests and UI tests were missing.

Unfortunately the default Xamarin Forms GestureRecognizers are limited to Tap, Pinch and Pan for the moment.

Thank you so far, it works fine! Is their any way to implement a soft transition? — localhorst27, May 05 '17 at 08:57
I have updated the answer with a transitioning example. Make sure to accept the answer if this is what you needed. — Tim Klingeleers, May 05 '17 at 09:59

score 0 · Answer 2 · answered May 04 '17 at 18:20

0

Can you try the following

NavigationPage.SetBackButtonTitle (this, "")

or alternatively you can add tool bar item and then try something like this

ToolbarItems.Add(new ToolbarItem("Back", "BackIcon.png", () => { _webview.GoBack(); }));

answered May 04 '17 at 18:20

Subhamoy

132
3

How to swipe back in Xamarin.iOS?

2 Answers2