Creating a native scroller to scroll a field
In this lesson we will see how to set up a native mobile scroller to allow you to scroll the contents of a field.
You can download the stack for this lesson here: https://tinyurl.com/y9whje9j
Create your content
The first step is to add the content you wish to display to the stack. In this case we are using a field to display text. Make the field large enough to show all the text. From the size and position tab in the property inspector (1), lock the size and position of the field (2).
Create a group
Now group your field and set the size of the group to the area you want to be shown in your app. Lock the size and position of the group.
The group will be used to set the size of the scrollable area.
Create the scroller
We will set up the scroller in the preOpenCard handler of the card script. Any messages sent by the scroller are sent to the control that created it so we can also handle the messages in the card script.
Firstly we check the environment as we only want to create the scroller on mobile.
NOTE: mobile controls do not work in the IDE.
if environment() is not "mobile" then exit preOpenCardWe then work out what area the scroller should work over and the area of the content to be scrolled. The scroller should take up the same area as the group and should allow the full area of the field to be scrolled into view.
put the rect of group "scrollArea" into tScrollerRect
put the left of field "lorem",the top of field "lorem",the right of field "lorem",the top of field "lorem" + the formattedHeight of field "lorem" into tContentRectIf you experience hidden text in your field after a scroll please replace the above script with :
put 0,0,(the formattedWidth of group "scrollArea"),(the formattedHeight of group "scrollArea") into tContentRectNow create the scroller and store the ID of the created control in a script local variable
mobileControlCreate "scroller", "loremScroll"Set up the properties of the scroller
We need to set the properties of the scroller so it behaves as we want. We set the rect, the content rect, the visibility, whether the scroll indicator shows and the initial scroll.
mobileControlSet "loremScroll", "rect", tScrollerRect
mobileControlSet "loremScroll", "contentRect", tContentRect
mobileControlSet "loremScroll", "visible", true
mobileControlSet "loremScroll", "scrollingEnabled", true
mobileControlSet "loremScroll", "vIndicator", true
mobileControlSet "loremScroll", "vscroll", 0Handle the scroll message
The scroller sends messages which you can handle to implement scrolling. In this case we want to set the vScroll of the group to scroll the content into view
on scrollerDidScroll hOffset, vOffset
// When the user scrolls move the displayed content
set the vScroll of group "scrollArea" to vOffset
end scrollerDidScrollScrolling to a particular line
You can scroll to a particular line by setting the vScroll of of the scroller.
Given a line number and the textHeight of the "lorem" field you can calculate the correct scroll value.
mobileControlSet "loremScroll", "vscroll", (tLine * the effective textHeight of field "lorem")
Thank you for that nice example.
Is there a way to use it with a list with selectable items?
I am working with such a list and it happens of course a selection on mouseUp when i want just scroll. how could i implement a logic that avoids that so a line gets selected just when i tip on it but not when scrolling. Thanks.