Page 1 of 1

Custom scrollbar

Posted: Mon Jun 29, 2020 11:52 am
by BigameOver
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

Re: Custom scrollbar

Posted: Mon Jun 29, 2020 2:06 pm
by dunbarx
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

Re: Custom scrollbar

Posted: Mon Jun 29, 2020 2:12 pm
by richmond62
Screenshot 2020-06-29 at 16.11.54.png
Screenshot 2020-06-29 at 16.11.54.png (47.42 KiB) Viewed 1417 times
-
Here is a standard text field with an inbuilt vertical scrollbar.

Re: Custom scrollbar

Posted: Mon Jun 29, 2020 2:27 pm
by BigameOver
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.

Re: Custom scrollbar

Posted: Mon Jun 29, 2020 2:50 pm
by dunbarx
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

Re: Custom scrollbar

Posted: Mon Jun 29, 2020 4:44 pm
by jacque
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.

Re: Custom scrollbar

Posted: Sun Jul 05, 2020 8:27 pm
by okk
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.

Re: Custom scrollbar

Posted: Sun Jul 05, 2020 9:27 pm
by jacque

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.

Re: Custom scrollbar

Posted: Thu Jul 09, 2020 8:04 pm
by anmldr
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

Re: Custom scrollbar

Posted: Sun Jul 12, 2020 2:41 pm
by okk
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