[Android] Navigation Drawer of Android Design

Overview

In the past, ActionBar was unique to Android 4.0. Later, ActionBarSherlock's dedicated-step martial arts, and SlidingMenu, however, this can be a good fit for Android 4.0. Since the Google I/O conference (last year, this year will begin in a few days ).

According to zhihu daily, Douban applications obviously feel the style of Android Design.

Effect

Public class MainActivity extends Activity {private String [] mPlanetTitles; private DrawerLayout mDrawerLayout; private ListView mDrawerList ;... @ Override public void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); mPlanetTitles = getResources (). getStringArray (R. array. planets_array); mDrawerLayout = (DrawerLayout) findViewById (R. id. drawer_layout); 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 ());...}}

Attached layout file:

<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>

 

Content_frame is a content panel, which can be filled by Fragmeng. This listVIew is the drawer view that we can slide on the left side (now a ListView ).

Note:

1. The content view must be the first subview of DrawerLayout. The reason is that the View order in the XML layout file is the z-ordering order in the Android system, and the Navigation Drawer must appear on the content.

2. The content view must be filled with the parent component, because when Drawer is hidden, our content view is displayed.

3. Navigation DrawerYou must use the android: layout_gravity attribute to set the horizontal gravity value.. If you want to support right-to-left (RTL, read from right to left ),"start"Replace"left"(When the RTL language is running, the menu appears on the right ).

 

4. The width of the drawer menu isdpThe height is the same as that of the parent View. The width of the drawer menu should not exceed 320dp, so that you can see part of the content interface when the menu is opened.

Due to the toggle related to the expansion and closure of the Navigation Drawer, this is handled by DrawerLayout. DrawerListener.

  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);    }

The icons are not the same when you expand or close them:

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);    }

 

By the way, there is a piece of translation missing, that is, why is listview on the left? This is not a problem. You need to fill in a view. This view can make the GridView, scrollview, etc, as long as there is content.