more than one scrollView

susa38 · November 17, 2015, 11:54am

Is not possible to use more than one scrollView on the same page?

when I use for example layer.mylayer =&nbsp;widget.newScrollView()&nbsp;{ top = 5, left = -4, ..... }

after I want to use other scrollVIew

layer.mylayer2 =&nbsp;widget.newScrollView()&nbsp;{ top = 5, left = -4, ..... }

It only works with the second scrollView

nmichaud · November 17, 2015, 12:44pm

Yes it work. We have an app that use multiple scrollview and/or tableview on the same scene without any problems. If you need some help, you should post the full code snipet (properly formated) so we can help you.

susa38 · November 17, 2015, 1:06pm

For me it does not work. It always work with the second widget.newScrollView() that I create

nmichaud · November 17, 2015, 1:29pm

Something is most probably wrong with your code. Please post your code (properly formated) in this thread if you need help to fix this issue. Nobody can help you, if you do not share your code.

susa38 · November 17, 2015, 3:04pm

Sorry. I was working it for give you the code more simple

I have hidden

image1, background for image1 and 1 buttonclose1 to hide these 3 items

image2, background for image2 and 1 buttonclose2 to hide these 3 items

also…

I have 1 button to show image1, back1 and buttonclose1

and 1 button to show image2, back2 and buttonclose2

and I have one scroll for the image1 and other for the image2

My problem is than only work the second scrollview that I create. In my case for the image 1

