iOS Native Scroll field
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
-
- Posts: 90
- Joined: Thu Dec 08, 2011 12:21 pm
iOS Native Scroll field
I am having hard time turning a standard text field into a simple scrolling field that has the native scroller on an iOS device. How do you do this?
Re: iOS Native Scroll field
Hi,
I do this on all my Information screens of my apps. This works if you don't intend to edit the text within IOS and don't mind a white background. It's pretty easy. I use the iphoneControlCreate "multiline" command.
I don't even need to put the name of the control in a local variable and it works like a charm. Just grab an image from the tools palate and set it to the location rect you would like your scrolling text to show up at, open its property inspector and name it "InfoRect" and then make it invisible. Have your field named "info" contain the text content to scroll and make it invisible too. Then the script is short and sweet.
on opencard
if the environment is "mobile" then
if "testinput" is among the lines of iphoneControls() then
iphoneControlDelete "testinput"
end if
iphoneControlCreate "multiline", "testinput"
iphoneControlSet "testinput", "rect", the rect of image "InfoRect"
iphoneControlSet "testinput", "visible", true
iphoneControlSet "testinput", "fontsize", "15"
iphoneControlSet "testinput", "text", field "info"
iphoneControlSet "testinput","editable","false"
end if
end opencard
on closeCard
if the environment is "mobile" then iphoneControlDelete "testinput"
end closeCard
Dave
I do this on all my Information screens of my apps. This works if you don't intend to edit the text within IOS and don't mind a white background. It's pretty easy. I use the iphoneControlCreate "multiline" command.
I don't even need to put the name of the control in a local variable and it works like a charm. Just grab an image from the tools palate and set it to the location rect you would like your scrolling text to show up at, open its property inspector and name it "InfoRect" and then make it invisible. Have your field named "info" contain the text content to scroll and make it invisible too. Then the script is short and sweet.
on opencard
if the environment is "mobile" then
if "testinput" is among the lines of iphoneControls() then
iphoneControlDelete "testinput"
end if
iphoneControlCreate "multiline", "testinput"
iphoneControlSet "testinput", "rect", the rect of image "InfoRect"
iphoneControlSet "testinput", "visible", true
iphoneControlSet "testinput", "fontsize", "15"
iphoneControlSet "testinput", "text", field "info"
iphoneControlSet "testinput","editable","false"
end if
end opencard
on closeCard
if the environment is "mobile" then iphoneControlDelete "testinput"
end closeCard
Dave
-
- Livecode Opensource Backer
- Posts: 1336
- Joined: Sun Jul 12, 2009 10:53 am
- Location: Bordeaux, France
Re: iOS Native Scroll field
Nice one...
Dixie
Dixie
-
- Posts: 90
- Joined: Thu Dec 08, 2011 12:21 pm
Re: iOS Native Scroll field
Dave - thanks it worked like a charm! I can deal with the background being white. However, just for learning purposes, if i wanted to change the color of it to a particular color, or say make it have a transparent fill, how would I do that?FireWorx wrote:Hi,
on opencard
if the environment is "mobile" then
if "testinput" is among the lines of iphoneControls() then
iphoneControlDelete "testinput"
end if
iphoneControlCreate "multiline", "testinput"
iphoneControlSet "testinput", "rect", the rect of image "InfoRect"
iphoneControlSet "testinput", "visible", true
iphoneControlSet "testinput", "fontsize", "15"
iphoneControlSet "testinput", "text", field "info"
iphoneControlSet "testinput","editable","false"
end if
end opencard
on closeCard
if the environment is "mobile" then iphoneControlDelete "testinput"
end closeCard
Dave
Thanks again
rob
Re: iOS Native Scroll field
Here ya go.
The basics. Create a field and uncheck the focus boxes in the property inspector so the keyboard doesn't pop up in IOS. Paste a bunch of text in the field so it runs off the page. Group the text. You may need to add an object that you can delete later to have two objects to group. (not sure). drag drag drag the group upwards until ou get to the bottom. Now shrink from the bottom up until the group fits on the card. Now set the size and position to fixed in the groups property inspector. See how you have a lot of text hidden now within the group? Yea.. so now the card script sets the content of the scroller to the long list of text but the rect of the scroller to the fixed group size on the card. Walla ! scrolling text. Just remember that if you resize the group move it around on the card etc you will red to lock its size again when your done.
Have fun. Dave
Here is the card script. Seems the file did not want to upload.
local myScroller
on OpenCard
if the environment is not "mobile" then
exit OpenCard
end if
--make sure the object to scroll is the right size to fit the content
set the height of fld "menu" to the formattedheight of fld "menu"
set the unboundedHScroll of group "scrollGroup" to true
set the unboundedVScroll of group "scrollGroup" to true
iphoneControlCreate "scroller"
put the result into myScroller
iphoneControlSet myScroller, "rect", the rect of group "scrollGroup"
--contentRect should match the actual content size of the object
iphoneControlSet myScroller, "contentRect", (0, 0, the width of fld 1, the formattedHeight of fld 1)
iphoneControlSet myScroller, "visible", "true"
iphoneControlSet myScroller, "canBounce", "true"
iphoneControlSet myScroller, "pagingEnabled", "false"
iphoneControlSet myScroller, "canScrollToTop", "true"
resizeStack
end OpenCard
on closeCard
if the environment is not "mobile" then
exit closeCard
end if
iphoneControlDelete myScroller
end closeCard
on resizeStack
if the environment is not "mobile" then
exit resizeStack
end if
set the hScroll of group "scrollGroup" to 0
set the vScroll of group "scrollGroup" to 0
iphoneControlSet myScroller, "rect", the rect of group "scrollGroup"
iphoneControlSet myScroller, "hscroll", 0
iphoneControlSet myScroller, "vscroll", 0
end resizeStack
on scrollerDidScroll pOffsetX, pOffsetY
lock screen
set the hScroll of group "scrollGroup" to pOffsetX
set the vScroll of group "scrollGroup" to pOffsetY
unlock screen
end scrollerDidScroll
The basics. Create a field and uncheck the focus boxes in the property inspector so the keyboard doesn't pop up in IOS. Paste a bunch of text in the field so it runs off the page. Group the text. You may need to add an object that you can delete later to have two objects to group. (not sure). drag drag drag the group upwards until ou get to the bottom. Now shrink from the bottom up until the group fits on the card. Now set the size and position to fixed in the groups property inspector. See how you have a lot of text hidden now within the group? Yea.. so now the card script sets the content of the scroller to the long list of text but the rect of the scroller to the fixed group size on the card. Walla ! scrolling text. Just remember that if you resize the group move it around on the card etc you will red to lock its size again when your done.
Have fun. Dave
Here is the card script. Seems the file did not want to upload.
local myScroller
on OpenCard
if the environment is not "mobile" then
exit OpenCard
end if
--make sure the object to scroll is the right size to fit the content
set the height of fld "menu" to the formattedheight of fld "menu"
set the unboundedHScroll of group "scrollGroup" to true
set the unboundedVScroll of group "scrollGroup" to true
iphoneControlCreate "scroller"
put the result into myScroller
iphoneControlSet myScroller, "rect", the rect of group "scrollGroup"
--contentRect should match the actual content size of the object
iphoneControlSet myScroller, "contentRect", (0, 0, the width of fld 1, the formattedHeight of fld 1)
iphoneControlSet myScroller, "visible", "true"
iphoneControlSet myScroller, "canBounce", "true"
iphoneControlSet myScroller, "pagingEnabled", "false"
iphoneControlSet myScroller, "canScrollToTop", "true"
resizeStack
end OpenCard
on closeCard
if the environment is not "mobile" then
exit closeCard
end if
iphoneControlDelete myScroller
end closeCard
on resizeStack
if the environment is not "mobile" then
exit resizeStack
end if
set the hScroll of group "scrollGroup" to 0
set the vScroll of group "scrollGroup" to 0
iphoneControlSet myScroller, "rect", the rect of group "scrollGroup"
iphoneControlSet myScroller, "hscroll", 0
iphoneControlSet myScroller, "vscroll", 0
end resizeStack
on scrollerDidScroll pOffsetX, pOffsetY
lock screen
set the hScroll of group "scrollGroup" to pOffsetX
set the vScroll of group "scrollGroup" to pOffsetY
unlock screen
end scrollerDidScroll
-
- Posts: 90
- Joined: Thu Dec 08, 2011 12:21 pm
Re: iOS Native Scroll field
Dave, this also worked wonders. I followed the code exactly and now am running into only two small issues. 1. When in simulator, and i scroll all the way to the bottom of the text, there is a handful of blank space. But in the contents of the field (looking through the property inspector) there is no blank space. 2. The text scrolls fine, the problem is that the "Top" of the actual text field isn't the "top" of the group. In essence there is some text hidden up under the top of the group. No clue why either of these two things are happening. Any thoughts? Ill upload the stack. Just a basic test stack.FireWorx wrote:Here ya go.
The basics. Create a field and uncheck the focus boxes in the property inspector so the keyboard doesn't pop up in IOS. Paste a bunch of text in the field so it runs off the page. Group the text. You may need to add an object that you can delete later to have two objects to group. (not sure). drag drag drag the group upwards until ou get to the bottom. Now shrink from the bottom up until the group fits on the card. Now set the size and position to fixed in the groups property inspector. See how you have a lot of text hidden now within the group? Yea.. so now the card script sets the content of the scroller to the long list of text but the rect of the scroller to the fixed group size on the card. Walla ! scrolling text. Just remember that if you resize the group move it around on the card etc you will red to lock its size again when your done.
Have fun. Dave
Here is the card script. Seems the file did not want to upload.
local myScroller
on OpenCard
if the environment is not "mobile" then
exit OpenCard
end if
--make sure the object to scroll is the right size to fit the content
set the height of fld "menu" to the formattedheight of fld "menu"
set the unboundedHScroll of group "scrollGroup" to true
set the unboundedVScroll of group "scrollGroup" to true
iphoneControlCreate "scroller"
put the result into myScroller
iphoneControlSet myScroller, "rect", the rect of group "scrollGroup"
--contentRect should match the actual content size of the object
iphoneControlSet myScroller, "contentRect", (0, 0, the width of fld 1, the formattedHeight of fld 1)
iphoneControlSet myScroller, "visible", "true"
iphoneControlSet myScroller, "canBounce", "true"
iphoneControlSet myScroller, "pagingEnabled", "false"
iphoneControlSet myScroller, "canScrollToTop", "true"
resizeStack
end OpenCard
on closeCard
if the environment is not "mobile" then
exit closeCard
end if
iphoneControlDelete myScroller
end closeCard
on resizeStack
if the environment is not "mobile" then
exit resizeStack
end if
set the hScroll of group "scrollGroup" to 0
set the vScroll of group "scrollGroup" to 0
iphoneControlSet myScroller, "rect", the rect of group "scrollGroup"
iphoneControlSet myScroller, "hscroll", 0
iphoneControlSet myScroller, "vscroll", 0
end resizeStack
on scrollerDidScroll pOffsetX, pOffsetY
lock screen
set the hScroll of group "scrollGroup" to pOffsetX
set the vScroll of group "scrollGroup" to pOffsetY
unlock screen
end scrollerDidScroll
- Attachments
-
- Untitled 1.livecode.zip
- (2.47 KiB) Downloaded 312 times
Re: iOS Native Scroll field
Select the group and enter edit mode. Move the text field down towards the bottom of the group and then test it in the tester again. The top of the field should start to come into view. You may have to play with it to get it perfect. I don't use this much so others may be able to assist if this doesn't work. There is also code to set the scroll to top for every time you return to the card etc. Check this forum there are tons of threads on this stuff.
Seems like the majority of issues people are having is leaving the card and coming back to it and not being able to scroll at that point. The word on the street is it's just text fields that have that problem not graphics or scrolling groups So a possible fix is grouping the text field and let it reside within the scroll group and then set the content height to the text group rather than the text field. (GUESSING)
I personally use a table object from www.tactileMedia.com that is a group and I place it into another My-scroll group and set the scroll content height to the number of lines in the table object group x the line height. Because the text varies the scroll is always right on. I also check the number of lines and if it is less that the height of the scroll group I don't set the scroller at all because its just not necessary. If you have an iPad search the iTunes store for "Map Grid Pro" free download and check it out. If you want to see how I scroll html edited on the fly you can download my calendar app "Cool Cal" in the app store but that will cost ya a cool 99 cents. =]
Dave
Seems like the majority of issues people are having is leaving the card and coming back to it and not being able to scroll at that point. The word on the street is it's just text fields that have that problem not graphics or scrolling groups So a possible fix is grouping the text field and let it reside within the scroll group and then set the content height to the text group rather than the text field. (GUESSING)
I personally use a table object from www.tactileMedia.com that is a group and I place it into another My-scroll group and set the scroll content height to the number of lines in the table object group x the line height. Because the text varies the scroll is always right on. I also check the number of lines and if it is less that the height of the scroll group I don't set the scroller at all because its just not necessary. If you have an iPad search the iTunes store for "Map Grid Pro" free download and check it out. If you want to see how I scroll html edited on the fly you can download my calendar app "Cool Cal" in the app store but that will cost ya a cool 99 cents. =]
Dave
-
- VIP Livecode Opensource Backer
- Posts: 931
- Joined: Thu Nov 13, 2008 6:48 am
- Location: London, UK
Re: iOS Native Scroll field
Dave, this worked really well. Thanks for posting. Do you know if it's possible to get the border of "InfoRect" to also appear in iOS? I've tried but it just flashes and disappears. Thanks
Mark
macOS 12.6.5 (Monterey), Xcode 14.2, LC 10.0.0, iOS 15.6.1
Targets: Mac, iOS
Targets: Mac, iOS
-
- VIP Livecode Opensource Backer
- Posts: 931
- Joined: Thu Nov 13, 2008 6:48 am
- Location: London, UK
Re: iOS Native Scroll field
Answering my own question, I just put another rectangle image on the card but 2 pixels wider and taller, layered it on top of InfoRect (set Opaque off so InfoRect shows through), and set the show border to be true. Works like a charm. Still find it odd that you can't have show border on the original rect. Obviously something there I don't understand, but as with many things in LC, it's sometimes possible to engineer a workaround... and move onmarksmithhfx wrote: ↑Mon Mar 01, 2021 9:42 pmDave, this worked really well. Thanks for posting. Do you know if it's possible to get the border of "InfoRect" to also appear in iOS? I've tried but it just flashes and disappears. Thanks
Mark
Cheers,
Mark
macOS 12.6.5 (Monterey), Xcode 14.2, LC 10.0.0, iOS 15.6.1
Targets: Mac, iOS
Targets: Mac, iOS