1.1k views
in GUI Development by

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?

1 Answer

0 votes
by
 
Best answer

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.

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

Thanks

Phil
by
Hi Phil,

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

Best regards,

Manfred.
by
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
by

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

by

Hi Rudolf,

I have designed a vertical list application similar to attached example. But I couldn't obtain fading. I have attached the design. Please have a look and assist me to find the issue.

 

Regards,

Sazna.

by

Hi Sazna,
within your sample you I could see two issues.

1. OnLoadItem
Here you have to use the sender list and not a static object.

2. OnListUpdate
Here you have to use relative positions, as in the original sample everything das positioned to the left top corner.

Please find see the corrected  Sample

by
Hi Rudolf,

Now it's fine. Thank you.

Regards,

Sazna.
by

Hi Rudolf,

I have modified that sample by having a combo box and a text lying above the list items. When I scroll, list item with combo box/text also should be scrolled with fading. And also if I click on the combo box/text lying above the vertical list then the corresponding item should be expanded. For example if I touch the text lying above the third item in the vertical list, then the gap between third and fourth item should be expanded to show some other settings. Is it possible to have these functionalities with vertical list?

Regards,

Sazna.

by
Hi Sazna,
Here I recommend to let the combo box be part of the list item. Based on the type of item, you can present a combo box or even other direct edit widgets within an item. As soon as it is part of the item, it will automatically be scrolled.

With best regards,
Rudolf
by
Hi Rudolf,

But the thing is I need to have different on load items and no of items. Then how it can be modified? and what could be the solution for expanded list?

Regards,

Sazna.
by
Hi Sazna,
I recommend to implement the list items as containers and let then know the data source to get the data from. Based on the data type, the list item can instantiate an input widget and connect it with the associated data source.
So within the OnLoadItem you just assign the data source to the item and the item can handle the rest by itself based on the data type.
With kind regards,
Rudolf
by
Hi Rudolf,

Could you please explain me with an example. Because I didn't get you properly.

Regards,

Sazna.
by

Hi Sazna,
Please find a sample sample with DataProvider which handles the dynamic presentation of widgets within the list items.
With kind regards,
Rudolf

by

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.

by
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.
by

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.

by
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
by
Hi Rudolf,

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

Regards,

Sazna.

Ask Embedded Wizard

Welcome to the question and answer site for Embedded Wizard users and UI developers.

Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

Embedded Wizard Website | Privacy Policy | Imprint

...