Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Swipe between scenes
Started by peron.pierreantoine Feb 09 2019 03:08 PM

- - - - -
3 replies to this topic
[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

peron.pierreantoine

[GLOBAL: userInfoPane.html]
peron.pierreantoine
  • Contributor

  • 127 posts
  • Corona SDK

Hi,

 

I would like to swipe between my scenes the way most apps do, by swiping with the finger.

 

But my problem is that I have scrollViews in my scenes... And whereas my swipe system works perfectly without them, it all goes wrong when I add my scrollViews to the scenes.

 

In fact, I gathered everything into one composer scene and when I move my objects group including the scrollView, it seems like the scrollView that was said to be moved offscreen is still active and handles the touch events instead of the one said to be onscreen.

 

Here is my code:

display.setStatusBar( display.HiddenStatusBar )

local composer = require ( "composer" )
local widget = require("widget")




local generalWidth = display.actualContentWidth
local generalHeight = display.actualContentHeight

local myData = {}

myN1 = function()
myN1Group = display.newGroup()




	local function swipeDirectionRightLeft1( event )
 	local swipeLength = math.abs(event.x - event.xStart)
	local swipeLength2 = event.x - event.xStart
	local swipeHeight = math.abs(event.y - event.yStart)
			local phase = event.phase
			print("WFT")
			print(phase)
			print(myData.actualPosition)
			if "began" == phase then
				myData.startTime = event.time
				myData.actualPosition = generalWidth*(540/1080)
				myData.previousX = event.x
			elseif "moved" == phase and event.xStart > generalWidth*(10/1080) then
				if swipeLength > generalWidth*(30/1080) then
					if myData.actualPosition > generalWidth*(540/1080) and event.x - myData.previousX > 0 then myN1Group.x = myN1Group.x + generalWidth*(540/1080) - myData.actualPosition; myN2Group.x = myN2Group.x + generalWidth*(540/1080) - myData.actualPosition; myData.actualPosition = generalWidth*(540/1080)
					elseif swipeHeight < swipeLength then
						scrollView:setIsLocked( true )
						myN2Group.x = myN2Group.x + event.x - myData.previousX
						myData.actualPosition = myData.actualPosition + event.x - myData.previousX
						myN1Group.x = myN1Group.x + event.x - myData.previousX
						myData.previousX = event.x
					end
				end
			
			elseif "ended" == phase or "cancelled" == phase then
			if swipeHeight < swipeLength then
			local speed = swipeLength/(event.time-myData.startTime)
				if (swipeLength2 < 0 and swipeLength > generalWidth*(535/1080)) or (speed > 0.75 and swipeLength2 < 0 ) then myN1Group.x = myN1Group.x - generalWidth*(540/1080) - myData.actualPosition; myN2Group.x = myN2Group.x - generalWidth*(540/1080) - myData.actualPosition scrollView2:toFront() end
				if (swipeLength2 < 0 and swipeLength < generalWidth*(535/1080) and speed < 0.75) then print("2") myN1Group.x = myN1Group.x + generalWidth*(540/1080) - myData.actualPosition; myN2Group.x = myN2Group.x + generalWidth*(540/1080) - myData.actualPosition end
			
			end
			end
		return true
		end

		 scrollView = widget.newScrollView(
    {

        width = display.actualContentWidth,
        height = display.actualContentHeight,
        scrollWidth = display.actualContentWidth,
        scrollHeight = display.actualContentHeight,
		horizontalScrollDisabled = true,
       -- listener = scrollListener
	   isBounceEnabled = false,
	   hideBackgroud = true,
	   backgroundColor = { 1 },
	   listener = swipeDirectionRightLeft1,
    }
)
myData.numberOfTurns = 0

myData.numberToRepeat = 0
 
--[[
 		swipeScrollRectangle = display.newRect (display.actualContentWidth/2, display.actualContentHeight/2, display.actualContentWidth, display.actualContentHeight)
		swipeScrollRectangle:setFillColor(1)
swipeScrollRectangle.isHitTestable = true
scrollView:insert( swipeScrollRectangle )
swipeScrollRectangle:addEventListener("touch", swipeDirectionRightLeft1)
scrollView:toFront()
--]]

	
	myN1Group:insert(scrollView)

end



myN1()




myN2 = function()
myN2Group = display.newGroup()


	local function swipeDirectionRightLeft2(event)

 	local swipeLength = math.abs(event.x - event.xStart)
	local swipeLength2 = event.x - event.xStart
	local swipeHeight = math.abs(event.y - event.yStart)
			local phase = event.phase
			print("planning")
			print(phase)
			print(myData.actualPosition)
			if "began" == phase then
				myData.startTime = event.time
				myData.actualPosition = generalWidth*(540/1080)
				myData.previousX = event.x
			elseif "moved" == phase and event.x > generalWidth*(10/1080) then
			
				if swipeLength > generalWidth*(30/1080) then
					
					if swipeHeight < swipeLength then
						scrollView2:setIsLocked( true )
						myN2Group.x = myN2Group.x + event.x - myData.previousX
						myData.actualPosition = myData.actualPosition + event.x - myData.previousX
						myN1Group.x = myN1Group.x + event.x - myData.previousX
						myData.previousX = event.x
					end
				end
			
			elseif "ended" == phase or "cancelled" == phase then
			if swipeHeight < swipeLength then
			myData.stop = "true"
			local speed = swipeLength/(event.time-myData.startTime)
				if (swipeLength2 > 0 and swipeLength > generalWidth*(535/1080)) or (speed > 0.75 and swipeLength2 > 0 ) then myN1Group.x = myN1Group.x + generalWidth*(1620/1080) - myData.actualPosition; myN2Group.x = myN2Group.x + generalWidth*(1620/1080) - myData.actualPosition scrollView:toFront() end
				if (swipeLength2 > 0 and swipeLength < generalWidth*(535/1080) and speed < 0.75) then myN1Group.x = myN1Group.x + generalWidth*(540/1080) - myData.actualPosition; myN2Group.x = myN2Group.x + generalWidth*(540/1080) - myData.actualPosition end			
			end
			end
	
return true
	end
		
		



			scrollView2 = widget.newScrollView(
    {

        width = generalWidth*(1080/1080),
        height = generalHeight*(1920/1920),
        scrollWidth = generalWidth*(1080/1080),
        scrollHeight = generalHeight*(1920/1920),
		horizontalScrollDisabled = true,
	   isBounceEnabled = false,
	   hideBackgroud = false,
	   backgroundColor = { 0 },
	   listener = swipeDirectionRightLeft2,
    }
)
--[[
swipeRectangle = display.newRect (display.actualContentWidth/2, display.actualContentHeight/2, display.actualContentWidth, display.actualContentHeight)
swipeRectangle:setFillColor(0)
swipeRectangle.isHitTestable = true
scrollView6:insert( swipeRectangle )
swipeRectangle:addEventListener("touch", swipeDirectionRightLeft2)
--]]	

myN2Group:insert(scrollView2)
end

myN2()
myN1Group.x = myN1Group.x - generalWidth*(1080/1080)

In my code, you can see two pieces of code marked as comments. These are simple rectangles said to cover all my scene and handle the touch events. But because of the "return true", I cannot scroll up and down in the scene.

 

That's why I decided to use the scrollListener to handle the touch events for swipe bewteen scenes instead. But it does not work fine (because of the problems mentioned previously).

 

I also tried BackSwipe navigation for composer but it seems like it's not working with scrollViews in scenes.

 

I hope I was clear and comprehensible.

 

Thanks in advance for your help



[TOPIC: post.html]
#2

horacebury

[GLOBAL: userInfoPane.html]
horacebury
  • Corona Geek

  • 3,032 posts
  • Corona SDK

I built a library for this which allows you to pretty much keep your scenes just as they normally would be. Take a look:

 

https://github.com/HoraceBury/iOSbackSwipe



[TOPIC: post.html]
#3

carloscosta

[GLOBAL: userInfoPane.html]
carloscosta
  • Contributor

  • 613 posts
  • Corona SDK

horacebury library looks amazing, you should try it.

 

I use scrollviews all the time and buttons inside them, also swipe left and right. It's easy to do what you want.

the front object inside the scrollview that don't let you scroll, just check the direction of the movement, if it's left or right swipe, if its up  or bot just give focus to the scrollview.

 

https://docs.coronalabs.com/api/type/ScrollViewWidget/takeFocus.html



[TOPIC: post.html]
#4

peron.pierreantoine

[GLOBAL: userInfoPane.html]
peron.pierreantoine
  • Contributor

  • 127 posts
  • Corona SDK

Hi,

 

Thank you very much, takeFocus solved the problem.

 

@horaceburry, your option looks great too!


  • horacebury likes this


[topic_controls]
[/topic_controls]