List text string color and Opacity

Question

At my project have a complex vertical list, it can slide and have those function：

1、The list ItemClass is View::text. The text can show this string: H,7,6,5,4,3,2,1,L;

2、the number(7,6,5,4,3,2,1) string color is white, the string "H" is red, the string "L" is blue; and cneter item font is bigger than top/bottom item

3、the list can show 3 item on time, Top item and Bottom item Opacity is 60%, Center item Opacity is 100%

i try some way to achieve that 3 function, but i can not compatlibility those 3 function, can you give me a sample demo project

For customer UI and requirement, Like this question ：

Horizontal list show - Ask Embedded Wizard (embedded-wizard.de)

We should not show the string half between Center and Top/bottom

Answer 1

Hello ke007,

the example project can be found here. The important parts of this example are:

1. The OnLoadItem slot method selects the color values depending on the number of the item. First item is red. Last item is blue. Other items are white.

2. The OnLoadItem slot method calculates for the just queried item the distance between the center position of the item and center position of the Vertical List. From this distance an opacity value in range 100% .. 60% is calculated. 

3. An additional slot method onSlide is implemented. This method is signaled each time the user scrolls the list content. Its job is to force the list to reload all items. Without this trick the list will load the items only when they are exposed. With this trick the item is constantly refreshed and its opacity can change.

Please note: this example addresses the color and opacity aspects from your description only. The requirement with font height is not possible to implement when respecting the restriction mentioned in your comment and using regular Platform Packages. It would require the font size to change dynamically while scrolling the list. This is possible only with Platform Packages including own TrueType font engine. If you have licensed such Platform Package, see Using dynamically configured fonts for more details how to adjust the height of font at the runtime. You could calculate the font height similarly how the opacity is calculated.

I hope it helps you further.

Best regards

Paul Banach

EDIT: If you replace in the method OnLoadItem the following line:

itemColor = itemColor * itemOpacity;

... by this code:

itemColor.alpha = uint8(( itemColor.alpha * ( itemOpacity + 1 )) >> 8 );

... the opacity effect will become more natural.