Vertical list and Slide Touch Handler

Question

At my project, the screen vertical length is small, but we have a long vertical list (have more list  item).

The Slide Touch Handler link with the vertical list. We want the vertical list move(scroll) 3cm when i slide 1cm on the Slide Touch Handler. How to achieve this function？

Answer 1

Hello ke007,

your application case is not clear to me.

In practice, arrange the Vertical List to fill the screen vertically (or make the list smaller). In any case avoid that the Vertical List is larger than the screen itself. Then using the Slide Touch Handler the user can intuitively scroll the list contents. See also Connect Vertical List with a Slide Touch Handler.

Best regards

Paul Banach

Comments

I have read the document of the link, include before and after section on the document. So, exclude the Friction property,  when i slide 1cm on the Slide Touch Handler, the vertical list must be move 1cm?

Because the Screen UI is define by customer. We use a small vertical length screen,  but customer need show a height list on vertical, they want the slider move 1cm  and the link vertical list move 3cm, how can we achieve this fucntion?

---

So, exclude the Friction property,  when i slide 1cm on the Slide Touch Handler, the vertical list must be move 1cm?

Yes, the list follows the finger movements 1:1. 

want the slider move 1cm  and the link vertical list move 3cm, how can we achieve this fucntion?

If  the list should not follow 1:1 the finger movements then you can't use the Slide Touch Handler connected directly to the list. Instead you will need to take care of the initialization of the Slide Touch Handler and communication between the Slide Touch Handler and Vertical List:

Step 1. First ensure you have a Vertical List existing in your component.

Step 2: Add a Slide Touch Handler to the component.

Step 3: Arrange the Slide Touch Handler so it overlaps the area of the Vertical List.

Step 4: Add a slot method to the component. Name it e.g. onStartSlide.

Step 5: Implement the slot method onStartSlide with following code. This implementation initialises the Slide Touch Handler to slide over an area which is 1/3 of the area occupied by real items:

// Get the area occupied by visible views
var rect  area   = VerticalList.GetItemsArea( 0, VerticalList.NoOfItems - 1 );
var point origin = VerticalList.Bounds.origin;

if ( area.x1 > origin.x ) area.x1 = origin.x;
if ( area.y1 > origin.y ) area.y1 = origin.y;

// The resulting offset and the slide range
var int32 offset    = area.y1 - VerticalList.Bounds.y1;
var int32 minOffset = VerticalList.Bounds.h - area.h;

// If the content is smaller than the list itself - nothing to slide
if ( minOffset > 0 ) minOffset = 0;

SlideTouchHandler.Offset    = point( 0, VerticalList.ScrollOffset / 3 );
SlideTouchHandler.MinOffset = point( 0, ( VerticalList.ScrollOffset + minOffset - offset ) / 3 );
SlideTouchHandler.MaxOffset = point( 0, ( VerticalList.ScrollOffset - offset ) / 3 );

Step 6: Add further slot method and name it e.g. onSlide.

Step 7: Implement the method onSlide with following code. This implementation applies a factor 3 to the scroll offsets resulting from the slide interaction:

VerticalList.ScrollOffset = SlideTouchHandler.Offset.y * 3;

Step 8: Assign the slot method onStartSlide to the Slide Touch Handler's property OnStart.

Step 9: Assign the slot method onSlide to the Slide Touch Handler's property OnSlide.

I hope it addresses your application case.

Best regards

Paul Banach