Creating a navigation drawer is a panel located at the left edge of the screen to display application navigation items. The navigation drawer is not displayed most of the time, but is displayed in either of the following two cases: one is the gesture of sliding from the left edge of the screen to the right, and the other is the application icon in the toolbar. Navigation drawer in support
The navigation drawer design principles (Navigation
Drawer) to see if you need to create a navigation drawer.
Create a drawer layout. If you want to add a navigation drawer, use drawerlayout as the root view of the user interface. Two subviews must be placed under the drawerlayout view, one is used to display the body content of the screen (when the navigation drawer is hidden), and the other is used to display the navigation drawer.
The view used to display the screen body content is generally framelayout (it will be filled by a fragment when running). The view used to display the navigation drawer is generally a listview, as shown below:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- The main content view --> <FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" /> <!-- The navigation drawer --> <ListView android:id="@+id/left_drawer" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" android:choiceMode="singleChoice" android:divider="@android:color/transparent" android:dividerHeight="0dp" android:background="#111"/></android.support.v4.widget.DrawerLayout>
The above layout shows some important features of the navigation drawer layout:
1. The view showing the subject content must be the first subview under drawerlayout, because the drawer view must be above the subject content view (which means that drawerlayout is a control that is laid out on the Z axis) 2. The view for displaying the body content must be set to match the height and width of the parent view, because when the drawer view is hidden, the view showing the subject content represents the entire user interface. 3. The layout_gravity attribute value of the drawer view must be "start", to support right-to-left.
(RTL) Languages ages, specify the value
"start"Instead
Of
"left"(So
The drawer appears on the right when the layout is RTL) 4. The width of the drawer view should be a little narrower than that of the parent view, in this way, you can see a part of the subject content view when the drawer is displayed. The initialized drawer list drawer view generally contains a listview (the specific view is determined by your application ), the listview is no different from the usual one. An adapter is required to fill in the list. You can also set a single-item listener.
public class MainActivity extends Activity { private String[] mPlanetTitles; private ListView mDrawerList; ... @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mPlanetTitles = getResources().getStringArray(R.array.planets_array); mDrawerList = (ListView) findViewById(R.id.left_drawer); // Set the adapter for the list view mDrawerList.setAdapter(new ArrayAdapter<String>(this, R.layout.drawer_list_item, mPlanetTitles)); // Set the list's click listener mDrawerList.setOnItemClickListener(new DrawerItemClickListener()); ... }}
Processing the Click Event of the selected Click Event navigation item is actually the Click Event of the included listview item. We need to change the subject content accordingly based on the clicked item, remember that the view that shows the subject content is generally a fragment during running, so you only need to replace the current fragment with the corresponding fragment.
private class DrawerItemClickListener implements ListView.OnItemClickListener { @Override public void onItemClick(AdapterView parent, View view, int position, long id) { selectItem(position); }}/** Swaps fragments in the main content view */private void selectItem(int position) { // Create a new fragment and specify the planet to show based on position Fragment fragment = new PlanetFragment(); Bundle args = new Bundle(); args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position); fragment.setArguments(args); // Insert the fragment by replacing any existing fragment FragmentManager fragmentManager = getFragmentManager(); fragmentManager.beginTransaction() .replace(R.id.content_frame, fragment) .commit(); // Highlight the selected item, update the title, and close the drawer mDrawer.setItemChecked(position, true); setTitle(mPlanetTitles[position]); mDrawerLayout.closeDrawer(mDrawer);}@Overridepublic void setTitle(CharSequence title) { mTitle = title; getActionBar().setTitle(mTitle);}
You can set the events to be opened or closed by listening to the navigation drawer for drawerlayout.DrawerLayout.DrawerListenerListener to listen for opening and closing events. When the navigation drawer is opened and closed, ondraweropened () is called back ()
And
Ondrawerclosed () method, but if your activity contains action bar, you can chooseActionBarDrawerToggleTo replace drawerlistener,
Actionbardrawertoggle implements the drawerlistener interface, so the opening and closing events of the drawer can still be monitored, in addition, the use of actionbardrawertoggle can promote interaction between the action bar icon and the navigation drawer (open and close the navigation drawer by clicking the icon ), when the navigation drawer is opened or closed, the status of the action bar should also be changed accordingly (Navigation
Introduction in drawer)
public class MainActivity extends Activity { private DrawerLayout mDrawerLayout; private ActionBarDrawerToggle mDrawerToggle; private CharSequence mDrawerTitle; private CharSequence mTitle; ... @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ... mTitle = mDrawerTitle = getTitle(); mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) { /** Called when a drawer has settled in a completely closed state. */ public void onDrawerClosed(View view) { getActionBar().setTitle(mTitle); invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu() } /** Called when a drawer has settled in a completely open state. */ public void onDrawerOpened(View drawerView) { getActionBar().setTitle(mDrawerTitle); invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu() } }; // Set the drawer toggle as the DrawerListener mDrawerLayout.setDrawerListener(mDrawerToggle); } /* Called whenever we call invalidateOptionsMenu() */ @Override public boolean onPrepareOptionsMenu(Menu menu) { // If the nav drawer is open, hide action items related to the content view boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList); menu.findItem(R.id.action_websearch).setVisible(!drawerOpen); return super.onPrepareOptionsMenu(menu); }}
Click the application icon to open and close the navigation drawer. We introduced how to open and close the navigation drawer through gestures. However, if the activity contains the action bar, when you click the application icon, you can open and close the navigation drawer. You also need to use the icon to indicate the current status of the navigation drawer. If you use the actionbardrawertoggle class, you can set the parameters of the constructor to do this. There are five constructor parameters, which respectively represent: host activity, drawerlayout, the application icon when the navigation drawer is opened, the description text when the navigation drawer is opened, and the description text when the navigation drawer is closed. Note that, when the configuration environment of the mobile phone screen changes (horizontal and vertical screen switching), the configuration of the navigation drawer also needs to be changed. When the onrestoreinstancestate method of the host activity is called, the navigation drawer status also needs to be synchronized and can be synchronized in the onpostcreate method. For details, see the following code:
public class MainActivity extends Activity { private DrawerLayout mDrawerLayout; private ActionBarDrawerToggle mDrawerToggle; ... public void onCreate(Bundle savedInstanceState) { ... mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); mDrawerToggle = new ActionBarDrawerToggle( this, /* host Activity */ mDrawerLayout, /* DrawerLayout object */ R.drawable.ic_drawer, /* nav drawer icon to replace 'Up' caret */ R.string.drawer_open, /* "open drawer" description */ R.string.drawer_close /* "close drawer" description */ ) { /** Called when a drawer has settled in a completely closed state. */ public void onDrawerClosed(View view) { getActionBar().setTitle(mTitle); } /** Called when a drawer has settled in a completely open state. */ public void onDrawerOpened(View drawerView) { getActionBar().setTitle(mDrawerTitle); } }; // Set the drawer toggle as the DrawerListener mDrawerLayout.setDrawerListener(mDrawerToggle); getActionBar().setDisplayHomeAsUpEnabled(true); getActionBar().setHomeButtonEnabled(true); } @Override protected void onPostCreate(Bundle savedInstanceState) { super.onPostCreate(savedInstanceState); // Sync the toggle state after onRestoreInstanceState has occurred. mDrawerToggle.syncState(); } @Override public void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); mDrawerToggle.onConfigurationChanged(newConfig); } @Override public boolean onOptionsItemSelected(MenuItem item) { // Pass the event to ActionBarDrawerToggle, if it returns // true, then it has handled the app icon touch event if (mDrawerToggle.onOptionsItemSelected(item)) { return true; } // Handle your other action bar items... return super.onOptionsItemSelected(item); } ...}
The program running result is as follows:
Translation: http://developer.android.com/training/implementing-navigation/nav-drawer.html