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

Hi Rudolf,

I followed the steps in your sample project. In my application I used Combo box, Menu item and open menu item from templates instead of toggle button and created enum for 3 type of option. Data providers also created to have various display options. But unfortunately I could see only the combo box in the resulting list. What could be the problem for this?

Regards,

Sazna.

---

Hi Sazna,
I can no see your code, but please cehck if the z-order is correct and the MenuItem and OpenMenuItem are not behind eg. the background rectangle.

---

Hi Rudolf,

I checked the design and didn't  find the mistake. Here it is the sample project which is similar to what  I have implemented. Please have a look on this.

Regards,

Sazna.

---

Hi Sazna,
You are using a MenuItem, which is designed to be added to a Menu. Here the Property 'Embedded' is set to true, so that it can be positioned correctly by the Menu. If you set the 'Enabled' to false, you will see it.
But I do NOT recommend to use a MenuItem within a list item. Either you handle your structure using lists or you follow up the Menu approach based on the template classes.

With kind regards,
Rudolf

---

Hi Rudolf,

Now I created a separate component and integrated with the list.

Regards,

Sazna.