Faded Text - List of Text, first and last should fade out (if needed)

Question

Hi,

Using a VerticalList and a SlideTouchHandler allows me to implement a list of TextViews within seconds.

However besides sliding through the list, I want also to show if there are more lines on the bottom or on the top. A good visual effect is to fade out the text.
This allows the user to see at first glance if he can slide along top or bottom.

Currently I fake this faded text via rectangle gradient, just like this:

How to do this the right way to get a smooth faded text?

Answer 1

Hello,
One simple way is to split the list into three different vertical lists.
All lists will have the same content but are presenting different parts of the list. This can be aligned be keeping the ScrollOffset of all lists in sync.

// adjust the scroll offsets of the top and bottom list
VerticalListTop.ScrollOffset = VerticalListTop.Bounds.h + VerticalList.ScrollOffset;
VerticalListBottom.ScrollOffset = -VerticalList.Bounds.h + VerticalList.ScrollOffset;

// check if top fade is necessary
var bool topFade = ( VerticalListTop.ScrollOffset < 0 );
VerticalListTop.Buffered = topFade;
VerticalListTop.Visible = !topFade;
WarpGroupTop.Visible = topFade;

// check if bottom fade is necessary
var bool bottomFade = ( VerticalListBottom.GetItemAtPosition( point( 1, Bounds.h + 1 ) ) > 0 );
VerticalListBottom.Buffered = bottomFade;
VerticalListBottom.Visible = !bottomFade;
WarpGroupTop.Visible = bottomFade;

Now the top and bottom list will get a View::WarpGroup which can present these lists with modifies opacity at the corners.
When needed, set the top or bottom part buffered and let present it vis the WarpGroup.

See attached example.

Comments

Unfortunately the link to the example does not work, could you please re-link the example?

Thanks

Phil

---

Hi Phil,

thanks for the message - the link is now up-to-date.

Best regards,

Manfred.

---

Hi Manfred,

I have this working but currently if I swipe down from item 1, it snaps to the top of the middle area, rather than the top of the top area.

Is there any way to offset the snap point?

Thanks

Phil

---

Hi Phil,

Thanks for your input. With the memory optimizes example described in the ticket, the snap is not on the tol of the bottom list.
To cover this please see the example 2, which uses a fully buffered list and presents it using three different Views::Group. 

With kind regards,
Rudolf

See attached example 2