Tablet layouts

[nhaarman]

Often a tablet layout is two ui panes in one screen. Android provides resource folders for this, how would this work with navigators?

[nhaarman]

An app designed for mobile phones and tablets often have very different navigational flows. In GMail for example, tapping an email from the email list on a phone navigates to a different screen, while doing the same thing on a tablet opens the email on the same screen.

It is only natural to design these things as separate navigators, and create Scenes specific to phone and tablet layouts. Scenes still can be reused for this, see #10.

In our GMail example, we could have an EmailListScene and a EmailContentScene. A PhoneNavigator would use these Scenes directly. For a tablet, you could create an additional TabletEmailContentScene that is composed of the EmailListScene and the EmailContentScene. A TabletNavigator would navigate from the EmailListScene to the TabletEmailContentScene.

[nhaarman]

This only leaves determining what navigator to actually use. Depending on the specifics (orientation, screen width, etc) you can implement a NavigatorProvider that determines the Navigator instance based on a boolean flag in the resources, for example.

[Zhuinden]

Actually, if you also consider freeform windows on Chrome OS that allow resizing, then having a custom Navigator isn't necessarily the right way, because now you have to swap out phone navigator and tablet navigator at runtime based on available width.

Although in that scenario, the common case of having a separate container, one as SinglePaneContainer and the other as MasterDetailContainer divided according to sw600dp, isn't as applicable either.

Either way, we have the same navigation state in both scenarios, but we can show multiple views at a time instead of just one.

[nhaarman]

Ooh, nice catch! Switching from multi-pane windows to single pane windows is indeed something to think about.