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

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.

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 mouseUp

Toggle 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 mouseUp

Test scrolling

Test 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

14 Comments

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

Trevix

Just so you know: on LC 10 the example stack does not work.

Matthias Rebbe

@Trevix

I just tried the stack here with LC 10DP5 on iOS 16.4.1 (a) and i was able to scroll. No problems at all.
Only in LC 10DP5 itself the stack the display is weird.

Add your comment

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