android-Providing Ancestral and Temporal Navigation,Putting it All Together: Wireframing the Example
Now that users can navigate deep into the application's screen hierarchy, we need to provide a method for navigating up the hierarchy, to parent and ancestor screens. Additionally, we should ensure that temporal navigation via the Back button is respected to respect Android conventions.
Before Android 3.0, the most common form of ancestral navigation was the Home metaphor.
This was generally implemented as a Home item accessible via the device's Menu button,
or a Home button at the top-left of the screen, usually as a component of the Action Bar
(pattern docs at
Android Design). Upon selecting Home, the user would be taken to the screen at the top
of the screen hierarchy, generally known as the application's home screen.
Android 3.0 introduced the Up metaphor,
which is presented in the Action Bar as a substitute for the Homebutton described above.
Upon tapping Up, the user should be taken to the parent screen in the hierarchy. This
navigation step is usually the previous screen (as described with the Back button discussion
above), but this is not universally the case. Thus, developers must ensure that Up for
each screen navigates to a single, predetermined parent screen.
Implementation Note: As
a best practice, when implementing either Home or Up,
make sure to clear the back stack of any descendent screens. For Home, the only remaining
screen on the back stack should be the home screen. For Up navigation, the current screen
should be removed from the back stack, unless Backnavigates across screen hierarchies.
You can use the FLAG_ACTIVITY_CLEAR_TOP
andFLAG_ACTIVITY_NEW_TASK
intent
flags together to achieve this.
> Putting it All Together: Wireframing the Example APP
Now that we have a solid understanding of navigation patterns and screen grouping techniques, it's
time to apply them to our screens.
Wireframing is the step in the design process where you begin to lay out your screens. Get creative and begin imagining how to arrange UI elements to allow users to navigate your app. Keep in mind that at this point, pixel-perfect precision (creating high-fidelity mockups) is not important.
>After you're satisfied with initial sketches, it's a good idea to move on to digital wireframing using software such as Adobe® Illustrator, Adobe® Fireworks, OmniGraffle, or any other vector illustration tools. When choosing which tool to use, consider the following features:
- Are interactive wireframes possible? Tools such as Adobe® Fireworks offer this functionality.
- Is there screen 'master' functionality, allowing re-use of visual elements across different screens? For example, Action Bars should be visible on almost every screen in your application.
- What's the learning curve? Professional vector illustration tools may have a steep learning curve, while tools designed for wireframing may offer a smaller set of features that are more relevant to the task.
>Lastly, it may be time to begin implementing your designs and writing the code for the application using the Android SDK. To get started, take a look at the following resources:
- Developer's Guide: User Interface: learn how to implement your user interface designs using the Android SDK.
- Action Bar: implement tabs, up navigation, on-screen actions, etc.
- Fragments: implement re-usable, multi-pane layouts
- Support Library: implement horizontal paging (swipe views) using
ViewPager
相關文章
- [LeetCode] 2134. Minimum Swaps to Group All 1s Together IILeetCode
- [AtCoder] E - Putting Candies
- 4.5.1.3.2 Example
- PostgreSQL DBA(124) - Develop(Putting multiple LIKE patterns into an array)SQLdev
- An example of polybase for OracleOracle
- simd example code
- The trees stand together with ability ranks and rune words
- WPF Button MouseEnter and MouseLeave together play as MouseOver
- [Typescript] Query builder exampleTypeScriptUI
- An example about git hookGitHook
- ABAP webdynpro的view navigation和WebUI的view navigationWebViewNavigationUI
- Codeforces Round #676 (Div. 2) B. Putting Bricks in the Wall
- Jetpack 之 Navigation 初探JetpackNavigation
- [Vue Router] Programmatic NavigationVueNavigation
- Erlang vs Elixir by example – kv store
- Tell Me About Yourself Example 1
- 【RabbitMQ】direct type exchange example in golangMQGolang
- 【RabbitMQ】topic type exchange example in golangMQGolang
- 【RabbitMQ】fanout type exchange example in golangMQGolang
- HarmonyOS:Navigation元件的使用Navigation元件
- Android Jetpack Navigation基本使用AndroidJetpackNavigation
- 論文閱讀 Inductive Representation Learning on Temporal Graphs
- [轉]Angular 4|5 Material Dialog with ExampleAngular
- Java Scheduler ScheduledExecutorService ScheduledThreadPoolExecutor Example(ScheduledThreadPoolExecu...Javathread
- sim3d multiple component example3D
- For example, when you want to get the ball to the ground
- vue.js axios call api exampleVue.jsiOSAPI
- docker in allDocker
- 『React Navigation 3x系列教程』之React Navigation 3x開發指南ReactNavigation
- [macOS] 關閉色彩抖動 Temporal Dithering stillcolor pwmMac
- SF-Net: Single-Frame Supervision for Temporal Action Localization
- 論文閱讀 Exploring Temporal Information for Dynamic Network EmbeddingORM
- Android 官方元件 Navigation 初使用Android元件Navigation
- react-navigation圖文攻略ReactNavigation
- Avoided redundant navigation to current location: "/users"IDENavigation
- react-navigation 使用錦囊ReactNavigation
- 鴻蒙Navigation入門使用鴻蒙Navigation
- Jetpack Navigation----原始碼解析JetpackNavigation原始碼
- B. Navigation System【CF 1320】Navigation