Android Training - Sliding Menu

15
Sliding Menu Training 2014/02/11 John

Transcript of Android Training - Sliding Menu

Page 1: Android Training - Sliding Menu

Sliding Menu Training2014/02/11 John

Page 2: Android Training - Sliding Menu

Outline

● Overview● Design● Drawer Layout● Handle the clicked event● Listen for sliding event● Summary & HW

Page 3: Android Training - Sliding Menu

Overview

Consistent navigation is an essential component of the overall user experience.

Page 4: Android Training - Sliding Menu

Overview

Sliding menu is a reflection of app’s structure and its major navigation hubs. Usually, Sliding Menu is also called Navigation drawer.

Page 5: Android Training - Sliding Menu

Design

Displaying

Page 6: Android Training - Sliding Menu

Design

Content of Menu● Titles● or Icons● or counters

Page 7: Android Training - Sliding Menu

Design

Menu and Action BarClean up the action bar when the drawer is fully expanded.● App icon● App name● Remove actions

Page 8: Android Training - Sliding Menu

Design

Interaction Details● Give the user a quick peek● Highlights

Page 9: Android Training - Sliding Menu

Drawer LayoutTo use a DrawerLayout, position your primary content view as the first child with a width and height of match_parent. Add drawers as child views after the main content view and set the layout_gravity appropriately. Drawers commonly use match_parent for height with a fixed width.

ref: http://goo.gl/MK56ca

Page 10: Android Training - Sliding Menu

Drawer Layout

primary content view

drawers

Page 11: Android Training - Sliding Menu

Drawer Layout

Page 12: Android Training - Sliding Menu

Listen for sliding event

ref: http://goo.gl/jahPU

Page 13: Android Training - Sliding Menu

Handle the clicked event ref: http://goo.gl/2GXPc

Page 14: Android Training - Sliding Menu

Summary

● An essential component on navigating● Reflection of app’s structure● Touching, Swiping, and Pressing Back● Expanding and Collapsing relate with Action

Bar

Page 15: Android Training - Sliding Menu

HomeworkSample source code: (You can also fInd it at the video record nearby if this link is invalid.)https://www.dropbox.com/s/qh46pjb8iq0j409/TrainingSlidingMenu.zip

● Two sliding menu● Expanded from left and rightAdvance● Achieve sliding menu dosen’t use

DrawerLayout.