local composer = require( "composer" ) local scene = composer.newScene() -- Initial settings and checkings local widget = require("widget") local W = display.contentWidth; -- full width of the page local H = display.contentHeight; -- full height of the page local curPage = 1 -- number of the current page -- Button names local but\_open1 local but\_open2 local but\_close1 local but\_close2 math.randomseed(os.time()) -- All layers on a table local layer = {} -- Called when the scene's view does not exist: function scene:create( event ) -- view is not yet visible local sceneGroup = self.view -- background positioning layer.background = display.newRect( 1024, 768, 2048, 1536 ) layer.background.oriX = layer.background.x; layer.background.oriY = layer.background.y layer.background.oriXs = layer.background.xScale; layer.background.oriYs = layer.background.yScale layer.background:setFillColor (1, 1, 1) layer.background.alpha = 1; layer.background.oldAlpha = 1 sceneGroup:insert( 1, layer.background); sceneGroup.background = layer.background -- button2 positioning layer.button2 = display.newImageRect( composer.imgDir.. "p1\_button2.png", 364, 42 ); layer.button2.x = 1600; layer.button2.y = 1476; layer.button2.alpha = 1; layer.button2.oldAlpha = 1 layer.button2.oriX = layer.button2.x; layer.button2.oriY = layer.button2.y layer.button2.oriXs = layer.button2.xScale; layer.button2.oriYs = layer.button2.yScale layer.button2.name = "button2" sceneGroup:insert(layer.button2); sceneGroup.button2 = layer.button2 -- button1 positioning layer.button1 = display.newImageRect( composer.imgDir.. "p1\_button1.png", 515, 42 ); layer.button1.x = 638; layer.button1.y = 1476; layer.button1.alpha = 1; layer.button1.oldAlpha = 1 layer.button1.oriX = layer.button1.x; layer.button1.oriY = layer.button1.y layer.button1.oriXs = layer.button1.xScale; layer.button1.oriYs = layer.button1.yScale layer.button1.name = "button1" sceneGroup:insert(layer.button1); sceneGroup.button1 = layer.button1 -- backimage2 positioning layer.backimage2 = display.newRect( 1024, 768, 2048, 1536 ) layer.backimage2.oriX = layer.backimage2.x; layer.backimage2.oriY = layer.backimage2.y layer.backimage2.oriXs = layer.backimage2.xScale; layer.backimage2.oriYs = layer.backimage2.yScale layer.backimage2:setFillColor (1, 1, 1) layer.backimage2.alpha = 1; layer.backimage2.oldAlpha = 1 sceneGroup:insert( layer.backimage2); sceneGroup.backimage2 = layer.backimage2 -- image2 positioning layer.image2 = display.newImageRect( composer.imgDir.. "p1\_image2.png", 1970, 3220 ); layer.image2.x = 981; layer.image2.y = 1610; layer.image2.alpha = 1; layer.image2.oldAlpha = 1 layer.image2.oriX = layer.image2.x; layer.image2.oriY = layer.image2.y layer.image2.oriXs = layer.image2.xScale; layer.image2.oriYs = layer.image2.yScale layer.image2.name = "image2" sceneGroup:insert( layer.image2); sceneGroup.image2 = layer.image2 -- Scroll object layer.scroll\_image2 = widget.newScrollView { top = 5, left = -4, width = 2000, height = 1536, scrollWidth = 2000, scrollHeight = 2600, hideBackground = true, horizontalScrollDisabled = true; } sceneGroup:insert( layer.scroll\_image2) layer.scroll\_image2:insert(layer.image2) -- closeimage2 positioning layer.closeimage2 = display.newImageRect( composer.imgDir.. "p1\_closeimage2.png", 68, 68 ); layer.closeimage2.x = 2007; layer.closeimage2.y = 47; layer.closeimage2.alpha = 1; layer.closeimage2.oldAlpha = 1 layer.closeimage2.oriX = layer.closeimage2.x; layer.closeimage2.oriY = layer.closeimage2.y layer.closeimage2.oriXs = layer.closeimage2.xScale; layer.closeimage2.oriYs = layer.closeimage2.yScale layer.closeimage2.name = "closeimage2" sceneGroup:insert(layer.closeimage2); sceneGroup.closeimage2 = layer.closeimage2 -- backimage1 positioning layer.backimage1 = display.newRect( 1024, 768, 2048, 1536 ) layer.backimage1.oriX = layer.backimage1.x; layer.backimage1.oriY = layer.backimage1.y layer.backimage1.oriXs = layer.backimage1.xScale; layer.backimage1.oriYs = layer.backimage1.yScale layer.backimage1:setFillColor (1, 1, 1) layer.backimage1.alpha = 1; layer.backimage1.oldAlpha = 1 sceneGroup:insert( layer.backimage1); sceneGroup.backimage1 = layer.backimage1 -- image1 positioning layer.image1 = display.newImageRect( composer.imgDir.. "p1\_image1.png", 1970, 12000 ); layer.image1.x = 985; layer.image1.y = 6000; layer.image1.alpha = 1; layer.image1.oldAlpha = 1 layer.image1.oriX = layer.image1.x; layer.image1.oriY = layer.image1.y layer.image1.oriXs = layer.image1.xScale; layer.image1.oriYs = layer.image1.yScale layer.image1.name = "image1" sceneGroup:insert( layer.image1); sceneGroup.image1 = layer.image1 -- Scroll object layer.scroll\_image1 = widget.newScrollView { top = 5, left = 0, width = 2000, height = 1536, scrollWidth = 2000, scrollHeight = 12000, hideBackground = true, horizontalScrollDisabled = true; } sceneGroup:insert( layer.scroll\_image1) layer.scroll\_image1:insert(layer.image1) -- closeimage1 positioning layer.closeimage1 = display.newImageRect( composer.imgDir.. "p1\_closeimage1.png", 68, 68 ); layer.closeimage1.x = 2007; layer.closeimage1.y = 47; layer.closeimage1.alpha = 1; layer.closeimage1.oldAlpha = 1 layer.closeimage1.oriX = layer.closeimage1.x; layer.closeimage1.oriY = layer.closeimage1.y layer.closeimage1.oriXs = layer.closeimage1.xScale; layer.closeimage1.oriYs = layer.closeimage1.yScale layer.closeimage1.name = "closeimage1" sceneGroup:insert(layer.closeimage1); sceneGroup.closeimage1 = layer.closeimage1 -- Hiding elements layer.closeimage1.alpha = 0; layer.closeimage2.alpha = 0; layer.image1.alpha = 0; layer.image2.alpha = 0; layer.backimage2.alpha = 0; layer.backimage1.alpha = 0; end -- ends scene:create -- Called when the scene's view is about to 'will/load' or 'did/appear': function scene:show( event ) local sceneGroup = self.view if event.phase == "did" then -- purges previous and next scenes local \_\_prevScene = composer.getSceneName( "previous" ) if nil~= \_\_prevScene then composer.removeScene(\_\_prevScene, true) end -- Check for previous bookmarks if (tonumber(composer.kBookmark) == 1) then local path = system.pathForFile( "book.txt", system.DocumentsDirectory ) local file = io.open( path, "w+" ) file:write ( curPage.."\n1" ) io.close( file ) end -- Check for for auto play settings if (tonumber(composer.kAutoPlay) \> 0) then local function act\_autoPlay(event) if(curPage \< numPages) then if nil~= composer.getScene( "page\_"..curPage+1) then composer.removeScene( "page\_"..curPage+1, true) end if(composer.kBidi == false) then composer.gotoScene( "page\_"..curPage+1, { effect = "fromRight"} ) else composer.gotoScene( "page\_"..curPage-1, { effect = "fromLeft"} ) end end end if (tonumber(allAudios.kAutoPlay) \> composer.kAutoPlay) then composer.timerStash.timer\_AP = timer.performWithDelay( allAudios.kAutoPlay\*1000, act\_autoPlay, 1 ) else composer.timerStash.timer\_AP = timer.performWithDelay( composer.kAutoPlay\*1000, act\_autoPlay, 1 ) end end -- Button event listeners local function onbutton1Event(event) but\_open1(layer.button1) return true end layer.button1:addEventListener("tap", onbutton1Event ) local function onbutton2Event(event) but\_open2(layer.button2) return true end layer.button2:addEventListener("tap", onbutton2Event ) local function oncloseimage1Event(event) but\_close1(layer.closeimage1) return true end layer.closeimage1:addEventListener("tap", oncloseimage1Event ) local function oncloseimage2Event(event) but\_close2(layer.closeimage2) return true end layer.closeimage2:addEventListener("tap", oncloseimage2Event ) -- Button functions function but\_open1(self) composer.trans.newTransition\_195 = transition.to( layer.closeimage1, {alpha=layer.closeimage1.oldAlpha, time=1000, delay=0}) composer.trans.newTransition\_196 = transition.to( layer.image1, {alpha=layer.image1.oldAlpha, time=1000, delay=0}) composer.trans.newTransition\_196 = transition.to( layer.backimage1, {alpha=layer.backimage1.oldAlpha, time=1000, delay=0}) end function but\_open2(self) composer.trans.newTransition\_197 = transition.to( layer.closeimage2, {alpha=layer.closeimage2.oldAlpha, time=1000, delay=0}) composer.trans.newTransition\_197 = transition.to( layer.image2, {alpha=layer.image2.oldAlpha, time=1000, delay=0}) composer.trans.newTransition\_197 = transition.to( layer.backimage2, {alpha=layer.backimage2.oldAlpha, time=1000, delay=0}) end function but\_close1(self) composer.trans.newTransition\_198 = transition.to( layer.closeimage1, {alpha=0, time=1000, delay=0}) composer.trans.newTransition\_198 = transition.to( layer.image1, {alpha=0, time=1000, delay=0}) composer.trans.newTransition\_199 = transition.to( layer.backimage1, {alpha=0, time=1000, delay=0}) end function but\_close2(self) composer.trans.newTransition\_199 = transition.to( layer.image2, {alpha=0, time=1000, delay=0}) composer.trans.newTransition\_200 = transition.to( layer.closeimage2, {alpha=0, time=1000, delay=0}) composer.trans.newTransition\_200 = transition.to( layer.backimage2, {alpha=0, time=1000, delay=0}) end end --ends phase did end -- ends scene:show scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) return scene

