How to realize scroll bar effect in ScrollList.

Forum|Forum|5 years ago
September 22, 2020
3 replies
5389 views

I want to realize a scroll bar in ScrollList.

So the scroll bar will work like process bar. And it will tell my user where the current icon is.

Is there any clever way to realize it.

In addition, can I customize the scroll bar?

TouchGFX

Best answer by Romain DIELEMAN

Hi,

An easy way to have a scroll bar with a scroll list is to use a scrollable container and to add a scrollList in it. You can also just put a box widget on the side of a scrollList and change its position accordingly to the scroll.

It is possible to customize the scroll bar widget. You can directly modify the generated hpp/cpp files but watch out they may be overwritten when you use a updated version of the TouchGFX fw package (so if you migrate your project to 4.14 to 4.15 in the future for example). Another way to customize it is to create your own custom scroll bar widget : copy/paste the scrollList cpp and hpp files to new ones called MyOwnScrollList.cpp/hpp that you set in the gui/common folder for example.

/Romain

Romain DIELEMANBest answer

ST Employee

Hi,

An easy way to have a scroll bar with a scroll list is to use a scrollable container and to add a scrollList in it. You can also just put a box widget on the side of a scrollList and change its position accordingly to the scroll.

It is possible to customize the scroll bar widget. You can directly modify the generated hpp/cpp files but watch out they may be overwritten when you use a updated version of the TouchGFX fw package (so if you migrate your project to 4.14 to 4.15 in the future for example). Another way to customize it is to create your own custom scroll bar widget : copy/paste the scrollList cpp and hpp files to new ones called MyOwnScrollList.cpp/hpp that you set in the gui/common folder for example.

/Romain

Wrend.1Author

Associate III

Thanks for your advice.

I try the first Solution you give.

I put a ScrollList in a scrollableContainer. And the code like below.

//in Constructor
scrollList1.setNumberOfItems(6);
scrollList1.setHeight( (scrollList1.getDrawableSize() + 2 * scrollList1.getDrawableMargin() ) * 
scrollList1.setTouchable(false);

It worked well.But when I modify the number of item. The code like below.

//in Constructor
scrollList1.setNumberOfItems(15);
scrollList1.setHeight( (scrollList1.getDrawableSize() + 2 * scrollList1.getDrawableMargin() ) * 
scrollList1.setTouchable(false);

It did not work as I expect, it only display 6 items and the remaining 7 items didn't appear.

What causes this phenomenon?

T

t.decker

Senior II

@Romain DIELEMAN it would be really nice to have a public method implemented in the ScrollList returning the current scroll offset (item number or pixel). Or directly implement the scrollbar the same way the ScrollContainer has one.