Swipe Gesture

seanydaseanyda GBMember ✭✭✭✭✭
edited December 2016 in Xamarin.Forms Evolution

Summary

At the moment there isn't a swipe gesture available in Xamarin.Forms, I think it would be a good addition to the library because it'll be cross platform and saves us adding third party libraries or custom renderers for straight forward app functionality.

API Changes

SwipeGestureRecognizer

Intended Use Case

We would be able to add a swipe gesture to any control in cross platform.

3
3 votes

In Progress · Last Updated

Assign to @lpdavies to implement.

«1

Posts

  • StephaneDelcroixStephaneDelcroix USInsider, Beta ✭✭✭✭
    edited December 2016

    Please define a Swipe. Which events would be fired, at what time ? Also please add real use case of what you'd do with a SwipeGestureRecognizer

  • NamyslawSzymaniukNamyslawSzymaniuk USMember ✭✭✭
    edited December 2016

    @StephaneDelcroix said:
    Please define a Swipe. Which events would be fired, at what time ? Also please add real use case of what you'd do with a SwipeGestureRecognizer

    Personally for me, that could be useful for ListView, like swipe feature against Telerik RadListView

  • seanydaseanyda GBMember ✭✭✭✭✭

    @StephaneDelcroix said:
    Please define a Swipe. Which events would be fired, at what time ? Also please add real use case of what you'd do with a SwipeGestureRecognizer

    SwipeLeft, SwipeRight, SwipeUp, SwipeDown and maybe a SwipeCompleted event?

    Swiping is basic functionality in apps, I didn't think it would be necessary to add a use case for a swipe gesture in an app.

  • StephaneDelcroixStephaneDelcroix USInsider, Beta ✭✭✭✭

    it a least require a good definition...

  • EZHartEZHart USXamarin Team Xamurai

    I haven't spent a lot of time thinking this through, but my first instinct is that we'd at least need to include the starting position, ending position, and ending velocity of the gesture.

    Starting position would be required to determine whether this could be an "edge swipe" (to use the term from the Material Design guidelines); the ending position would be required to determine whether it's a "paging swipe".

    And ending velocity would be necessary to determine whether it's really a swipe and not just a "fling" gesture.

    There's also the question of whether this conflicts with PanGesture, and if so how that's resolved. If a SwipeGesture were applied to the same control as a PanGesture, does the last one in win? Or do we provide some sort of mechanism for letting the developer specify which one wins (something like UIGestureRecognizerDelegate)?

    Another possibility might be to create something like the Manipulation events in Windows (e.g. ManipulationStarting, ManipulationCompleted), and report all of the raw manipulation data. PanGesture could be rebuilt atop that, as could "default" versions of Fling and Swipe with adjustable thresholds for distance and velocity. That'd give developers some easily usable defaults for these "common" gestures while still letting them build custom ones and/or tweak them for specific applications/platforms.

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    Please add a proposal for an API or we will be forced to close this proposal as incomplete.

  • seanydaseanyda GBMember ✭✭✭✭✭
    edited December 2016

    API Proposal - (I cannot edit main thread, so maybe a Moderator can move it for me)

    I was thinking we could use a enum and select which swipe we want to use, But now I'm thinking we could allow a SwipeGestureRecognizer to fire different events dependent on which direction you swipe.

    SwipeGestureRecognizer testSwipe = new SwipeGestureRecognizer();
                testSwipe.SwipeLeft += (sender, e) =>
                {
                    // Left Swipe Event Handler
                };
    

    We would have an event handler for SwipeRight, SwipeUp and SwipeDown too.

    Then have a SwipeCompleted event.

    It would be good doing it this way because it would handle @Namyslawszymaniuk example where we would utilise the SwipeLeft and SwipeRight event handlers to pull it off.

    We would be able to pull off doing this - https://forums.xamarin.com/discussion/84683/proposal-add-left-to-right-swipe-on-ios-listview-cells#latest with the SwipeGestureRecognizer using a ViewCell

  • seanydaseanyda GBMember ✭✭✭✭✭

    @EZHart said:
    I haven't spent a lot of time thinking this through, but my first instinct is that we'd at least need to include the starting position, ending position, and ending velocity of the gesture.

    Starting position would be required to determine whether this could be an "edge swipe" (to use the term from the Material Design guidelines); the ending position would be required to determine whether it's a "paging swipe".

    It would be nice to have a starting position and ending position because it would be handy to find out the distance the user has swiped.

    @EZHart said:
    There's also the question of whether this conflicts with PanGesture, and if so how that's resolved. If a SwipeGesture were applied to the same control as a PanGesture, does the last one in win? Or do we provide some sort of mechanism for letting the developer specify which one wins (something like UIGestureRecognizerDelegate)?

    If the user decides to add a PanGesture on a element which already contains a SwipeGesture then I think the more recent gesture added should take priority unless we got the user to specify an enum where they predict the users next move on which one takes priority but that doesn't seem ideal either :S

  • seanydaseanyda GBMember ✭✭✭✭✭
    edited December 2016

    I've added Left Swipe to Xamarin.Forms iOS as a test and its working. If you want I will finish building swipes into forms iOS and Android and all directions and submit a PR unless someone more experienced wants to build it but I'm happy to finish it my way if not.

    I've done it like how I explained with the API before -
    SwipeGestureRecognizer swipe = new SwipeGestureRecognizer();
    swipe.SwipeLeft += (sender, e) =>
    {
    bx.BackgroundColor = Color.Green;
    };
    bx.GestureRecognizers.Add(swipe);

    Does anyone want the code?

  • AdamMeaneyAdamMeaney USMember ✭✭✭✭

    So a swipe gesture is cool and all, but have we decided what it should do on swiping enabled controls?

    If you have it on a listview with context actions on the cells, what would happen if you did a swipe left? We should make sure it can fire the gesture and still do the context action I would assume?

    What about in scrollviews or the carouselview?

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    We currently do not have a well defined order of execution for gesture recognizers. We just kind of leave that up to the platform, Im not sure we can easily do anything else to be honest.

  • seanydaseanyda GBMember ✭✭✭✭✭
    edited December 2016

    I've finished my attempt at building the SwipeGestureRecognizer (only in iOS) these are the changes

    https://github.com/xamarin/Xamarin.Forms/compare/master...seano2o6:master

    I make the new UIGestureRecogniser per EventHandler. This is my demo page for it which works fine -

            BoxView bx = new BoxView { BackgroundColor = Color.Red };
    
            SwipeGestureRecognizer swipe = new SwipeGestureRecognizer();
            swipe.SwipeLeft += (sender, e) =>
            {
                bx.BackgroundColor = Color.Green;
            };
    
            swipe.SwipeRight += (sender, e) =>
            {
                bx.BackgroundColor = Color.Pink;
            };
    
            swipe.SwipeUp += (sender, e) =>
            {
                bx.BackgroundColor = Color.Accent;
            };
    
            bx.GestureRecognizers.Add(swipe);
    
            MainPage = new NavigationPage(new ContentPage
            {
                Content = bx,
            });
    

    What do you think?

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    Im really trying to figure out a use case other than a tinder like experience that doesn't need intermediate value updates so that animations can look right.

    I know that you can use a PanGestureRecognizer for this but I am curious why it may not be better to have the swipe have intermediate updates as well. Effectively Swipe becomes a subset of Pan.

  • seanydaseanyda GBMember ✭✭✭✭✭

    @TheRealJasonSmith said:
    Im really trying to figure out a use case other than a tinder like experience that doesn't need intermediate value updates so that animations can look right.

    I know that you can use a PanGestureRecognizer for this but I am curious why it may not be better to have the swipe have intermediate updates as well. Effectively Swipe becomes a subset of Pan.

    That's true, there isn't much you could do with a swipe but there has been occasions where I have had to build a view renderer for things like swiping an alert of the screen etc, There would be no harm in putting it in. If I carried on working on it would my pull request get merged?

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    I will get you an answer soon. I think as a team we need some time to decide what we want to do with this API.

    My initial reaction is I am okay with it, but I need to make sure I listen to everyone else in the team and make sure that any potential objections to the API are raised and discussed before we approve it.

    If you want to keep working on it I strongly suspect we will eventually approve a form of this API, I just cant ensure that for you.

  • EZHartEZHart USXamarin Team Xamurai

    @lpdavies Is there a reason you opted for separate EventArgs classes and individual events for each swipe direction, rather than a single event and EventArgs with a Direction property? In other words, why SwipeLeftEventArgs, SwipeRightEventArgs, etc instead of

    SwipeEventArgs
    {
        public SwipeDirection Direction {get;}
    }
    

    ?

  • seanydaseanyda GBMember ✭✭✭✭✭

    @EZHart said:
    @lpdavies Is there a reason you opted for separate EventArgs classes and individual events for each swipe direction, rather than a single event and EventArgs with a Direction property? In other words, why SwipeLeftEventArgs, SwipeRightEventArgs, etc instead of

    SwipeEventArgs
    {
      public SwipeDirection Direction {get;}
    }
    

    ?

    Bad practices sorry :( . I was speaking to a colleague at the end of the day and I had this on my to-do list for tomorrow morning. It's the first time I've tried to do anything like this before.

  • seanydaseanyda GBMember ✭✭✭✭✭

    I've updated the PR this morning with that change @EZHart

  • seanydaseanyda GBMember ✭✭✭✭✭
    edited December 2016

    Should I change the Command and CommandParameter properties to private set? It's not like a TapGesture where its only going to do one thing.. Theres 4 possible separate events so unless the Command/CommandParameter was used for just a swipe in any direction it doesn't seem like it could be used?

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    This is ultimately the issue with commanding :/

    Let me think about the best way to handle those...

  • seanydaseanyda GBMember ✭✭✭✭✭
    edited December 2016
    Thanks @TheRealJasonSmith ! Is it worth me getting started on the Android swipe tomorrow or should I hold off for now?
  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    I'd get rolling on it, I think really at this point we are going to end up int he details but the overall idea is fine.

  • VelocityVelocity NZMember ✭✭✭

    @lpdavies @TheRealJasonSmith
    I have developed a set of XF-compatible gesture recognizers with cross platform support on iOS, Android and UWP.

    They closely follow the API design of the standard XF recognizers and currently include a swipe and long-press recognizer. In XAML, they look and perform as per the standard recognizers.

    Let me know if you're interested and can look at contributing them toward this project.

  • Abdul.3549Abdul.3549 USMember

    Swipe Gesture Should also provide SwipeOffset in SwipeEventArgs.

  • DavidOrtinauDavidOrtinau USForum Administrator, Xamarin Team, Insider, University Xamurai

    @lpdavies I've assigned this to you based on the comments above. Are you still good with taking it on? Perhaps worth collaborating with @Velocity ?

  • seanydaseanyda GBMember ✭✭✭✭✭

    @DavidOrtinau said:
    @lpdavies I've assigned this to you based on the comments above. Are you still good with taking it on? Perhaps worth collaborating with @Velocity ?

    Sure. I'd love to continue working on this, but I can only develop the iOS side of things (I've always had trouble with running Android on Mac and I have no access to a windows pc), and I've never done UITests before so I wasn't sure how to do those to add to the pull request. But I'd be happy to continue improving it for iOS.

  • VelocityVelocity NZMember ✭✭✭

    Thanks @DavidOrtinau.
    @lpdavies We have already developed a working XF-compatible swipe recognizer for iOS, Android and UWP.
    Perhaps can merge what you have done with our implementation for a new PR request? Its only really a matter of doing some integration and writing UITests, all hard the work is already done!

    As a side note, we have also built a long-press recognizer too for all three platforms.

  • seanydaseanyda GBMember ✭✭✭✭✭

    @Velocity said:
    @lpdavies We have already developed a working XF-compatible swipe recognizer for iOS, Android and UWP.
    Perhaps can merge what you have done with our implementation for a new PR request? Its only really a matter of doing some integration and writing UITests, all hard the work is already done!

    As a side note, we have also built a long-press recognizer too for all three platforms.

    This is the PR at the moment https://github.com/xamarin/Xamarin.Forms/pull/657 is it similar to what you've done?

  • VelocityVelocity NZMember ✭✭✭

    @lpdavies I'm going to merge your work with what we have done in a new branch on my XF fork.
    Given you have only worked on iOS, I can include the work we have done for Android and UWP.
    Bear in mind too this is production-code which has already shipped in an app, so has been well-tested and is stable.

    Once the branch is up, we can collaborate on this and put a new PR request up for consideration. How does that sound?

  • VelocityVelocity NZMember ✭✭✭
    edited April 6

    @lpdavies I've started the branch here. So far I've brought in all your work and merged it with our implementation.
    Following this, I can now get started on bringing over our Android and UWP implementation.

  • seanydaseanyda GBMember ✭✭✭✭✭

    @Velocity said:
    @lpdavies I've started the branch here. So far I've brought in all your work and merged it with our implementation.
    Following this, I can now get started on bringing over our Android and UWP implementation.

    So what needs to be done my end? Will i be marked as a contributor through GitHub doing this because I've not committed any code.

  • VelocityVelocity NZMember ✭✭✭
    edited April 7

    @lpdavies I've added you as a collaborator on the XF fork for this proposal.
    I've quickly put together a swipe gallery page for testing. All working nicely on iOS so far!

    I would recommend doing some research on the UI Tests by comparing how the existing tests are written for the other gesture recognizers. If you would be willing to work on these, that would be awesome!

  • VelocityVelocity NZMember ✭✭✭

    @EZHart @TheRealJasonSmith So, iOS happily detects a swipe gesture without any concept of swipe threshold in pixels etc before gesture is recognized. However for UWP and Android, we need to use a threshold to determine minimum X/Y distance before a swipe is recognized.

    Currently I've baked this into the platform code as a constant, but should we move this to perhaps a BP on SwipeGestureRecognizer? We could default it to a reasonable value i.e. 100px and comment that the value only takes effect on UWP and Android?

  • VelocityVelocity NZMember ✭✭✭

    Update - 20 April 2017.

    Initial implementation of recognizers for all three platforms is now complete.
    Wired native recognizers for iOS, UWP and Android.
    Moved swipe threshold to a new BP as per comment above, defaults to 100px.

  • VelocityVelocity NZMember ✭✭✭

    Update - 21 April 2017.

    Unit tests added.
    DRY'd up detection logic and moved to PCL. Updated native handlers.

    Just doing some final testing over the weekend and the PR will be going up.

  • renzskarenzska USMember ✭✭

    As this is a long awaited feature set, it would be awesome to have in Xamarin.Forms 2.3.5. Thanks for all the hard work!

  • ChrisLamont.3643ChrisLamont.3643 USUniversity ✭✭

    Does the following need fit the swipe gesture described above?:

    "an Instagram swipe that switches between whole users, versus a tap, that just goes to the next image"

  • seanydaseanyda GBMember ✭✭✭✭✭

    @ChrisLamont.3643 said:
    Does the following need fit the swipe gesture described above?:

    "an Instagram swipe that switches between whole users, versus a tap, that just goes to the next image"

    That sounds more like a Carousel View use case

  • RyanDixonRyanDixon USMember ✭✭✭
    edited May 10

    @lpdavies said:

    @ChrisLamont.3643 said:
    Does the following need fit the swipe gesture described above?:

    "an Instagram swipe that switches between whole users, versus a tap, that just goes to the next image"

    That sounds more like a Carousel View use case

    Agreed! A Carousel would be much more fluid than having to rely on commanding before animating between your views.

    Just having a look over the pull request, it seems like each of the platforms handlers have a "DefaultThreshold" property or equivalent.
    Would this not be something worth exposing in the forms abstraction no?
    @see: https://github.com/seano2o6/Xamarin.Forms/blob/1223fe0548e6f33ed2f4faa3c29918131ec6bc69/Xamarin.Forms.Core/SwipeGestureRecognizer.cs

    On top of this, how much additional overhead would it be to expand on this and provide a "velocity"? I haven't looked over the code too much but it seems at the moment if you were to place a finger on one side of the screen and drag slowly to the other and then remove, the swipe event would still be triggered?
    To be honest I don't even know if there is a clear "definition" of what a swipe is. The best I can see is that in JQuery Mobile where you can configure it as such: $.event.special.swipe.durationThreshold

    Either way, thanks for the great addition! Will 100% be using this as soon as it is available :smile:

«1
Sign In or Register to comment.