nmichaud · November 17, 2015, 4:09pm

There is a few problem with your code, but I will stick to the original question.

From what I understand you are inserting in each scrollView an image:

layer.scroll_image1:insert(layer.image1)
layer.scroll_image2:insert(layer.image2)

The first thing you should pay attention is that you also try to insert your layer.ImageX in the sceneGroup. Since you insert it again in your scrollView, it is automatically re-parent to the scrollview. Therefore you should not inserting it in the sceneGroup. You can only have one child to parent relationship. As soon as you insert an object to another parent, it is automatically removed from the previous parent.

The reason why only your second scrollview is working, is because both scrollView are created on of top of each other. Look at your top/left position when you create your scrollView, It does not make sense. You should create them side by side or in a layout that suit your design and they should not overlap.

Hope this help

susa38 · November 18, 2015, 10:07am

thanks nmichaud.

Why the 2 scroll are on the same position and with the same width?

Initially they are hidden both.

When the user want to see one of them he press a button to unhide it and he can see this scrollview with the image1

After the user have a button to close it (if he press the button he hide the image)

The same with the second scrollview.

So I do not want that the user can see the 2 scrollview at the same time. For this is because the 2 images are hidden and the user can show and close them (show or hide them)

At this moment the only solution I have get it working is to create the scrollview when the user press the button to show (not before like I wrote it before)

