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
Click to copy
  • 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 scrollerDidScroll
Click to copy

Deleting 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 closeCard
Click to copy

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


Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.