The ScrollList is a scrollable menu consisting of a number of items and a number of widgets, which are dynamically updated as they are scrolled into view. The ScrollList is also able to invoke callbacks when interacting with the items in the ScrollList.
The ScrollList can be found in the Containers widget group in TouchGFX Designer.
The properties for a ScrollList in TouchGFX Designer.
|Property Group||Property Descriptions|
|Name||Name of the widget. Name is the unique identifier used in TouchGFX Designer and code.|
|Type||Type specifies if ScrollList is oriented vertically or horizontally|
|Location||X and Y specify the top left corner of the widget relative to its parent.|
W and H specify the width and height of the widget.
Lock specifies if the widget should be locked in its current X, Y, W and H.
Locking the widget also disables interacting with the widget through the screen.
Visible specifies the visibility of the widget. Making the widget invisible also disables interacting with the widget through the screen.
|Item Template||Item Template specifies which CustomContainer to use as template.|
Number of Items specifies the number of items present in the ScrollList.
|List Appearance||Circular specifies if the items in the ScrollList will loop when reaching the end.|
Items Snap specifies if items should snap.
If snapping is false, the items can flow freely. If snapping is true, the items will snap into place such that an item is always in the selected spot.
Item Margin specifies the spacing between items.
Padding Before and Padding After specifies the distance offset before and after the visible drawables in the ScrollList.
|Animation||Easing and Easing Option specify which easing equation to use for animations.|
Swipe Acc. and Drag Acc. specify the acceleration when scrolling.
|Mixins||Draggable specifies if the widget is draggable at runtime.|
ClickListener specifies if the widget emits a callback when clicked.
MoveAnimator specifies if the widget can animate changes to X and Y values.
The items in a ScrollList are based on a concept called Item Template which is a CustomContainer that serves as a base for the graphical elements for the items in the ScrollList. Before creating a ScrollList, a Custom Container should be created to have an Item Template for the ScrollList.
After having created the ScrollList the CustomContainer can be selected under the property Item Template. Specifying the Item Template results in the ScrollList resizing to fit with the size property that is not in the scrollable direction (width for vertical ScrollLists and height for horizontal ScrollLists) of the selected Custom Container. Changing the other size property (height for vertical and width for horizontal) determines the number of items visible.
The actions and triggers supported by the ScrollList are described in the following sections.
|Standard widget action||Description|
|Move widget||Move a widget to a new position over time.|
|Hide widget||Hides a widget (sets visibility to false).|
|Show widget||Make a hidden widget visible (sets visibility to true).|
A ScrollList does not emit any triggers.
A ScrollList is a Container type, and does not per default appear in the draw chain. Therefore, the performance is wholly dependent on the childrens drawing performance.
For more details on drawing performance, read the General UI Component Performance section.
In the generated code for the View base class we can see how TouchGFX Designer sets up a ScrollList.
scrollList.invalidate()if you change the appearance of the widget.
After the graphical elements for the ScrollList and its properties are set, user code can be written to update the items in the ScrollList. The header file for the
Screen1ViewBase class which is generated by TouchGFX Designer is shown below:
When TouchGFX Designer generates the code for ScrollList, the function
scrollListUpdateItem, highlighted above, is created for the user to override and update the items in the ScrollList. The function is called each time an item in the ScrollList needs updating, thereby ensuring that an item is updated before it becomes visible. The
scrollListUpdateItem has two parameters, which are used to identify the item being updated and to update it. The parameter
itemIndex contains the index value of the item, which is used to identify which item is being updated. The parameter
item is a reference to a CustomContainer object which is a visible item in the ScrollList. Updating the graphics for the parameter
item results in an update to the render for a visible item in the ScrollList.
An example integration of
scrollListUpdateItem is shown below:
In the header file
scrollListUpdateItem function is overidden and then implemented in
The goal of this example is to update the text in the Item Template with the index value of the items which are visible, like the example shown in the beginning of this section. Since the Item Template is based on the CustomContainer, a
setValue function is created for the CustomContainer. The setValue function is able to take the
itemIndex parameter and update the text in the item template. Calling setvalue for the parameter item will cause the items to update their appearance, thereby showing their index value.
To further explore the ScrollList, try creating a new application within TouchGFX Designer with one of the following UI templates: