August 29, 2011

marcoB marcoB
Lab Rat
145 posts

Flickable snap behaviour



I have a ListView that displays a full screen items. The default snap behaviour with “snapMode: ListView.SnapOneItem”, is that when I drag for, lets say, 10 pixel, the flickable goes to the next item.
What I would like to achieve is to start the snap after a drag of half the screen.
Is this possible ?

Thanks in advance

3 replies

August 31, 2011

cpscotti cpscotti
Lab Rat
31 posts

Ok, I have some Ideas that might help
If you let go the automatic “snapMode: ListView.SnapOneItem”, you can implement the behaviour yourself.
I can think of something like this:

  1.     property double initContentY;
  2.     property double singleItemHeight;//set this somewhere
  4.     onMovementStarted: {
  5.         //save contentY to a custom property on your flickable
  6.         initContentY = contentY
  7.     }
  9.     onMovementEnded: {
  10.        //
  11.        var middleOfItem = (contentY-initContentY)%singleItemHeight
  12.        if( Math.abs(middleOfItem) > (singleItemHeight/2)) {//more than half an item was flicked
  13.             contentY += ( singleItemHeight - middleOfItem)
  14.             //increment contentY to flick to the next item
  15.        }
  16.     }

I’m pretty sure you’d have to handle signs properly there even before the remainder operator but I think that’s the right way to go…

 Signature - Used when I need to kill some time at work :D

August 31, 2011

marcoB marcoB
Lab Rat
145 posts

the logic sounds good for what I am trying to achieve.

Thanks a lot, I will try this in a bit :)

August 2, 2013

juba juba
Lab Rat
4 posts

Hi all, I have implemented a similar algorithm to calculate the current element when flicking:

  1.  // Snap One Item policy
  2.             property double initContentX;
  3.             property double initElementNumber;
  4.             property double singleItemWidth:;//set this somewhere
  6.             onMovementStarted:
  7.             {
  8.                 //save contentX to a custom property on your flickable
  9.                 initContentX = contentX
  10.                 //also save current element number
  11.                 initElementNumber = contentX / singleItemWidth
  12.             }
  14.             onMovementEnded:
  15.             {
  16.                 var numberOfItem = Math.round((contentX - initContentX) / singleItemWidth);
  17.                 contentX = (singleItemWidth * numberOfItem)
  18.                         + (initElementNumber * singleItemWidth)
  19.             }

Now my problem is how to set a transition in order to not move immediately to the contentX…
I try with a simple transition on contentX defined inside my Flickable, but it doesn’t work…

Any suggestion?

Thanks in advance.

  ‹‹ ListModel.append "for" loop to add "attributes"?[SOLVED]      How to use GestureArea on Symbian^3 ››

You must log in to post a reply. Not a member yet? Register here!