How to create a scrolling group using a native scroller and the improved graphics architecture
The 'scrolling' layerMode can be used to good effect to cache scrolling group content. If a group is completely unadorned (no border, no scrollbars), then the engine will take the bounds of the group to be that of its contained objects and clip the rendering of those objects to the rect. In particular, it will be the unclipped content that is cached - thus eliminating redraw overhead for scrolling.
Create your group content
Create a new mainstack and add the content you want your scrolling group to contain. In this example we have used 3 images and 3 text fields.
Group the controls together and call the group 'gallery'.
Resize the group
Set the size of your stack, for this example I have made a stack that is 480 x 640. Resize your group, set the lockLocation of the group to 'true'.
Set the layerMode of the group
The engine determines what to cache based on the per-object layerMode property. This is one of static, dynamic or scrolling.
Scrolling applies only to group and is used where the group contains contents that will be scrolled so is ideal in this example.
set the layerMode of group "gallery" to "scrolling" Set the stack properties
To use the new 'accelerated rendering' feature we need to set some stack properties which control the accelerated rendering. The compositor properties are not persistent so they must be set in preOpenStack or preOpenCard.
on preOpenStack
if the platform is "iphone" then
set the compositorType of this stack to "opengl"
else
set the compositorType of this stack to "software"
end if
set the compositorTileSize of this stack to 32
set the compositorCacheLimit of this stack to (16 * 1024 * 1024)
end preOpenStack
Add script to allow scrolling
The group must handle scrolling by detecting touch gestures and setting the hScroll and vScroll properties of the group.
The basic method is
on mouseDown: record the scroll value of the group and postition of the touch
on mouseMove: calculate how far the gesture has moved horizontally and vertically, set the scroll values of the group
The contents of the group should be scrolled along with the gesture.
The "gallery" group script
local sScrolling
local sInitialMouseX, sInitialMouseY
local sInitialHScroll, sInitialVScroll
on mouseDown
## Allow the group to scroll
put true into sScrolling
## Record the initial touch position
put item 1 of the mouseLoc into sInitialMouseX
put item 2 of the mouseLoc into sInitialMouseY
## Record the initial hScroll and vScroll
put the vScroll of me into sInitialVScroll
put the hScroll of me into sInitialHScroll
end mouseDown
on mouseMove mouseX, mouseY
## If the screen is being touched then
if sScrolling then
## Calculate how far the touch has moved since it started
put mouseY - sInitialMouseY into tVChange
put mouseX- sInitialMouseX into tHChange
## Reset the hScroll and vScroll to follow the touch
lock screen
set the vScroll of me to sInitialVScroll - tVChange
set the hScroll of me to sInitialHScroll - tHChange
unlock screen
end if
end mouseMove
on mouseRelease
mouseUp
end mouseRelease
on mouseUp
put false into sScrolling
end mouseUpToggle accelerated rendering on/off
To see the difference when accelerated rendering is used add a button to the stack that switches it on and off.
on mouseUp
## Switch graphics properties on and off
if the label of me is "Off" then
set the label of me to "On"
if the platform is "iphone" then
set the compositorType of this stack to "opengl"
else
set the compositorType of this stack to "software"
end if
set the compositorTileSize of this stack to 32
set the compositorCacheLimit of this stack to (16 * 1024 * 1024)
set the layerMode of group "gallery" to "scrolling"
else
set the label of me to "Off"
set the compositorType of this stack to "none"
end if
end mouseUpTest scrolling
Set up the standalone application settings to build for your desired platform and test the stack.
The Example Stack
You can download the example stack from this url https://tinyurl.com/smf4frv
Marilyn
Thank you for the script for scrolling. My field is now scrolling perfectly.
I have another question for you, that is not related to this teaching. I cannot seem to find a tutorial or teaching on how to create a splash screen. I would like to make my first card my splash screen. How can I set it to automatically advance to next page after X number of seconds?
Is there anyway I can add a new page in front of page 1, or move a new page to be the first page?
Thank you,
Marilyn
Hanson Schmidt-Cornelius
Hi Marilyn,
there are many resources out there that can help you with a variety of questions, including the ones you are asking here. Have a look at our forums: http://www.runrev.com/support/forum/ or contact support at: [email protected].
But here is a short answer to your questions:
Question 1:
You can add a splash screen for iOS applications through the standalone application settings of LiveCode. Android does not support the concept of a splash screen, but you can include one if you have a private or educational license, through the standalone application settings. This is used as a backdrop to display the license type when someone opens the application.
If you would like a splash screen on Android, and you are using a commercial version of LiveCode, then you have to create it yourself.
Question 2:
If you want to automate moving through cards, then have a look at "wait" and "visual effect" in the LiveCode dictionary.
Question 3:
You can use the Application Browser to see the cards of your stack. Right click on a card in the Application Browser and select the Property Inspector. This allows you to change the order of the cards in a stack.
Kind Regards,
Hanson
Barry G. Sumpter
For a working example project of an Android splash sceen originally written by a long time supporting contributor Jaque, and updated by me, please look here:
Android Splash Screen - working project
http://forums.runrev.com/viewtopic.php?f=53&t=11547
Frédéric Najman
Thank you very much for this article. it's work perfect for me .
i have a question: i would like to create such effect as with native scroll on android or iphone component . i mean when you "swing" with your finger on a field the content continue scrolling few pixel depending the speed of your finger slide . (sorry for my poor english)
is there any possibility to use such " mobileControlSet " for a group "gallery" as per your example ?
thanks for your answer
fred
Phil England
First of all, this is a great tutorial, thank you for posting it!
I have noticed that when I do this, though, that the group will tend to scroll out of its boundaries sometimes. I did make sure the lockLoc is true. Any insight on this?
Thanks,
Phil
Hanson Schmidt-Cornelius
Hi Frédéric,
yes it is possible to implement scrolling behavior for mobile devices.
I would start looking in the dictionary at: mobileControlCreate "scroller" to create the scroller. Maybe some code like the following:
mobileControlCreate "scroller"
put the result into sScrollerId
You could create a group and add whatever you want to scroll into that group. Then add the code that allows you to add the group to the scroller. Maybe something like this:
mobileControlSet sScrollerId, "rectangle", the rect of group "scrollgroup"
where "scrollgroup" is the group you want to scroll.
You will have to add a lot more functionality, but this may be a starting point for you.
Kind Regards,
Hanson
Hanson Schmidt-Cornelius
Hi Phil,
yes, that would happen. You could solve the problem by adding if conditions to the mouseMove handler that control what movements are permitted.
Kind Regards,
Hanson
Simon Schvartzman
Hi, the link to the example stack of this tutorial returns 404 Not Found ...
Heather Laine
You are correct, the link was broken. I have now fixed it and it is linking correctly again.
Simon Schvartzman
Thanks Heather
Alan
Can you use this method to add touch scroll to a DataGrid?
Elanor Buchanan
Hi Alan
You can but this is probably not quite the lesson you need. I suggest having a look at
http://lessons.livecode.com/m/4069/l/1262951-how-do-i-use-a-native-scroller-to-scroll-a-group
Although you might not even need that. If your DataGrid has a scrollbar this will automatically be implemented as a mobile scroller when you deploy you app to a mobile device or simulator.
If you want more control of the scroller settings you can create your own scroller as described in the lesson above with these slight modifications
- turn off the scrollbars on the Data Grid
- use the dgFormattedHeight of the Data Grid when setting the contectRect of the scroller
- set the dgVScroll of the Data Grid in the scrollerDidScroll handler
I hope that helps.
Kind regards
Elanor