Search This Blog

Tuesday 1 March 2022

How to add swipe gesture in WebView Xamarin Forms

Implementations

<testapp:CustomWebView Source="url" SwipeUpCommand="{Binding CommandName}" SwipeDownCommand="{Binding CommandName}">
</testapp:CustomWebView>

How To Create

Create CustomWebView class in your Xamarin Form Project.
CustomWebView.cs
public class CustomWebView : WebView
{
        public static readonly BindableProperty SwipeUpCommandProperty = BindableProperty.Create(
        propertyName: nameof(SwipeUpCommand),
        returnType: typeof(Command),
        declaringType: typeof(CustomWebView),
        defaultValue: null);
        public ICommand SwipeUpCommand
        {
            get => (Command)base.GetValue(SwipeUpCommandProperty);
            set => base.SetValue(SwipeUpCommandProperty, value);
        }
 
 
        public static readonly BindableProperty SwipeDownCommandProperty = BindableProperty.Create(
        propertyName: nameof(SwipeDownCommand),
        returnType: typeof(Command),
        declaringType: typeof(CustomWebView),
        defaultValue: null);
        public ICommand SwipeDownCommand
        {
            get => (Command)base.GetValue(SwipeDownCommandProperty);
            set => base.SetValue(SwipeDownCommandProperty, value);
        }
 
}

Now Implement this CustomWebView in your platform specific code.

Xamarin.Android
CustomWebViewRenderer.cs
[assembly: ExportRenderer(typeof(CustomWebView), typeof(CustomWebViewRenderer))]
namespace TestApp.Droid
{
    public class CustomWebViewRenderer : WebViewRenderer
    {
        public CustomWebViewRenderer(Context context) : base(context)
        {
 
        }
 
        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);
            Control.SetOnTouchListener(new MyOnTouchListener((CustomWebView)Element));
        }
 
        public class MyOnTouchListener : Java.Lang.Object, Android.Views.View.IOnTouchListener
        {
            float oldYValue;
 
            float newYValue;
 
            CustomWebView myWebView;
            public MyOnTouchListener(CustomWebView webView)
            {
                myWebView = webView;
            }
            public bool OnTouch(Android.Views.View v, MotionEvent e)
            {
                if (e.Action == MotionEventActions.Down)
                {
                    oldYValue = e.GetY(0);
                }
                if (e.Action == MotionEventActions.Up)
                {
                    newYValue = e.GetY();
 
                    float diff = newYValue - oldYValue;
                    if (diff > 25)
                    {
                        myWebView.SwipeDownCommand.Execute(null);
                    }
                    else if (diff < -25)
                    {
                        myWebView.SwipeUpCommand.Execute(null);
 
                    }
                }
                return false;
            }
        }
    }
}

Xamarin.ios
CustomWebViewRenderer.cs
using Foundation;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using ObjCRuntime;
 
[assembly: ExportRenderer(typeof(CustomWebView), typeof(CustomWebViewRenderer))]
namespace TestApp.iOS
{
    public class CustomWebViewRenderer :WkWebViewRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
 
            if (e.NewElement != null)
            {
 
                this.BackgroundColor = UIColor.Red;
 
                UISwipeGestureRecognizer swipeUpGestureRecognizer = new UISwipeGestureRecognizer(this, new Selector("SwipeEvent:"));
 
                swipeUpGestureRecognizer.Direction = UISwipeGestureRecognizerDirection.Up;
 
                UISwipeGestureRecognizer swipeDownGestureRecognizer = new UISwipeGestureRecognizer(this, new Selector("SwipeEvent:"));
                swipeDownGestureRecognizer.Direction = UISwipeGestureRecognizerDirection.Down;
 
                swipeUpGestureRecognizer.Delegate = new MyWebViewDelegate();
                swipeDownGestureRecognizer.Delegate = new MyWebViewDelegate();
 
                this.AddGestureRecognizer(swipeUpGestureRecognizer);
                this.AddGestureRecognizer(swipeDownGestureRecognizer);
            }
 
        }
 
        [Export("SwipeEvent:")]
        void SwipeEvent(UISwipeGestureRecognizer recognizer)
        {
            var webview = Element as CustomWebView;
 
            if (recognizer.Direction == UISwipeGestureRecognizerDirection.Up)
            {
                webview.SwipeUpCommand.Execute(null);
            }
            else if (recognizer.Direction == UISwipeGestureRecognizerDirection.Down)
            {
                webview.SwipeDownCommand.Execute(null);
            }
        }
    }
 
    public class MyWebViewDelegate : UIGestureRecognizerDelegate
    {
        public override bool ShouldRecognizeSimultaneously(UIGestureRecognizer gestureRecognizer, UIGestureRecognizer otherGestureRecognizer)
        {
            return false;
        }
    }
}

Popular Posts