Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tablet layouts #8

Open
nhaarman opened this issue Aug 16, 2018 · 4 comments
Open

Tablet layouts #8

nhaarman opened this issue Aug 16, 2018 · 4 comments
Labels
type:documentation Documentation is needed type:needs-design Uncharted territory

Comments

@nhaarman
Copy link
Owner

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

@nhaarman nhaarman added the type:needs-design Uncharted territory label Sep 12, 2018
@nhaarman
Copy link
Owner Author

nhaarman commented Oct 2, 2018

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 nhaarman added the type:documentation Documentation is needed label Oct 2, 2018
@nhaarman
Copy link
Owner Author

nhaarman commented Oct 2, 2018

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.

@nhaarman nhaarman removed the type:needs-design Uncharted territory label Oct 2, 2018
@Zhuinden
Copy link

Zhuinden commented Oct 2, 2018

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
Copy link
Owner Author

nhaarman commented Oct 2, 2018

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

@nhaarman nhaarman added the type:needs-design Uncharted territory label Oct 2, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type:documentation Documentation is needed type:needs-design Uncharted territory
Projects
None yet
Development

No branches or pull requests

2 participants