LiveCode LessonsHow To - LiveCode Mobile Tasks LiveCode Mobile TasksCreating a native scroller to scroll a field

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

The first step is to add the content you wish to display to the stack. In this case we are using a field to display text. Make the field large enough to show all the text. Lock the size and position of the field

Create a group

Create a group

Now group your field and set the size of the group to the area you want to be shown in your app. Lock the size and position of the group.

The group will be used to set the size of the scrollable area.

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

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

8 Comments

TG

Thank you for that nice example.
Is there a way to use it with a list with selectable items?
I am working with such a list and it happens of course a selection on mouseUp when i want just scroll. how could i implement a logic that avoids that so a line gets selected just when i tip on it but not when scrolling. Thanks.

Hanson Schmidt-Cornelius

Hi TG,

from your comment I take it that you have already implemented the functionality but are now just wondering how to handle the mouseUp message.

You could use the mouseLoc to get the X,Y location of the mouse in the mouseDown and then mouseUp handlers and then test if there is a significant distance between these locations. If there is, then you have a scroll.

Measuring the X or Y shift may be sufficient, if not, use Pythagoras to get the distance in any direction.

Kind Regards,

Hanson

Kevin

Thanks so far :-)
I've been trying for a while now to use that principle on a datagrid with form-style (rather than on a simple field as in the example above). However, I couldn't make it work...
Could you please show us / give an example how to use the mobile scroller in a datagrid? I've searched the forum all morning but couldn't find a working example...

Many thanks in advance

Kevin

Hanson Schmidt-Cornelius

Hi Kevin,

that is an interesting concept.
Not quite sure how well this would work as the datagrid manages its own scrolling. In effect you could have two sets of scrollers to contend with.

I am assuming that you are trying to utilize the dynamic layout configuration of the datagrid but at the same time want to provide a more native scrolling experience.

My suggestion would be to make the datagrid as big as you need it to be so you can fit all of the data on one page, that way removing its own scrollers. The result could then be added to a group that is controlled by the native mobile scrollers.

I have not tested this, but it would be the approach I would initially consider.

Kind Regards,

Hanson

Daniel DuPont

One of my problems is the text is not fixed. I want to display a push notice in the field. Not a problem, really. But since adding the scroller above, the problem comes with different screen sizes and orientations. My layouts got weird after adding the scroller. I got the layout fixed, but only for portrait. After that the touch scroller fails now.

I am a beginner developing for Android (iPhone later if I ever get this app to work). Any help is appreciated. Thank you & Cheers!

P.S. Haven't been to Scotland since 2001, I miss it there.

Hanson Schmidt-Cornelius

Hi Daniel,

I am not sure what you mean when you say that your layouts got weird.
Can you please provide some more details one what exactly is not working for you.

Kind Regards,

Hanson

Malte

Is there any reason the field needs to be in a group?

local sScrollerID
on preOpenCard
local tScrollerRect,tContentRect
if environment() is not "mobile" then exit preOpenCard
mobileControlCreate "scroller", "loremScroll"
put the result into sScrollerID
put the rect of fld "scrollme" into tScrollerRect
put the topleft of fld "scrollMe" & "," & the right of fld "scrollme"&","&( the top of fld "scrollme" + the formattedHeight of fld "scrollme") into tContentRect
mobileControlSet "loremScroll", "rect", tScrollerRect
mobileControlSet "loremScroll", "contentRect", tContentRect
mobileControlSet "loremScroll", "visible", true
mobileControlSet "loremScroll", "scrollingEnabled", true
mobileControlSet "loremScroll", "vIndicator", true
mobileControlSet "loremScroll", "vscroll", 0
end preOpenCard

on scrollerDidScroll hOffset, vOffset
// When the user scrolls move the displayed content
set the vScroll of fld "scrollMe" to vOffset
end scrollerDidScroll

Seems to work ok?

Elanor Buchanan

Hi Malte

No, the field doesn't need to be in a group. Your method will work equally well.

Kind regards

Elanor

Add your comment

E-Mail me when someone replies to this comment