How to realize scroll bar effect in ScrollList.

[Wrend.1]

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?

[Romain DIELEMAN · Accepted solution]

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.1]

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?

[Wrend.1]

Hi，I find the reason that why I can't ​modify the number of item and height.

In class ScreenViewBase ,I find the scrollList1ListItems, like below:

touchgfx::DrawableListItems<selection, 6> scrollList1ListItems;

And the number 6 looks like depend on the height of scrollWheel where I set in touchGFX Designer.

So , how can I modify the number in the view Constructor.

[HPham.1590]

I think if you're trying to change number of items in runtime, you should add scrollList1.invalidate() function at the end. This function will check and validate your change.

Hieu

[Wrend.1]

Of course I do that, I call the "scrollList1.invalidate();" in the handleTickEvent(). It will be called 60 times in a second.

The main reason is that the size of scrollList1ListItems is not enough.

[t.decker]

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

[Romain DIELEMAN]

Hi,

Could you add this in the Idea Zone of this forum ? This will help the team follow those demands and ideas :thumbs_up:.

/Romain

[t.decker]

I wasn't aware of the Idea Zone. Thanks!

Created Idea: Add scrollbar to Scroll List like the Scrollable Container already has

[t.decker]

Hi @Romain DIELEMAN,

is there any update on the "Idea"  I have created? Seems I can not access this part of the community any more.