Sliding Menu Training2014/02/11 John

Outline

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

Overview

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

Overview

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

Design

Displaying

Design

Content of Menu● Titles● or Icons● or counters

Design

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

Design

Interaction Details● Give the user a quick peek● Highlights

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

Drawer Layout

primary content view

drawers

Drawer Layout

Listen for sliding event

ref: http://goo.gl/jahPU

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

Summary

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

Bar

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.