Android component -- create the DrawerLayout navigation

Android component -- create the DrawerLayout navigation
 
An overview of this blog is a simple translation of the trainingcourse on ".android.com/". If you find that the course has been translated successfully, click the next link to download the original article!

Training about DrawerLayout: http://developer.android.com/training/implementing-navigation/nav-drawer.html

API for DrawerLayout: http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html

 

Create drawer Layout

To create a drawer layout, you must use DrawerLayout as the root node of the XML file. Remember, DrawerLayout references android. support. v4.DrawerLayout, and then add a content view area and one or two drawer view areas inside the layout. Here, the drawer view is the menu view described above. For example, the following layout shows that a FrameLayout is added to the layout as the content area (usually used to present Fragment), and a listView is defined below to present the menu view of the drawer:

 

    
     <framelayout android:id="@+id/content_frame" android:layout_height="match_parent" android:layout_width="match_parent">    
     
 </framelayout>

This layout file demonstrates some important Layout features.
The view of the main content (FrameLayout) must be the first child element of DrawLayout, because the navigation drawer is above the main content view. the main content view is set to match the width and height of the parent view, because it indicates that the navigation drawer of the entire interface is hidden. the horizontal gravity and android: layout_gravity attributes of the drawer view (ListView) must be specified. The right-to-left (RTL) language is supported. The specified value replaces left with start (so the layout appears on the right side of the drawer when RTL is used ). the drawer view specifies that its width matches the parent view with the dp unit and height. The drawer width cannot exceed 320 dp, so you can always see part of the main content view.

 

 

Initialize the drawer list in your Activity. The first thing is to initialize the elements in the navigation drawer list. How you do it depends on the content of your application, however, a navigation drawer usually includes a ListView, so the list should be filled with an Adapter (such as ArrayAdapter or SimpleCursorAdapter ).
For example, here we demonstrate how to use String array to initialize a navigation list.

 

 

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
 
  (this,                R.layout.drawer_list_item, mPlanetTitles));        // Set the list's click listener        mDrawerList.setOnItemClickListener(new DrawerItemClickListener());        ...    }}
 

This Code calls setOnItemClickListener () to receive click events in the navigation drawer list. The next section shows how to implement this interface and change the content view when you select an Item.

 

 

When an Item in the drawer list is selected, the system calls onItemClick () on onItemClickListener to setOnItemClickListener ().
What you do in the onItemClick () method depends on the structure of your app implementation. In the following example, selecting each Item will insert a different Fragment in the layout of the main content.

 

 

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    mDrawerList.setItemChecked(position, true);    setTitle(mPlanetTitles[position]);    mDrawerLayout.closeDrawer(mDrawerList);}@Overridepublic void setTitle(CharSequence title) {    mTitle = title;    getActionBar().setTitle(mTitle);}

Listen for opening and closing events listen for opening and closing events in the drawer, call your DrawerLayout setDrawerListener (), and pass it to DrawerLayout. implementation of DrawerListener. this interface provides callback drawer events, such as onDrawerOpened () and onDrawerClosed ().
However, compared with the implementation of DrawerLayout. drawerListener. If your Activity includes a toolbar, You can inherit the ActionBarDrawerToggle class instead. actionBarDrawerToggle implements DrawerLayout. drawerListener. so you can still override these callbacks, but it also helps with the correct interaction behavior between the toolbar icon and the navigation drawer (which will be further discussed in the next section ).
Just like in the navigation drawer Design Guide, when the drawer is visible, you should modify the content of the toolbar, such as changing the title and deleting the operation Item. the following code uses an instance of the ActionBarDrawerToggle class to show how to override DrawerLayout. the callback method of DrawerListener:

 

 

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) {                super.onDrawerClosed(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) {                super.onDrawerOpened(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 next section describes the ActionBarDrawerToggle constructor parameters and other required steps to set them to process the toolbar icons.

 

 

The open close application icon allows you to open and close the navigation drawer and slide from the left edge of the screen with your fingers. However, if you use the toolbar, you should also allow the user to open and close it, by touching the application icon. the application icon can also display a Special icon about the navigation drawer status. you can implement all these actions by using ActionBarDrawerToggle, as shown in the previous section.
Let ActionBarDrawerToggle work and create an instance using its constructor. This requires the following parameters:
Activity holding the drawer. drawerLayout object. A Drawable resource serves as a drawer indicator. string Resource Description opening drawer action. string Resource Description to close the drawer action. then, whether or not you have created an ActionBarDrawerToggle subclass as the Listener of your drawer, you need to call your ActionBarDrawerToggle in several Activity lifecycles:

 

 

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) {                super.onDrawerClosed(view);                getActionBar().setTitle(mTitle);            }            /** Called when a drawer has settled in a completely open state. */            public void onDrawerOpened(View drawerView) {                super.onDrawerOpened(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);    }    ...}