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.
Create your content
Create a group
Create the scroller
We will set up the scroller in the preOpenCard handler of the card script. Any messages sent my 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 preOpenCard
We 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 formattedHeight of field "lorem" into tContentRect
-nb, if 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 tContentRect -
Now create the scroller and store the ID of the created control in a script local variable
mobileControlCreate "scroller", "loremScroll"
put the result into sScrollerID
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", 0
Handle 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