Hello,
Is there any way to achieve the sliding functionality between pages that iOS does so beautifully? By this I mean when you touch and drag on the left side of the screen, the page moves along with your finger in order to get to the next page. I have attached photos to show what I mean.
The answer is, Yes and No.
“Yes, you can achieve this interaction.”
“No, I don’t think there are any ready-made modules that make this just a few lines of code.”
For example, I have code that adds swiping to composer.*, but that isn’t exactly what you want:
https://www.youtube.com/watch?v=dZ8wfx2t4sQ
I also provided one user a modification to the scrollview, but that is also not exactly what you want:
https://www.youtube.com/watch?v=zEf9rmdHgFg
What you really need is a custom module that uses display groups to achieve this interaction and visual aesthetic. You can code this on your own, or perhaps post a job listing to get it made.
Hopefully someone else has a better answer, but this is what I know. Sorry.
Thanks for the help. These videos have given me a few ideas… wish Corona was as simple to implement nice animations as Swift.
Sliding display groups will do this real easy if you chain them so they slide together. You will need them all loaded in the same scene obviously. You can nest tableviews inside display groups for your options.
Could you provide some sample code on how to do this? A little confused what you mean
Assume your main menu is called groupA and your detail menu is called groupB and each menu is the size of the screen. Then when you click on an option in groupA you transition groupB under groupA and move groupA left by 50%.
Assuming a screen width of 320px (center at 160px) and each group is 320px wide, groupA is at x=160 and groupB is currently at x=480 (i.e. not visible)
Some code…
--onclick on groupA (groupB slides in from right) transition.to(groupA, {time=500, x=80}) transition.to(groupB, {time=500, x=160}) --onclick on groupB (i.e. close the child menu and slide groupB to the right) transition.to(groupA, {time=500, x=160}) transition.to(groupB, {time=500, x=480})
If you wanted your sub menu to scroll from underneath your main menu then you position groupB at x=-160 and stack it below groupA and use the following
--onclick on menuA (groupB slides under from left) transition.to(groupA, {time=500, x=-80}) transition.to(groupB, {time=500, x=160}) --onclick on menuB (i.e. close the child menu and slide groupB to the left under groupA) transition.to(groupA, {time=500, x=160}) transition.to(groupB, {time=500, x=-160})The answer is, Yes and No.
“Yes, you can achieve this interaction.”
“No, I don’t think there are any ready-made modules that make this just a few lines of code.”
For example, I have code that adds swiping to composer.*, but that isn’t exactly what you want:
https://www.youtube.com/watch?v=dZ8wfx2t4sQ
I also provided one user a modification to the scrollview, but that is also not exactly what you want:
https://www.youtube.com/watch?v=zEf9rmdHgFg
What you really need is a custom module that uses display groups to achieve this interaction and visual aesthetic. You can code this on your own, or perhaps post a job listing to get it made.
Hopefully someone else has a better answer, but this is what I know. Sorry.
Thanks for the help. These videos have given me a few ideas… wish Corona was as simple to implement nice animations as Swift.
Sliding display groups will do this real easy if you chain them so they slide together. You will need them all loaded in the same scene obviously. You can nest tableviews inside display groups for your options.
Could you provide some sample code on how to do this? A little confused what you mean
Assume your main menu is called groupA and your detail menu is called groupB and each menu is the size of the screen. Then when you click on an option in groupA you transition groupB under groupA and move groupA left by 50%.
Assuming a screen width of 320px (center at 160px) and each group is 320px wide, groupA is at x=160 and groupB is currently at x=480 (i.e. not visible)
Some code…
--onclick on groupA (groupB slides in from right) transition.to(groupA, {time=500, x=80}) transition.to(groupB, {time=500, x=160}) --onclick on groupB (i.e. close the child menu and slide groupB to the right) transition.to(groupA, {time=500, x=160}) transition.to(groupB, {time=500, x=480})
If you wanted your sub menu to scroll from underneath your main menu then you position groupB at x=-160 and stack it below groupA and use the following
--onclick on menuA (groupB slides under from left) transition.to(groupA, {time=500, x=-80}) transition.to(groupB, {time=500, x=160}) --onclick on menuB (i.e. close the child menu and slide groupB to the left under groupA) transition.to(groupA, {time=500, x=160}) transition.to(groupB, {time=500, x=-160})