关于android抽屉，navigation drawer

最近在做的一个项目需要用到一个侧边栏，我留意到了这玩意，但是这玩意是五月份才发布的，国内资料比较少。找来找去也没找到什么。就从官方下了一个例子，对着例子看，在自己项目中改来改去，把项目改的报错不断，也没弄懂什么原理，最后导致项目运行不起来了。我索性就仔细研究下这个抽屉，先自己对着官方的demo做.官方的开发页是：

http://developer.android.com/design/patterns/navigation-drawer.html

这个东西主要的原理就是左边是一个ListView，右边是一个FrameLayout.(就是主内容)：

看下这个文件：

activity_main.xml：

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

    <!-- As the main content view, the view below consumes the entire
         space available using match_parent in both dimensions. -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- android:layout_gravity="start" tells DrawerLayout to treat
         this as a sliding drawer on the left side for left-to-right
         languages and on the right side for right-to-left languages.
         The drawer is given a fixed width in dp and extends the full height of
         the container. A solid background is used for contrast
         with the content view. -->
    <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>

再来一个左边侧边栏的各个项的配置：

drawer_list_item.xml：

<!--
  Copyright 2013 The Android Open Source Project

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  -->

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceListItemSmall"
    android:gravity="center_vertical"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:textColor="#fff"
    android:background="?android:attr/activatedBackgroundIndicator"
    android:minHeight="?android:attr/listPreferredItemHeightSmall"/>

主内容配置文件：

fragment_planet.xml：

<!--
  Copyright 2013 The Android Open Source Project

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  -->

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:gravity="center"
    android:padding="32dp" />

如果使用菜单的话，加入actionBar的menu:(在menu文件夹下)

main.xml:

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:id="@+id/action_websearch"
          android:icon="@drawable/action_search"
          android:title="@string/action_websearch"
          android:showAsAction="ifRoom|withText" />

</menu>

再贴上String.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">drawerexample</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
	 <string-array name="planets_array">
        <item>Mercury</item>
        <item>Venus</item>
        <item>Earth</item>
        <item>Mars</item>
        <item>Jupiter</item>
        <item>Saturn</item>
        <item>Uranus</item>
        <item>Neptune</item>
    </string-array>
     <string name="drawer_open">Open navigation drawer</string>
     <string name="drawer_close">Close navigation drawer</string>
     <string name="action_websearch">Web search</string>
     <string name="app_not_available">Sorry, there\'s no web browser available</string>
</resources>

最后就是主activity了：

MainActivity.java

package com.example.drawerexample;


import java.util.Locale;



import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.SearchManager;
import android.content.Intent;
import android.content.res.Configuration;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.Toast;

@SuppressLint("NewApi")
public class MainActivity extends Activity {
	private CharSequence mTitle;
	private CharSequence mDrawerTitle;
	private String[] mPlanetTitles;
	private ListView mDrawerList;
	private DrawerLayout mDrawerLayout;
	private ActionBarDrawerToggle mDrawerToggle;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		mTitle = mDrawerTitle = getTitle();
		mPlanetTitles = getResources().getStringArray(R.array.planets_array);
		mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
		mDrawerList = (ListView) findViewById(R.id.left_drawer);
		// 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
		mDrawerList.setAdapter(new ArrayAdapter<String>(this, 
				R.layout.drawer_list_item,mPlanetTitles));
		mDrawerList.setOnItemClickListener(new DrawerItemClickListener());
		
		// enable ActionBar app icon to behave as action to toggle nav drawer
		getActionBar().setDisplayHomeAsUpEnabled(true);
		 getActionBar().setHomeButtonEnabled(true);
		 
		 // ActionBarDrawerToggle ties together the the proper interactions
	     // between the sliding drawer and the action bar app icon
		 mDrawerToggle = new ActionBarDrawerToggle(
				 this,                  /* host Activity */
	             mDrawerLayout,         /* DrawerLayout object */
	             R.drawable.ic_drawer,  /* nav drawer image to replace 'Up' caret */
	             R.string.drawer_open,  /* "open drawer" description for accessibility */
	             R.string.drawer_close 
				 ){
			 public void onDrawerClosed(View view){
				 getActionBar().setTitle(mTitle);
				 invalidateOptionsMenu();// creates call to onPrepareOptionsMenu()
			 }
			 
			 public void onDrawerOpened(View drawerView){
				 getActionBar().setTitle(mDrawerTitle);
				 invalidateOptionsMenu();// creates call to onPrepareOptionsMenu()
			 }
		 };
		 mDrawerLayout.setDrawerListener(mDrawerToggle);
		 
		 if(savedInstanceState == null){
			 selectItem(0);
		 }
	}

	//action bar 
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return super.onCreateOptionsMenu(menu);
	}
	
	/* 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);
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		if(mDrawerToggle.onOptionsItemSelected(item)){
			return true;
		}
		// Handle action buttons
		switch (item.getItemId()) {
		case R.id.action_websearch:
			Intent intent = new Intent(Intent.ACTION_WEB_SEARCH);
			intent.putExtra(SearchManager.QUERY, getActionBar().getTitle());
			if(intent.resolveActivity(getPackageManager()) != null) {
				startActivity(intent);
			} else {
				Toast.makeText(this, R.string.app_not_available, Toast.LENGTH_LONG).show();
			}
			return true;
			
		default:
			return super.onOptionsItemSelected(item);
		}
	}
	
	// The click listner for ListView in the navigation drawe 
	private class DrawerItemClickListener implements ListView.OnItemClickListener{
		@Override
		public void onItemClick(AdapterView<?> parent, View view, int position,
				long id) {
			selectItem(position);
		}
	}
	
	private void selectItem(int position){
		// update the main content by replacing fragments
		Fragment fragment = new PlanetFragment();
		Bundle args = new Bundle();
		args.putInt(PlanetFragment.ARG_PLANET_NUMBER,position);
		fragment.setArguments(args);
		
		FragmentManager fragmentManager = getFragmentManager();
		fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();
		
		 // update selected item and title, then close the drawer
		mDrawerList.setItemChecked(position, true);
		setTitle(mPlanetTitles[position]);
		mDrawerLayout.closeDrawer(mDrawerList);
	}
	
	@Override
	public void setTitle(CharSequence title) {
		mTitle = title;
		getActionBar().setTitle(mTitle);
	}
	
	/**
     * When using the ActionBarDrawerToggle, you must call it during
     * onPostCreate() and onConfigurationChanged()...
     */
	 @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);
	        // Pass any configuration change to the drawer toggls
	        mDrawerToggle.onConfigurationChanged(newConfig);
	    }
	

	/**
	 * FragMent出现在content_frame
	 */
	 public static class PlanetFragment extends Fragment {
	        public static final String ARG_PLANET_NUMBER = "planet_number";

	        public PlanetFragment() {
	            // Empty constructor required for fragment subclasses
	        }

			@Override
			public View onCreateView(LayoutInflater inflater,
				ViewGroup container, Bundle savedInstanceState) {
				View rootView = inflater.inflate(R.layout.fragment_planet, container,false);
				int i = getArguments().getInt(ARG_PLANET_NUMBER);
				String planet = getResources().getStringArray(R.array.planets_array)[i];
				int imageId = getResources().getIdentifier(planet.toLowerCase(Locale.getDefault()), 
						"drawable", getActivity().getPackageName());
				((ImageView) rootView.findViewById(R.id.image)).setImageResource(imageId);
				getActivity().setTitle(planet);
				return rootView;
			}
	        
	 }
}