widget.newScrollView

This is a continuation of the discussion from the API page.
http://developer.anscamobile.com/reference/index/widgetnewscrollview#comment-98101 [import]uid: 7559 topic_id: 24278 reply_id: 324278[/import]

Hi

I have a scrollview content that intercepts with my bottom navigation.
Then the event touch is passed to the scrollview and my navigation that overlaps with the scrollview content do not work except if the scrollview is at the botton of the scroll content ( = no content under the navigation bar).

Is there a way to modify this ?
[import]uid: 5578 topic_id: 24278 reply_id: 98721[/import]

I have made some tests :

If the height of the content of the scrollview is > scrollview’s height, which is usually the case, the endedscroll event is catched even outside the boundaries of the scrollview.

It means that if you have buttons outside the scrollview, juste below it, you can not get event from the buttons because the scrollview listener will overlap. [import]uid: 5578 topic_id: 24278 reply_id: 98735[/import]

Another strange behaviour :

If your put a scrollview into a storyboard scene :

Say you have put the scrollview in scene 2.

From scene 1 to scene 2 : great.
From scene 2 to scene 1 to scene 2 : great

From scene 2 to scene 2 : the scrollview disappears. [import]uid: 5578 topic_id: 24278 reply_id: 98773[/import]

fpierron: Have you tried using [lua]return true[/lua] on the UI above the scrollView?

It does sound like a familiar bug though. [import]uid: 41884 topic_id: 24278 reply_id: 100648[/import]

The strange behaviour disappear with the last built. [import]uid: 5578 topic_id: 24278 reply_id: 100740[/import]

I have an image with an image mask, it works normally. But when I add this image to scrollView (scrollView with mask) then the mask of the image does not work. Anyone try this? Is this a bug? I am using corona 2012.785 [import]uid: 22747 topic_id: 24278 reply_id: 103698[/import]

Is it possible to make the scrollView snap into place for each item that it contains? [import]uid: 140429 topic_id: 24278 reply_id: 103989[/import]

FortyFourDigital: A pure snap seems feasible, you could use:

scrollView:scrollToPosition( x, y, timeInMs, onComplete )

And then just feed in the coordinates of the object. There’s probably some adjustment you’d need though, to match coordinates in-view, apply a modifier to adjust where it appears on-screen, etc…

kc0001: Is that still happening on latest build? [import]uid: 41884 topic_id: 24278 reply_id: 104007[/import]

Richard, thanks for replying. I guess I’d need a touch handler on the scrollView and track the delta x,y and adjust the position like that. I’d then work out the position of the closest item in the list and adjust the scrollToPostition to centre that correctly.

Do you know of any example code to get me started, or if there is a better alternative to this?

Thanks [import]uid: 140429 topic_id: 24278 reply_id: 104010[/import]

It depends on how you want to implement, really. Something automatic probably needs Runtime while something manual needs touch.

Thankfully the new version does let you apply a listener in the options you specify up-front.

I can help if you have a more specific idea, but there is really hardly any code because these widgets are really so darn new (the implementation isn’t quite so new, but they’ve really only become stable and reliable lately, in large part due to this much needed bug-fixing code sprint @Ansca) My expertise is basically formed due to the fact that I used (and severely broke) the old implementation for months last year and have started using bits of the new implementation for a project of my own just recently. [import]uid: 41884 topic_id: 24278 reply_id: 104014[/import]

Richard - I’d really appreciate that. I have 3 horizontal scroll views that fill the screen (1/3 each). Each contains a series of images (all the same dimensions: screen width, 1/3 screen height). I want to move or flick each scroll view and have it move and then centre on the closest image.

I was using this sort of code previously: https://bitbucket.org/gilbert/scroll-view/src/0e509c5aff5f/scrollView.lua but would prefer to use the new widgets if possible.

Thanks again [import]uid: 140429 topic_id: 24278 reply_id: 104016[/import]

Just trying to visualize this in my head…so a portrait view, split into three, each with their own left/right flick. Hmm.

Snapping isn’t that bad. You could literally just record a table of image positions and then use scrollToPosition() to get there. (You can even generate the table on runtime based on the images you have)

Like, it sounds like you want something like this

[code]
local imageTable = {} – a table containing the preferred scrollview locations for each image.
imageTable[1] = { x=300 y=image.y }

