Horizontal list show

Question

 At my project have a Horizontal list that make up by 3 horizontal list. The Horizontal list show like the picture

 

when the list stop.  But at the slide processing the list show like this:

the number "4" (and "3") show half gray on the left list item，show white on the middle list item.  

The left list and middle list have different font color and size. How to avoid the half gray and half white string show on the slide processing？

Answer 1

Hello ke007,

Horizontal list that make up by 3 horizontal list.

Based on the information provided, I cannot determine the cause of the behavior. Please review your implementation. I suppose the problem appears at the edges between the lists.

Best regards

Paul Banach

Comments

Yes，your understand is right. On the slide processing，at the edge between the left list component and the middle list component. Half gray string "4" show on left list component and  half white string "4" show on the middle list component, this picture just appear a moment on the slide processing. But my customer want to remove this moment， he want to slide like the bellow video：

https://ask.embedded-wizard.de/?qa=blob&qa_blobid=15422814259204908174

Do you have some idea to achieve this show requirement on EW ？ 

---

Hello ke007,

the attached video shows that the item in the middle is darker and bigger. In such case, please see the thread HorizontalScrollList with different distances. It possibly addresses similar application case. I hope it helps you as a starting point.

Best regards

Paul

---

Hello Paul:

     I have learn the provide example： http://ask.embedded-wizard.de/?qa=blob&qa_blobid=16719120764619354066

     And have some question：

     1、As my picture show，I need the middle Item show different font， it have different color (and size) with the left/right item.

          but at the example，the bigger center list show used WarpGroup， How can achieve the different font color by WarpGroup

---

can you give me a sample example to achieve the different font color (and size)  list

---

Hello ke007,

see the example project. It implement another approach using just one list. The trick necessary here:

1. When the user scrolls the list, all items are forced to be reloaded. Usually the list caches items and reloads only the new exposed items.

2. In the OnLoadItem slot method, the implementation estimates the position of the item within the area of the list. The item in the center will become a dark color and bold font. Items lying above/below will become normal font and other color. See the inline comments inside the OnLoadItem slot method. This is the essential part of the modification:

Please note, in this example the items are simple Text-Views. In your application you can also use other views and e.g. configure their colors depending on the position within the list. More sophisticated: actually the colors are selected using a simple if-else condition. You could however calculate from the distance between the item and the center of the list a factor to modulate the opacity of the item. In this manner the items are slightly faded-out.

Please note, the example has been created with EW v11 for compatibility with older version.

I hope it helps you further.

best regards

Paul Banach

---

thanks for your help and your example