Android Training - Sliding Menu
-
Upload
kan-han-john-lu -
Category
Science
-
view
388 -
download
5
Transcript of Android Training - Sliding Menu
![Page 1: Android Training - Sliding Menu](https://reader031.fdocuments.net/reader031/viewer/2022030402/5889b02f1a28aba54d8b5381/html5/thumbnails/1.jpg)
Sliding Menu Training2014/02/11 John
![Page 2: Android Training - Sliding Menu](https://reader031.fdocuments.net/reader031/viewer/2022030402/5889b02f1a28aba54d8b5381/html5/thumbnails/2.jpg)
Outline
● Overview● Design● Drawer Layout● Handle the clicked event● Listen for sliding event● Summary & HW
![Page 3: Android Training - Sliding Menu](https://reader031.fdocuments.net/reader031/viewer/2022030402/5889b02f1a28aba54d8b5381/html5/thumbnails/3.jpg)
Overview
Consistent navigation is an essential component of the overall user experience.
![Page 4: Android Training - Sliding Menu](https://reader031.fdocuments.net/reader031/viewer/2022030402/5889b02f1a28aba54d8b5381/html5/thumbnails/4.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022030402/5889b02f1a28aba54d8b5381/html5/thumbnails/5.jpg)
Design
Displaying
![Page 6: Android Training - Sliding Menu](https://reader031.fdocuments.net/reader031/viewer/2022030402/5889b02f1a28aba54d8b5381/html5/thumbnails/6.jpg)
Design
Content of Menu● Titles● or Icons● or counters
![Page 7: Android Training - Sliding Menu](https://reader031.fdocuments.net/reader031/viewer/2022030402/5889b02f1a28aba54d8b5381/html5/thumbnails/7.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022030402/5889b02f1a28aba54d8b5381/html5/thumbnails/8.jpg)
Design
Interaction Details● Give the user a quick peek● Highlights
![Page 9: Android Training - Sliding Menu](https://reader031.fdocuments.net/reader031/viewer/2022030402/5889b02f1a28aba54d8b5381/html5/thumbnails/9.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022030402/5889b02f1a28aba54d8b5381/html5/thumbnails/10.jpg)
Drawer Layout
primary content view
drawers
![Page 11: Android Training - Sliding Menu](https://reader031.fdocuments.net/reader031/viewer/2022030402/5889b02f1a28aba54d8b5381/html5/thumbnails/11.jpg)
Drawer Layout
![Page 14: Android Training - Sliding Menu](https://reader031.fdocuments.net/reader031/viewer/2022030402/5889b02f1a28aba54d8b5381/html5/thumbnails/14.jpg)
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](https://reader031.fdocuments.net/reader031/viewer/2022030402/5889b02f1a28aba54d8b5381/html5/thumbnails/15.jpg)
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.