if event.phase==“ended” then – if touch has ended
for i = 1, #images do – check through each image…
if (image[i].contentBounds.xMin + (image[i].width/2) +1) > 0 then – if the midway point of the image is onscreen,
scrollView:scrollToPosition( imageTable[i].x, imageTable[i].y, 300)
break – stop looking at images
end
end[/code]

Not entirely sure if that will work (in particular you need to be careful as x/y position in the scrollview is different than screen coordinates) but it’s a theory. (Basically, if your images are screenlength, then you can assume any image that has centerpoint+1 on-screen is the dominant image and hence that’s what you want to center.)

The bigger problem, and one I can’t quite help with yet, is the “bouncy snap” that you see in many iOS applications. There is some kind of manual friction going on that causes the movement to speed up and then slow down as it approaches its target. Maybe scrollToPosition() already does that? (If not, I’m not sure how to achieve working friction short of studying the existing listview.lua sample code.) [import]uid: 41884 topic_id: 24278 reply_id: 104045[/import]

OK, so I only just got around to having a go at this. My code almost works, but it feels clunky as it sometimes misses and doesn’t snap:

if(event.phase == "release" or event.type=="endedScroll") then  
 local xPos, yPos = scrollView:getContentPosition()  
 local nudge = math.round(xPos/320)\*320  
 scrollView:scrollToPosition(nudge,0,300)  
end  

I’m open to suggestions.

Secondly, I have 24 images in each of the 3 scrollViews - this is going to be a bit memory intensive to load, so I was wondering how to use a lazy load style scroll view that displays just the previous, current and next image only?

Thanks [import]uid: 140429 topic_id: 24278 reply_id: 105506[/import]

To answer the first part of my question - I just set the friction to 0 and that stopped it from getting stuck. I think my ‘release’ event phase needs to stop the friction somehow as I found it would snap into position, but then carry on scrolling.

Still need some help on a lazy-load though. [import]uid: 140429 topic_id: 24278 reply_id: 105680[/import]

I’d have to spend time implementing something similar to really be of any help, but to your second question, I’m not sure there’s a really simple answer, but I do have at least an idea about it…

  1. Start off only loading 3 images per view (the visible one, plus images to the left or right as possible)

  2. Create a Runtime listener that looks at the position of those images (only 9 so that’s not too bad)

  3. Create a function that updates the imageset when it passes a given condition. (ie: If the center image is too far to the left, remove the leftmost image, add a rightmost image, and then update the image id’s so you know which is left, center, right again)

Ansca does something similar for widget.newTableView called threshing, where they have a set variable that basically determines how much “stuff” is loaded above and below the active set. So while I’m suggesting 3, you could look deeper; it would just take more work.

(Also, this might be a prime candidate for using the proxy module…) [import]uid: 41884 topic_id: 24278 reply_id: 105713[/import]

Hi all, I started about a week ago. Tried to apply this widget so i can scroll a tile based background horizontally, but instead it only able to scroll vertically. I’ve tried to disable the vertical scroll but no luck. I’ve also tried searching through the forum, but couldn’t see anyone having this problem (perhaps it’s too simple and silly?), could someone please lend me a hand?

I’m currently using Windows 2011.704
for i = 0, 8, 1 do
for j = 0, 12, 1 do

local tilesprite = sprite.newSprite ( tileset1 )
tilesprite.y = tileh * i + 20
tilesprite.x = tilew * j + 20
tilesprite.currentFrame = map[(i+1)][(j+1)]+1
stage:insert( tilesprite )

end
end

local widget = require “widget”
local scrollview = widget.newScrollView{

}
scrollview:insert( stage ) [import]uid: 146471 topic_id: 24278 reply_id: 105971[/import]

reinstalled my Corona once more with the latest build, seems to work now. [import]uid: 146471 topic_id: 24278 reply_id: 105998[/import]

@richard9 thanks, I did something along those lines and it works really nicely.

My problem now is how to remove the other images (either side of prev/current/next images). I’ve tried scrollView:remove(x) and that crashes on me. I assume that currently, each time I swipe and load new images, the memory usage increases? [import]uid: 140429 topic_id: 24278 reply_id: 106045[/import]

Your memory usage should only increase if you’re adding new images and not removing old ones. Generally speaking you can :remove() the image and then = nil the image to clean it out, although if you really want to keep memory in line at some point you may want to run garbage collection.

I assume you can use either scrollView:remove() or display.remove() but haven’t tried either yet… [import]uid: 41884 topic_id: 24278 reply_id: 106071[/import]