How to Create a Drawer Navigation bar (Navigation Drawer) and navigationdrawer

How to Create a Drawer Navigation bar (Navigation Drawer) and navigationdrawer
If you need to reprint, please indicate the source: http://www.cnblogs.com/ghylzwsb/p/5831759.htmlcreate a navigation bar with a drawer

The drawer navigation bar is displayed on the left edge of the screen and is the main navigation option Panel of the application. It is hidden most of the time, but it is displayed when you wave your finger from the left edge of the screen, and on the top layer of the application, the application icon on the Operation bar can be displayed.

This course describes how to implement the navigation drawer DrawerLayout under the available API support library.

First, let's take a look at the final:

 

1. Create a Drawer Layout file (Drawer Layout)

To add a drawer navigation, you must first declare the root layout of your user interface as a DrawerLayout object. In DrawerLayout, add a view object for the main view content (view displayed on the screen when the drawer is hidden) and a view object containing the drawer navigation view.

For example, the following layout uses DrawerLayout that contains two subviews: FrameLayout, including the main content (filled with Fragment at runtime), and a navigation drawer of ListView.

1 <android. support. v4.widget. drawerLayout 2 xmlns: android = "http://schemas.android.com/apk/res/android" 3 android: id = "@ + id/drawer_layout" 4 android: layout_width = "match_parent" 5 android: layout_height = "match_parent"> 6 7 <! -- Main view --> 8 <FrameLayout 9 android: id = "@ + id/content_frame" 10 android: layout_width = "match_parent" 11 android: layout_height = "match_parent"/> 12 13 <! -- Drawer View --> 14 <ListView15 android: id = "@ + id/left_drawer" 16 android: layout_width = "240dp" 17 android: layout_height = "match_parent" 18 android: layout_gravity = "start" 19 android: background = "#111" 20 android: choiceMode = "singleChoice" 21 android: divider = "@ android: color/transparent" 22 android: dividerHeight = "0dp"/> 23 24 </android. support. v4.widget. drawerLayout>

This layout file demonstrates some important Layout features as follows:

• The main content view (FrameLayout above) must be the first child view object of the DrawerLayout layout object, because the xml file means z sorting (that is, the upper and lower sorting of space, that is to say, the drawer navigation bar should be located at the vertical top of the content view ).
• Two attributes of the view object in the main content view: layout_width and layout_height must be match_parent, because when the drawer navigation bar is hidden, it is the entire UI.
• The drawer view must specify the unit of its width as dp, and the height matches the parent view. The drawer width should not exceed DP, so that you can view some of the main content view at any time.
• The drawer view (ListView) must use the android: layout_gravity attribute to specify its horizontal gravity direction. To support the right-to-left (RTL) language, you should specify its attribute as "start" instead of "left ".

2. initialize the drawer list

In your Activity, one of the first tasks is to initialize the list items in the drawer navigation bar. As for how you do it, it depends on the content in your application, but usually the drawer navigation bar contains a ListView, so the list should be filled by the Adapter (such as ArrayAdapter or SimpleCursorAdapter ).

For example, the following will show you how to use a string array to initialize the drawer navigation bar 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<String>(this,                R.layout.drawer_list_item, mPlanetTitles));        // Set the list's click listener        mDrawerList.setOnItemClickListener(new DrawerItemClickListener());        ...    }}

This Code also calls setOnItemClickListener () to receive click events in the drawer navigation bar list. The next section shows how to implement this interface to change the main content view after you select a project.

3. Process click events in the navigation bar

When you select a project in the list in the drawer navigation bar, the system calls the onItemClick () method in the OnItemClickListener interface to return it to OnItemClickListener (). What you want to do in the onItemClick () method depends on how you implement your application structure. In the following example, you can implement the following content: When you click the item in the list item in the navigation bar of the drawer, a different Fragment will be inserted in the content view. (The id of FrameLayout is R. id. content_frame ).

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

4. Listen to events that open or close the drawer navigation bar

To listen for opening and closing events in the drawer, call setDrawerListener () in your DrawerLayout and input a DrawerLayout. DrawerListener interface. This interface provides a return method for the drawer navigation bar, such as onDrawerOpened () and onDrawerClosed ().

However, except for the implementation of DrawerLayout. in addition to the DrawerListener interface, if your Activity contains ActionBar, You can inherit the ActionBarDrawerToggle class because the ActionBarDrawerToggle class implements DrawerLayout. the DrawerListener interface, so you can still rewrite these methods, but it also helps the interaction between the ActionBar icon and the drawer.

As discussed in the drawer navigation design guide, you should modify the ActionBar content when the drawer is visible. For example, you should change the title, and remove the list items related to the main content attempt. The following code demonstrates how to instantiate the ActionBarDrawerToggle class and rewrite the callback method in DrawerLayout. DrawerListener to achieve this purpose:

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 parameters of the ActionBarDrawerToggle constructor and sets other steps required for interacting with the operation bar icon.

5. How to open or close the drawer navigation bar through the application icon

You can open and close the drawer navigation bar with a gesture from or toward the left edge of the screen, but if you are using the action bar ), you should also allow users to open or close the drawer navigation bar by touching the application icon. The application icon also applies a Special icon to indicate the existence of the drawer. You can also implement these actions by implementing the ActionBarDrawerToggle mentioned in the previous section.

To make ActionBarDrawerToggle take effect, you will need to create an instance of ActionBarDrawerToggle and its constructor. The following parameters are required:

• Activity holding the drawer
• A DrawerLayout
• Used as a drawable resource for drawing drawer indicators. Here we will provide an official android icon package: Android_Design_Icons_20130926.zip.
• String resource used to describe the "open drawer" Operation
• String resource used to describe the "Close drawer" Operation

Finally, whether or not you have created a subclass of ActionBarDrawerToggle as the listener of the drawer, you still need to call ActionBarDrawerToggle in several places throughout the lifecycle of the Activity:

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

At the end of the tutorial, I provided the project's:DrawerLayout_sample.rarHope this tutorial can help you.

 

 

BOB

2016-09-03