How do I use a native scroller to scroll a group?
In this lesson we will set up a native mobile scroller to allow you to scroll the contents of a group.
Create your stack
The first step is to create your stack and group.
To ensure the scroller is usable the contents of the group should be big enough that they cannot be displayed in the stack without scrolling.
Ensure that the group is resized to fit on the stack and the lockLocation property is set.
Creating the mobile scroller
Mobile scrollers are created in code. We want the scroller to be created when the card is opened so open the Card Script and add a preOpenCard handler.
on preOpenCard
// Create the scroller for the field
if the environment is "mobile" then
mobileControlCreate "scroller", "sessionListScroller"
mobileControlSet "sessionListScroller","visible",true
mobileControlSet "sessionListScroller","rect",the rect of group "sessionList"
put 0,0,the width of group "sessionList",the formattedHeight of group "sessionList" into tContentRect
mobileControlSet "sessionListScroller","contentRect",tContentRect
mobileControlSet "sessionListScroller","vIndicator",true
end if
end preOpenCard- Check the environment is mobile
- Create a mobile scroller named "sessionListScroller"
- Set the rect of the scroller to the rect of the group
- Calculate the content rect of the group, this is the rect of all the content
- Set the contentRect of the scroller
- Set the scroller to show a vertical indicator
Responding to scroll messages
The scroller sends messages as it scrolls, we need to respond to these messages to update the vScroll of the group to provide the scrolling behavior.
The scrollerDidScroll message is sent to the object containing the script that created the scroller control so we will add the handler to the Card Script.
on scrollerDidScroll pHScroll, pVScroll
set the vScroll of group "sessionList" to pVScroll
end scrollerDidScrollDeleting the mobile scroller
Because native controls are not contained on a card in the same way as LiveCode controls we will delete the scroller when the card is closed. In this example we only have 1 card so it is not so important but it is good to get into the habit of deleting native controls when you are done with them.
Add the closeCard hander to the Card Script.
on closeCard
if the environment is "mobile" then
mobileControlDelete "sessionListScroller"
end if
end closeCardTesting on a mobile device
Deploy your app to a mobile device or simulator to test the scroller.
Using Accelerated Rendering
If you need to improve the performance of your scroller you can use the layerMode and other accelerated rendering properties. You can learn more in the lesson How to create a scrolling group using a native scroller and the improved graphics architecture.
0 Comments
Add your comment