Custom scrollbar

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: Klaus, FourthWorld, heatherlaine, kevinmiller

Post Reply
BigameOver
Posts: 13
Joined: Thu Jan 23, 2020 5:56 pm

Custom scrollbar

Post by BigameOver » Mon Jun 29, 2020 11:52 am

Hi guys,
Can you help me create a custom scrollbar? I tried following this site - http://lessons.livecode.com/m/4071/l/22 ... m-controls
but I don't understand how should I connect between the scrollbar and the field that I want the user to scroll at.

thank you :D

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 6775
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: Custom scrollbar

Post by dunbarx » Mon Jun 29, 2020 2:06 pm

Hi.

Certainly we can help. But what do you want your custom control to do that the regular one cannot? I only glanced at the lesson you posted, so I do not know what
the field that I want the user to scroll at
means.

What does a field have to do with a scrollbar, however it is constructed? I suspect there might be a simpler way to do what you intend, even though making such a gadget would still be a great learning experience in its own right.

Craig

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 4680
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Custom scrollbar

Post by richmond62 » Mon Jun 29, 2020 2:12 pm

Screenshot 2020-06-29 at 16.11.54.png
Screenshot 2020-06-29 at 16.11.54.png (47.42 KiB) Viewed 559 times
-
Here is a standard text field with an inbuilt vertical scrollbar.

BigameOver
Posts: 13
Joined: Thu Jan 23, 2020 5:56 pm

Re: Custom scrollbar

Post by BigameOver » Mon Jun 29, 2020 2:27 pm

dunbarx wrote:
Mon Jun 29, 2020 2:06 pm
Hi.

Certainly we can help. But what do you want your custom control to do that the regular one cannot? I only glanced at the lesson you posted, so I do not know what
the field that I want the user to scroll at
means.

What does a field have to do with a scrollbar, however it is constructed? I suspect there might be a simpler way to do what you intend, even though making such a gadget would still be a great learning experience in its own right.

Craig

I am developing an app currently and the inbuilt scrollbar doesn't look good enough in android, but in IOS it looks pretty good.
I want to make the scrollbar in android look good as the one that in IOS.

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 6775
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: Custom scrollbar

Post by dunbarx » Mon Jun 29, 2020 2:50 pm

Fair enough. I do not develop for mobile, so I cannot help there at all. But you will have to assemble and evaluate various controls and images first, to see how they look, before you need create a working custom control.

Let us know when you have it all the way you want it. Making the actual gadget is straightforward.

Craig

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 5462
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Custom scrollbar

Post by jacque » Mon Jun 29, 2020 4:44 pm

I want to make the scrollbar in android look good as the one that in IOS.
Mobile apps do not use scrollbars on either iOS or Android. Users expect to swipe field content, which you can do using mobileControlCreate to create a scroller overlay and mobileControlSet to assign its behavior.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

okk
Posts: 131
Joined: Wed Feb 04, 2015 11:37 am

Re: Custom scrollbar

Post by okk » Sun Jul 05, 2020 8:27 pm

Hi,
the lesson you looked at is for custom controls, it is not what you are looking for. As others have pointed out, you need to look at mobileControlCreate. Here is some sample code, you would most likely run it on the card script. When you leave the card you want to delete the scroller, otherwise it might mess up your interface on the next card. ask if you need more info. There are also some livecode lessons out there: http://lessons.livecode.com/m/4069/l/94 ... ll-a-field

Code: Select all

on opencard
 -- create native scroller
   if environment() is "mobile" then
      
      // Set the area of the scroller
      put the rect of group "steplist"  into tempscrollerrect
      
      // Create the scroller control
      mobileControlCreate "scroller", "steplist"
            
      // Set the properties of the scroller
      mobileControlSet "steplist", "rect", tempscrollerrect
      mobileControlSet "steplist", "contentRect", tempscrollerrect
      mobileControlSet "steplist", "visible", true
      mobileControlSet "steplist", "scrollingEnabled", true
      mobileControlSet "steplist", "vIndicator", true
      mobileControlSet "steplist", "hIndicator", false
      mobileControlSet "steplist", "vscroll", 0
   end if
end opencard   

on scrollerDidScroll hOffset, vOffset
   // When the user scrolls move the displayed content
   set the vScroll of  group "steplist" to vOffset
end scrollerDidScroll
When I used it the first time it felt rather cumbersome, but I somehow got used to it, still it feels like a workaround for me and a more streamlined way of doing it would be appreciated.

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 5462
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Custom scrollbar

Post by jacque » Sun Jul 05, 2020 9:27 pm

Code: Select all

 mobileControlSet "steplist", "rect", tempscrollerrect
 mobileControlSet "steplist", "contentRect", tempscrollerrect
Does this scroll? Usually the contentRect is taller than the group and uses the formattedHeight of the group.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

anmldr
Posts: 433
Joined: Tue Sep 11, 2012 11:13 pm

Re: Custom scrollbar

Post by anmldr » Thu Jul 09, 2020 8:04 pm

In your original post you mentioned a LC lesson. I have not explored it and this may have been included in the lesson. If you have not found Marty's Sliders, let me know and I will upload it here.

Linda

okk
Posts: 131
Joined: Wed Feb 04, 2015 11:37 am

Re: Custom scrollbar

Post by okk » Sun Jul 12, 2020 2:41 pm

jacque wrote:
Sun Jul 05, 2020 9:27 pm

Code: Select all

 mobileControlSet "steplist", "rect", tempscrollerrect
 mobileControlSet "steplist", "contentRect", tempscrollerrect
Does this scroll? Usually the contentRect is taller than the group and uses the formattedHeight of the group.
You are right,the sample code above doesnt yet make anything scroll. I posted this just to give the OP an indication how to set up a mobile scroller. In my case I set the contentrect later on dynamically when the user adds objects to my "steplist" group. And I use the formattedHeight of the group "steplist" to set the contentrect.

Best
Oliver

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”