Navigation Drawer是从屏幕的左侧滑出,显示应用导航的视图,覆盖在主视图上。
Navigation Drawer是Android团对在2013 google IO大会期间更新的Support库(V13)中新加入的重要的功能。
实现现Navigation Drawer需要使用最新支持库(V13)的DrawerLayout。Navigation Drawer的设计指南请参考
Navigation Drawer design guide,但是当时需要的最低版本14,这就限制了我们的使用,当然可以使用来实现兼容,
这并不是最好的,如今谷歌退出V7来实现兼容低版本,我们不需要额外的其他代码,如果你的sdk更新到22.6.2的话,
在创建一个新的项目的时候,在最后一步创建一个Activity的时候,会让你选择一个主题,其中有一项就是
Navigation Drawer,选中然后创建项目。
我们接下来分析一下,项目内容:
1、布局内容
- <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- android:id="@+id/drawer_layout"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- tools:context="com.example.androidsampe1.MainActivity" >
- <FrameLayout
- android:id="@+id/container"
- android:layout_width="match_parent"
- android:layout_height="match_parent" />
- <fragment
- android:id="@+id/navigation_drawer"
- android:name="com.example.androidsampe1.NavigationDrawerFragment"
- android:layout_width="@dimen/navigation_drawer_width"
- android:layout_height="match_parent"
- android:layout_gravity="left" />
- </android.support.v4.widget.DrawerLayout>
DrawerLayout作为跟布局,要求全屏,有两个子布局,第一个是显示内容,第二个是左边抽屉内容,这里是使用一个
fragment,也可以使用其他的View。
主界面:
MainActivity.java
- package com.example.androidsampe1;
- import android.app.Activity;
- import android.support.v7.app.ActionBarActivity;
- import android.support.v7.app.ActionBar;
- import android.support.v4.app.Fragment;
- import android.support.v4.app.FragmentManager;
- import android.os.Bundle;
- import android.view.LayoutInflater;
- import android.view.Menu;
- import android.view.MenuItem;
- import android.view.View;
- import android.view.ViewGroup;
- import android.support.v4.widget.DrawerLayout;
- import android.widget.TextView;
- public class MainActivity extends ActionBarActivity
- implements NavigationDrawerFragment.NavigationDrawerCallbacks {
- /**
- * 这个Fragment管理行为、交互和演示导航的抽屉
- * Fragment managing the behaviors, interactions and presentation of the navigation drawer.
- */
- private NavigationDrawerFragment mNavigationDrawerFragment;
- /**
- * 用来存储上一个屏幕的标题
- * Used to store the last screen title. For use in {@link #restoreActionBar()}.
- */
- private CharSequence mTitle;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- mNavigationDrawerFragment = (NavigationDrawerFragment)
- getSupportFragmentManager().findFragmentById(R.id.navigation_drawer);
- mTitle = getTitle();
- // Set up the drawer. 建立抽屉
- mNavigationDrawerFragment.setUp(
- R.id.navigation_drawer,
- (DrawerLayout) findViewById(R.id.drawer_layout));
- }
- //这里切换布局的地方,根据position,我们可以选择要替换的fragment
- @Override
- public void onNavigationDrawerItemSelected(int position) {
- // update the main content by replacing fragments
- FragmentManager fragmentManager = getSupportFragmentManager();
- fragmentManager.beginTransaction()
- .replace(R.id.container, PlaceholderFragment.newInstance(position + 1))
- .commit();
- }
- public void onSectionAttached(int number) {
- switch (number) {
- case 1:
- mTitle = getString(R.string.title_section1);
- break;
- case 2:
- mTitle = getString(R.string.title_section2);
- break;
- case 3:
- mTitle = getString(R.string.title_section3);
- break;
- }
- }
- public void restoreActionBar() {
- ActionBar actionBar = getSupportActionBar();
- actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
- actionBar.setDisplayShowTitleEnabled(true);
- actionBar.setTitle(mTitle);
- }
- @Override
- public boolean onCreateOptionsMenu(Menu menu) {
- if (!mNavigationDrawerFragment.isDrawerOpen()) {
- // Only show items in the action bar relevant to this screen
- // if the drawer is not showing. Otherwise, let the drawer
- // decide what to show in the action bar.
- getMenuInflater().inflate(R.menu.main, menu);
- restoreActionBar();
- return true;
- }
- return super.onCreateOptionsMenu(menu);
- }
- @Override
- public boolean onOptionsItemSelected(MenuItem item) {
- // Handle action bar item clicks here. The action bar will
- // automatically handle clicks on the Home/Up button, so long
- // as you specify a parent activity in AndroidManifest.xml.
- int id = item.getItemId();
- if (id == R.id.action_settings) {
- return true;
- }
- return super.onOptionsItemSelected(item);
- }
- /**
- * A placeholder fragment containing a simple view.
- */
- public static class PlaceholderFragment extends Fragment {
- /**
- * The fragment argument representing the section number for this
- * fragment.
- */
- private static final String ARG_SECTION_NUMBER = "section_number";
- /**
- * Returns a new instance of this fragment for the given section
- * number.
- */
- public static PlaceholderFragment newInstance(int sectionNumber) {
- PlaceholderFragment fragment = new PlaceholderFragment();
- Bundle args = new Bundle();
- args.putInt(ARG_SECTION_NUMBER, sectionNumber);
- fragment.setArguments(args);
- return fragment;
- }
- public PlaceholderFragment() {
- }
- @Override
- public View onCreateView(LayoutInflater inflater, ViewGroup container,
- Bundle savedInstanceState) {
- View rootView = inflater.inflate(R.layout.fragment_main, container, false);
- TextView textView = (TextView) rootView.findViewById(R.id.section_label);
- textView.setText(Integer.toString(getArguments().getInt(ARG_SECTION_NUMBER)));
- return rootView;
- }
- @Override
- public void onAttach(Activity activity) {
- super.onAttach(activity);
- ((MainActivity) activity).onSectionAttached(
- getArguments().getInt(ARG_SECTION_NUMBER));
- }
- }
- }
NavigationDrawerFragment.java --左边导航抽屉的布局
- package com.example.androidsampe1;
- import android.support.v7.app.ActionBarActivity;
- import android.app.Activity;
- import android.support.v7.app.ActionBar;
- import android.support.v4.app.Fragment;
- import android.support.v4.app.ActionBarDrawerToggle;
- import android.support.v4.view.GravityCompat;
- import android.support.v4.widget.DrawerLayout;
- import android.content.SharedPreferences;
- import android.content.res.Configuration;
- import android.os.Bundle;
- import android.preference.PreferenceManager;
- import android.view.LayoutInflater;
- import android.view.Menu;
- import android.view.MenuInflater;
- import android.view.MenuItem;
- import android.view.View;
- import android.view.ViewGroup;
- import android.widget.AdapterView;
- import android.widget.ArrayAdapter;
- import android.widget.ListView;
- import android.widget.Toast;
- /**
- * Fragment used for managing interactions for and presentation of a navigation drawer.
- * See the <a href="https://developer.android.com/design/patterns/navigation-drawer.html#Interaction">
- * design guidelines</a> for a complete explanation of the behaviors implemented here.
- */
- public class NavigationDrawerFragment extends Fragment {
- /**
- * Remember the position of the selected item.
- */
- private static final String STATE_SELECTED_POSITION = "selected_navigation_drawer_position";
- /**
- * Per the design guidelines, you should show the drawer on launch until the user manually
- * expands it. This shared preference tracks this.
- */
- private static final String PREF_USER_LEARNED_DRAWER = "navigation_drawer_learned";
- /**
- * A pointer to the current callbacks instance (the Activity).
- */
- private NavigationDrawerCallbacks mCallbacks;
- /**
- * Helper component that ties the action bar to the navigation drawer.
- * 这个导航抽屉监听事件的回调接口,监听打开和关闭
- */
- private ActionBarDrawerToggle mDrawerToggle;
- private DrawerLayout mDrawerLayout;
- private ListView mDrawerListView;
- private View mFragmentContainerView;
- private int mCurrentSelectedPosition = 0;
- private boolean mFromSavedInstanceState;
- private boolean mUserLearnedDrawer;
- public NavigationDrawerFragment() {
- }
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- // Read in the flag indicating whether or not the user has demonstrated awareness of the
- // drawer. See PREF_USER_LEARNED_DRAWER for details.
- SharedPreferences sp = PreferenceManager.getDefaultSharedPreferences(getActivity());
- mUserLearnedDrawer = sp.getBoolean(PREF_USER_LEARNED_DRAWER, false);
- if (savedInstanceState != null) {
- mCurrentSelectedPosition = savedInstanceState.getInt(STATE_SELECTED_POSITION);
- mFromSavedInstanceState = true;
- }
- // Select either the default item (0) or the last selected item.
- selectItem(mCurrentSelectedPosition);
- }
- @Override
- public void onActivityCreated (Bundle savedInstanceState) {
- super.onActivityCreated(savedInstanceState);
- // Indicate that this fragment would like to influence the set of actions in the action bar.
- setHasOptionsMenu(true);
- }
- @Override
- public View onCreateView(LayoutInflater inflater, ViewGroup container,
- Bundle savedInstanceState) {
- mDrawerListView = (ListView) inflater.inflate(
- R.layout.fragment_navigation_drawer, container, false);
- mDrawerListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
- @Override
- public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
- selectItem(position);
- }
- });
- mDrawerListView.setAdapter(new ArrayAdapter<String>(
- getActionBar().getThemedContext(),
- android.R.layout.simple_list_item_1,
- android.R.id.text1,
- new String[]{
- getString(R.string.title_section1),
- getString(R.string.title_section2),
- getString(R.string.title_section3),
- }));
- mDrawerListView.setItemChecked(mCurrentSelectedPosition, true);
- return mDrawerListView;
- }
- public boolean isDrawerOpen() {
- return mDrawerLayout != null && mDrawerLayout.isDrawerOpen(mFragmentContainerView);
- }
- /**
- * Users of this fragmentv must call this method to set up the naigation drawer interactions.
- *
- * @param fragmentId The android:id of this fragment in its activity's layout.
- * @param drawerLayout The DrawerLayout containing this fragment's UI.
- */
- public void setUp(int fragmentId, DrawerLayout drawerLayout) {
- mFragmentContainerView = getActivity().findViewById(fragmentId);
- mDrawerLayout = drawerLayout;
- // set a custom shadow that overlays the main content when the drawer opens
- mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
- // set up the drawer's list view with items and click listener
- ActionBar actionBar = getActionBar();
- actionBar.setDisplayHomeAsUpEnabled(true);
- actionBar.setHomeButtonEnabled(true);
- // ActionBarDrawerToggle ties together the the proper interactions
- // between the navigation drawer and the action bar app icon.
- mDrawerToggle = new ActionBarDrawerToggle(
- getActivity(), /* host Activity */
- mDrawerLayout, /* DrawerLayout object */
- R.drawable.ic_drawer, /* nav drawer image to replace 'Up' caret */
- R.string.navigation_drawer_open, /* "open drawer" description for accessibility */
- R.string.navigation_drawer_close /* "close drawer" description for accessibility */
- ) {
- @Override
- public void onDrawerClosed(View drawerView) {
- super.onDrawerClosed(drawerView);
- if (!isAdded()) {
- return;
- }
- getActivity().supportInvalidateOptionsMenu(); // calls onPrepareOptionsMenu()
- }
- @Override
- public void onDrawerOpened(View drawerView) {
- super.onDrawerOpened(drawerView);
- if (!isAdded()) {
- return;
- }
- if (!mUserLearnedDrawer) {
- //存储当前的标志位
- // The user manually opened the drawer; store this flag to prevent auto-showing
- // the navigation drawer automatically in the future.
- mUserLearnedDrawer = true;
- SharedPreferences sp = PreferenceManager
- .getDefaultSharedPreferences(getActivity());
- sp.edit().putBoolean(PREF_USER_LEARNED_DRAWER, true).commit();
- }
- getActivity().supportInvalidateOptionsMenu(); // calls onPrepareOptionsMenu()
- }
- };
- // If the user hasn't 'learned' about the drawer, open it to introduce them to the drawer,
- // per the navigation drawer design guidelines.
- if (!mUserLearnedDrawer && !mFromSavedInstanceState) {
- mDrawerLayout.openDrawer(mFragmentContainerView);
- }
- // Defer code dependent on restoration of previous instance state.
- mDrawerLayout.post(new Runnable() {
- @Override
- public void run() {
- mDrawerToggle.syncState();
- }
- });
- mDrawerLayout.setDrawerListener(mDrawerToggle);
- }
- private void selectItem(int position) {
- mCurrentSelectedPosition = position;
- if (mDrawerListView != null) {
- mDrawerListView.setItemChecked(position, true);
- }
- if (mDrawerLayout != null) {
- mDrawerLayout.closeDrawer(mFragmentContainerView);
- }
- if (mCallbacks != null) {
- mCallbacks.onNavigationDrawerItemSelected(position);
- }
- }
- @Override
- public void onAttach(Activity activity) {
- super.onAttach(activity);
- try {
- mCallbacks = (NavigationDrawerCallbacks) activity;
- } catch (ClassCastException e) {
- throw new ClassCastException("Activity must implement NavigationDrawerCallbacks.");
- }
- }
- @Override
- public void onDetach() {
- super.onDetach();
- mCallbacks = null;
- }
- @Override
- public void onSaveInstanceState(Bundle outState) {
- super.onSaveInstanceState(outState);
- outState.putInt(STATE_SELECTED_POSITION, mCurrentSelectedPosition);
- }
- @Override
- public void onConfigurationChanged(Configuration newConfig) {
- super.onConfigurationChanged(newConfig);
- // Forward the new configuration the drawer toggle component.
- mDrawerToggle.onConfigurationChanged(newConfig);
- }
- @Override
- public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
- // If the drawer is open, show the global app actions in the action bar. See also
- // showGlobalContextActionBar, which controls the top-left area of the action bar.
- if (mDrawerLayout != null && isDrawerOpen()) {
- inflater.inflate(R.menu.global, menu);
- showGlobalContextActionBar();
- }
- super.onCreateOptionsMenu(menu, inflater);
- }
- @Override
- public boolean onOptionsItemSelected(MenuItem item) {
- <span style="white-space:pre"> </span>//监听Home按钮,Home指的是ActionBar左边的按钮
- if (mDrawerToggle.onOptionsItemSelected(item)) {
- return true;
- }
- if (item.getItemId() == R.id.action_example) {
- Toast.makeText(getActivity(), "Example action.", Toast.LENGTH_SHORT).show();
- return true;
- }
- return super.onOptionsItemSelected(item);
- }
- /**
- * Per the navigation drawer design guidelines, updates the action bar to show the global app
- * 'context', rather than just what's in the current screen.
- */
- private void showGlobalContextActionBar() {
- ActionBar actionBar = getActionBar();
- actionBar.setDisplayShowTitleEnabled(true);
- actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
- actionBar.setTitle(R.string.app_name);
- }
- private ActionBar getActionBar() {
- return ((ActionBarActivity) getActivity()).getSupportActionBar();
- }
- /**
- * Callbacks interface that all activities using this fragment must implement.
- */
- public static interface NavigationDrawerCallbacks {
- /**
- * Called when an item in the navigation drawer is selected.
- */
- void onNavigationDrawerItemSelected(int position);
- }
- }
总的来说,框架在V7中已经给出了,我们只需要修改左边导航抽屉的显示内容,已经主界面切换的Fragment就可以了,
这样减少了开发的难度,提高开发效率。