Results 1 to 4 of 4

Thread: Swipe (Edge Swipe) in QML

  1. #1
    Join Date
    Jan 2012
    Location
    Dortmund, Germany
    Posts
    159
    Thanks
    69
    Thanked 10 Times in 8 Posts
    Qt products
    Qt4
    Platforms
    Windows Android

    Question Swipe (Edge Swipe) in QML

    To pull in a side menu on touch devices, I'd like to react to a (preferably single finger) slide gesture starting from outside of the screen. Google's material style seems to call this an "Edge swipe"

    I have looked into SwipeView QML Type, but this seems to be targeted for entirely different needs. Customizing the SwipeDelegate appears to be used with "normal" in-screen swipes.

    Any starting point or documentation hint would be very welcome!

  2. #2
    Join Date
    Jan 2012
    Location
    Dortmund, Germany
    Posts
    159
    Thanks
    69
    Thanked 10 Times in 8 Posts
    Qt products
    Qt4
    Platforms
    Windows Android

    Question Re: Swipe (Edge Swipe) in QML

    UPDATE: I've found this meanwhile, seems to be a good way to do it. I have added an "edgeSwipe(string fromDirection)" signal and updated onReleased this way:

    Qt Code:
    1. onReleased: {
    2. switch (drag.axis) {
    3. case Drag.XAndYAxis:
    4. canceled(mouse)
    5. break
    6. case Drag.XAxis:
    7. if (detectEdgeSwipe && origin.x <= 5) {
    8. edgeSwipe("fromLeft")
    9. } else if (detectEdgeSwipe && origin.x >= parent.parent.width-5){
    10. edgeSwipe("fromRight")
    11. } else {
    12. swipe(mouse.x - origin.x < 0 ? "left" : "right")
    13. }
    14. break
    15. case Drag.YAxis:
    16. if (detectEdgeSwipe && origin.y <= 5) {
    17. edgeSwipe("fromTop")
    18. } else if (detectEdgeSwipe && origin.y >= parent.parent.height-5) {
    19. edgeSwipe("fromBottom")
    20. } else {
    21. swipe(mouse.y - origin.y < 0 ? "up" : "down")
    22. }
    23. break
    24. }
    25. }
    To copy to clipboard, switch view to plain text mode 

    The problem is, that swipes that originate from outside the screen are not being registered at all. Any ideas?

  3. #3
    Join Date
    Aug 2008
    Location
    Algarve, Portugal
    Posts
    287
    Thanks
    23
    Thanked 31 Times in 27 Posts
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11 Windows Symbian S60

    Default Re: Swipe (Edge Swipe) in QML

    I have done something like that in the past before swipeview was available, something like this should work:


    Qt Code:
    1. import QtQuick 2.4
    2.  
    3. Rectangle {
    4. id: root
    5. width: 400
    6. height: 380
    7. color: "yellow"
    8.  
    9. Rectangle {
    10. id: panel
    11. width: parent.width * 0.8
    12. height: parent.height * 0.8
    13. radius: 20
    14. color: "orange"
    15. MouseArea {
    16. id: mouseArea
    17. anchors.fill: parent
    18. drag.target: panel
    19. drag.minimumY: 0
    20. drag.maximumY: 0
    21. drag.minimumX: -panel.width
    22. drag.maximumX: 0
    23. onReleased: {
    24. //if the panel is swiped more than 30% it will hide
    25. //else it will go back to the original position
    26. //this makes a pretty nice effect :)
    27. if (panel.x < -panel.width * 0.3) {
    28. //we need to make sure that a state change happens to
    29. //fire the transition animation
    30. root.state = "show"
    31. root.state = "hide"
    32. }
    33. else {
    34. root.state = "hide"
    35. root.state = "show"
    36. }
    37. }
    38. }
    39. onXChanged: {
    40. console.log(x)
    41. }
    42. }
    43.  
    44. Rectangle {
    45. id: button
    46. width: 45
    47. height: width
    48. radius: 5
    49. color: "lightblue"
    50. anchors.bottom: parent.bottom
    51. anchors.left: parent.left
    52. MouseArea {
    53. anchors.fill: parent
    54. onClicked: {
    55. root.state = root.state === "show" ? "hide" : "show"
    56. }
    57. }
    58. }
    59.  
    60. state: "show"
    61. states: [
    62. State {
    63. name: "hide"
    64. PropertyChanges { target: panel; x: -panel.width }
    65. },
    66. State {
    67. name: "show"
    68. PropertyChanges { target: panel; x: 0 }
    69. }
    70. ]
    71.  
    72. transitions: Transition {
    73. NumberAnimation {
    74. target: panel
    75. property: "x"
    76. duration: 1000
    77. easing.type: Easing.OutCubic
    78. }
    79. }
    80. }
    To copy to clipboard, switch view to plain text mode 
    __________________________________________________
    My projects: calculator MathGraphica ; SuperEpicMegaHero game ; GooglePlay ; bitbucket ; github
    Like my projects ? Buy me a kofi

  4. #4
    Join Date
    Jan 2010
    Posts
    1
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Swipe (Edge Swipe) in QML

    So, something like Drawer ?

Similar Threads

  1. Swipe gesture not recognized
    By Luc4 in forum Qt Programming
    Replies: 2
    Last Post: 16th December 2014, 15:13
  2. QML Swipe gesture overrides other components
    By juracist in forum Qt Quick
    Replies: 1
    Last Post: 9th November 2014, 23:03
  3. Window / panel swipe animation
    By notronrj in forum Qt Programming
    Replies: 1
    Last Post: 11th March 2014, 08:51
  4. How to make label swipe-able?
    By chong_kimkeang in forum Newbie
    Replies: 10
    Last Post: 11th October 2012, 04:03
  5. Replies: 5
    Last Post: 9th October 2012, 04:10

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.