before…

-- Button functions function but\_open1(self) composer.trans.newTransition\_195 = transition.to( layer.closeimage1, {alpha=layer.closeimage1.oldAlpha, time=1000, delay=0}) composer.trans.newTransition\_196 = transition.to( layer.image1, {alpha=layer.image1.oldAlpha, time=1000, delay=0}) composer.trans.newTransition\_196 = transition.to( layer.backimage1, {alpha=layer.backimage1.oldAlpha, time=1000, delay=0}) end function but\_open2(self) composer.trans.newTransition\_197 = transition.to( layer.closeimage2, {alpha=layer.closeimage2.oldAlpha, time=1000, delay=0}) composer.trans.newTransition\_197 = transition.to( layer.image2, {alpha=layer.image2.oldAlpha, time=1000, delay=0}) composer.trans.newTransition\_197 = transition.to( layer.backimage2, {alpha=layer.backimage2.oldAlpha, time=1000, delay=0}) end

and now…

-- Button functions function but\_open1(self) -- Scroll object layer.scroll\_image1 = widget.newScrollView { top = 5, left = 0, width = 2000, height = 1536, scrollWidth = 2000, scrollHeight = 12000, hideBackground = true, } sceneGroup:insert( layer.scroll\_image1) layer.scroll\_image1:insert(layer.image1) composer.trans.newTransition\_195 = transition.to( layer.closeimage1, {alpha=layer.closeimage1.oldAlpha, time=1000, delay=0}) composer.trans.newTransition\_196 = transition.to( layer.image1, {alpha=layer.image1.oldAlpha, time=1000, delay=0}) composer.trans.newTransition\_196 = transition.to( layer.backimage1, {alpha=layer.backimage1.oldAlpha, time=1000, delay=0}) end function but\_open2(self) -- Scroll object layer.scroll\_image2 = widget.newScrollView { top = 15, left = 20, width = 2000, height = 1536, scrollWidth = 2000, scrollHeight = 2600, hideBackground = true, } sceneGroup:insert( layer.scroll\_image2) layer.scroll\_image2:insert(layer.image2) composer.trans.newTransition\_197 = transition.to( layer.closeimage2, {alpha=layer.closeimage2.oldAlpha, time=1000, delay=0}) composer.trans.newTransition\_197 = transition.to( layer.image2, {alpha=layer.image2.oldAlpha, time=1000, delay=0}) composer.trans.newTransition\_197 = transition.to( layer.backimage2, {alpha=layer.backimage2.oldAlpha, time=1000, delay=0}) end

with this second way it works. But I would like to not need to create the scrollview each time the user press the button1 or 2

nmichaud · November 17, 2015, 12:44pm