DrawerLayout API.Navigation drawer is an overlay panel, that is replaced with the legacy application dashboard screen or menu. Now we don’t need to create a dedicated activity for showing all application options. For example, if you look at the older version of Facebook app, the dashboard screen was only the way to play around with the app. Lets say, if you are inside messages, you wont be able to get into the friends list, unless you come back to dashboard.
The latest version of Facebook App is using the Navigation Drawer.
Before you decide to use a navigation drawer in your app, you should understand the use cases and design principles defined in the Navigation Drawer design guide. It is not an general replacement for top-level menu navigation.
More information on design guidelines follow here.
This lesson describes step by step tutorial to Implement a navigation drawer using the DrawerLayout APIs available in the Support Library.
3.1. Create a Drawer Layout
To create a navigation drawer, first declare your user interface with a DrawerLayout object as the root view of your layout.Inside the DrawerLayout, add one view that contains the main content for the screen (your primary layout when the drawer is hidden) and another view that contains the contents of the navigation drawer. In this example, our layout uses a DrawerLayout with two child views. One FrameLayout to contain the main content, and a ListView for the navigation drawer. The FrameLayout is used to hold the child view’s populated by a Fragment at runtime.
Key Notes:
- The main content view is used as first child in the DrawerLayout. The XML order implies z-ordering and the drawer must be on top of the content.
- The main content view is set to match the parent view’s width and height, because it represents the entire UI when the navigation drawer is hidden.
- The drawer view specifies its width in dp units and the height matches the parent view. The drawer width should be no more than 320dp so the user can always see a portion of the main content.
3.2. Initialize the Drawer List
Now, first initialize the navigation drawer’s list of items. As here the navigation drawer consists a ListView, so the list can be populated by an Adapter.When the user selects an item in the drawer’s list, the system calls onItemClick() on the OnItemClickListener given to setOnItemClickListener(). In this example, selecting each item in the list inserts a different Fragment into the main content view FrameLayout.
3.4. Listen for Open and Close Events
We can also listen to the drawer open and close event. To listen for drawer open and close events, we can extend the ActionBarDrawerToggle class. The ActionBarDrawerToggle implements DrawerLayout.DrawerListener.4. Download Complete Source
Download Complete Source Code from GitHub5. Working Demo
Nenhum comentário:
Postar um comentário