iOS 7 Style swipe navigation

Solar2D Composer
#1

Hi,

Using Composer, I am trying to implement a swipe style navigation, as seen in Mail or Notes. Eg:

http://tech4eleven.com/wp-content/uploads/2013/10/navigate-swipe-email-ios7.png

http://cdn.iphonehacks.com/wp-content/uploads/2013/09/swipe-to-go-back.jpg

The user interaction is this: From a document or sub-level menu, swiping from the left edge of the screen towards the right will pull the current display across the screen. The parent menu level will be revealed and, after reaching a certain point on the screen, releasing the drag will cause the current display to complete the transition itself, effectively navigating to the parent menu.

Notes uses this to move the user from the note file to the list of notes and Mail uses it to move from an email to the Inbox and then again to the list of accounts.

I have tried building this using Composer. The technique would be to have a touch area to start the drag and move the current sceneGroup with the touch. If the touch/drag is released before getting, for example, 33% across the screen, a transition is used to put the sceneGroup back to where it started.

If the touch/drag is released in the right 66% of the screen, a transition is used to move the sceneGroup all the way to the right of the screen. Two problems occur here:

  1. The sceneGroup below needs to be ‘manually’ affected to make it visible because Composer has set it’s isVisible property to false. This is straightforward and, while a bit of a hack, works fine.

  2. At the completion of the transition, to complete the navigation back to the previous scene, composer.gotoScene([name]) should be called, of course. This will cause composer to handle all the usual scene transitions (here, these are suppressed by the lack of parameters) and event firing present when changing scenes. What it also does is cause the flickering of the scene behind, due to the direct control that Composer has on the sceneGroups.

So, the question here is: Does anyone have a good, clean method of performing this type of transition without screwing with Composer so much that it is obviously visible? My preference, of course, would be that composer does all it’s usual handling, minus the direct placement of the sceneGroups, but that, it would seem, is not an option at present.

Cheers,

Matt

#2

Hi Matt,

I’ve tried doing something similar but my approach was to remain In the same scene and slide scrollViews/tableViews etc. It could be a viable option.

Regards,
Kerem

#3

Yes, I feel that will be the end game, but I’d really like this to be an option for Composer as it is the defacto solution for scene control from Corona.

Fortunately, my scenes are not too heavy, but I think if they really deserved to be in their own modules for proper memory handling, this would become a problem.

#4

Absolutely !!! I too wish that the Composer library and Corona SDK in general would give us more elements to get closer to native look & feel. One can only wish…

#5

I’m working on a composer extension library that provides “swipe-to-go-back-to-previous-scene” functionality (like in iOS7/8).

It’s still in beta, but it’s working well so far.

I’ll update this thread once it’s ready (it’ll be a Lua library available on GitHub. MIT license.)

#6

Sounds great Ingemar!

#7

bjoud.jpg

#8

B)

#9

Any news on progress - am anxiously awaiting…

#10

It’s going well, however I have another project that I need to get out the door before I finalize the library.

I don’t want to make the mistake of giving an ETA and then not being able to keep it, so all I can say at the moment is that I’m planning on releasing it soon  ;).

#11

Just to be in keeping with what I’ve said in another post, my plan is to release the back-swipe library within the next few weeks.

I still have another project deadline to meet next week. After that I’ll concentrate to get this library live on GitHub  :ph34r: .

#12

Hey guys, not to steal anyone’s thunder, but I really needed this functionality so I built it and it’s now in Code Exchange/Github:

http://code.coronalabs.com/code/backswipe-navigation-composer

Please comment and make suggestions/requests.

#13

No thunder to be stolen  :slight_smile:

Just a different approach to a common “problem”.

Looks like it works well…

#14

Looks very good, some tiny feedback from little bit of testing:

  1. Personally I feel you should be able to drag on the entire screen, not just the edge, and dragging should start only after a 1-3 pixels when we are sure user is definitely dragging. This depends on the app though.

  2. Should not be possible to drag from right to left unless you can go to a scene there.

  3. Also I think the approach of a scene only for loading is a bit strange. Because it swipes in from right just like a normal scene so logically you should  be swiping back to a reveal loading scene (sorry nitpicking :)) 

#15

@jonjonsson

Regarding (1). My library also starts a swipe only on the far left of the screen. That’s how iOS7+ implements it.

The reason being: What happens if you have a scrollView (or other swipe-able object) in the scene? The scrollView should be able to scroll left/right for any swipes other than the far left (which starts a scene change).

(2) My library doesn’t allow right-to-left-swipe whatsoever. Not iOS compliant either as I see it.

#16

Yeah makes sense for most apps I suppose. I like Taasky for example where you drag on the whole scene.

#17

Thanks guys.

  1. My library is designed from starting a swipe from left off-screen to go back to the previous screen, Notes or Mail style. This allows the majority of left or right swipes on screen to be made on objects. I am considering the library behaviour so that this is an option and configurable for attributes such as distance travelled prior to the drag starting.
  2. Right to left swipe, in terms of back navigation in iOS doesn’t make sense, because “going back” starts on the left and moves toward the right. Releasing the drag operation after 30% of screen width travelled causes the navigation to complete.
    Having said that, right-to-left is a valid operation, as is up/down, and so I’m also considering those as actions. Again, my primary drive was to replicate the Notes/Mail behaviour for my specific needs, initially.
  3. If you try dragging the Page 2 or Page 3 you will see that the screen revealed is actually the home scene, not the loading scene. This is deliberate so that scenes can be navigated to and marked as intermediate specifically so that they do not show when back-swiping. I needed this behaviour so that a scene could show while downloading data and yet not be part of the navigation after loading completes. The label on that scene could easily say “Downloading… please wait…” etc.

I hope to improve this library a lot. Please keep the comments coming - I’ll include as much as I can.

#18

  1. I mean you should probably disable the right to left dragging that is possible now (on the left side of the screen), just a small thing. 

  2. Sorry I was not clear and I’m just whining. But what I meant is that a loading scene should not have the same behavior as regular scene. In your demo the loading scene comes over the home scene from the right like a regular scene and then the page2 scene comes over loading scene. So in my minds eye I see a stack of scenes but loading scene has been put in-between and  logic tells me when I drag page2 I should see loading underneath, but of course that is not the case (nor should it). So perhaps some kind of fading in and out the load scene and then page2 comes over…

#19

  1. I’ve updated the library to avoid being able to slide the scene left, off the screen. I will toy with the size of the touch area but essentially this is how iOS does it - a small area down the side of the screen to detect the initial touch and begin the swipe action.

  2. Absolutely, and of course when a gotoScene is employed the stack of scene slides should actually be wiped - I will add this, too. I was not sure - in my app - how to provide the loading screen. I need somewhere to DL content and I didn’t want to show that in the page which presents that data. Ideas welcome!

#20

Ok folks, I’d just like to let everyone know that I’ve completely rewritten my back-swipe navigation library. I have also included my own version of the template scene module.

I really, really have to thank @ingemar for the animation updates to the composer api because without that I would not have been inspired to go looking in the right places. Thank you @ingemar.

If you’ve not seen it yet, you can find the animations here: http://forums.coronalabs.com/topic/50598-ios-7-style-scene-transitions/?p=262138

You can find my complete back-swipe library included in my example app in the Code Exchange:

http://code.coronalabs.com/code/backswipe-navigation-composer