google 原生态 抽屉式侧滑菜单 Android DrawerLayout 布局的使用介绍

  

  
其实谷歌官方已经给出了一个 关于DrawerLayout 使用的例子，只是处于 国内不能访问谷歌官网，看不到详细文档说明，所以在此 简单记录下  侧滑 抽屉式菜单的使用说明

1.由于 DrawerLayout 需要 android.support.v4 包的支持，所以，你的libs 下面不要包含 这个包。
2.首先布局文件如下
[java] view plaincopy在CODE上查看代码片派生到我的代码片
<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/frame_content"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent" >  
    </FrameLayout>  
  
    <!-- the navigetion view -->  
  
    <ListView  
        android:id="@+id/drawer_list"  
        android:layout_width="240dp"  
        android:layout_height="match_parent"  
        android:layout_gravity="start"  
        android:background="#9999cc"  
        android:choiceMode="singleChoice"  
        android:divider="@android:color/transparent"  
        android:dividerHeight="0dp" >  
    </ListView>  
  
</android.support.v4.widget.DrawerLayout>  

注意：1.布局中的ListView 就是就是侧滑菜单 布局容器，其中 android:layout_gravity 属性必须赋值。 目的是侧滑菜单的显示位置，官方推荐使用“start”-----左侧  "end"----右侧
 不推荐使用 “left”---左侧，“right”---右侧。
            2.FrameLayout 显示主内容部分。
其实到了这一步就已经实现了侧滑菜单效果了，可以运行试试，只是现在的侧滑菜单里面没有任何元素。
3.代码编写如下：
[java] view plaincopy在CODE上查看代码片派生到我的代码片
package com.example.drawlayout1;  
  
import android.os.Bundle;  
import android.app.Activity;  
import android.app.Fragment;  
import android.app.FragmentManager;  
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.widget.AdapterView;  
import android.widget.AdapterView.OnItemClickListener;  
import android.widget.ArrayAdapter;  
import android.widget.ListView;  
  
public class MainActivity extends Activity implements OnItemClickListener {  
  
    private DrawerLayout mDrawerLayout;  
    private ListView mDrawerList;  
    private String[] menuLists;  
    private ArrayAdapter<String> adapter;  
    private ActionBarDrawerToggle mDrawerToggle;  
    private String titleString;  
    private int iSelect = -1;  
    private View heandrView;  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
  
        /*get the application title*/  
        titleString = (String) getTitle();  
          
        heandrView = LayoutInflater.from(this).inflate(R.layout.home_menu_list_header, null);  
  
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);  
        mDrawerList = (ListView) findViewById(R.id.drawer_list);  
        mDrawerList.addHeaderView(heandrView);  
        menuLists = getResources().getStringArray(R.array.menu_content);  
  
          
          
        adapter = new ArrayAdapter<String>(this,  
                android.R.layout.simple_list_item_1, menuLists);  
        mDrawerList.setAdapter(adapter);  
        mDrawerList.setOnItemClickListener(this);  
  
        /*set the shadow for drawer at start(left) or end(right)*/  
        mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow,  
                GravityCompat.START);  
  
        /*show the home icon*/  
        getActionBar().setDisplayHomeAsUpEnabled(true);  
        /*make sure the home icon enable click*/  
        getActionBar().setHomeButtonEnabled(true);  
  
        /*set the application ActionBar title changes*/  
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,  
                R.drawable.ic_drawer, R.string.drawer_open,  
                R.string.drawer_close) {  
            @Override  
            public void onDrawerOpened(View drawerView) {  
                super.onDrawerOpened(drawerView);  
                getActionBar().setTitle(R.string.please);  
            }  
  
            @Override  
            public void onDrawerClosed(View drawerView) {  
                super.onDrawerClosed(drawerView);  
                if (-1 == iSelect) {  
                    getActionBar().setTitle(titleString);  
                } else {  
                    getActionBar().setTitle(menuLists[iSelect-1]);  
                }  
            }  
        };  
        /*set the DrawerLayout Listener*/  
        mDrawerLayout.setDrawerListener(mDrawerToggle);  
    }  
  
    @Override  
    public boolean onCreateOptionsMenu(Menu menu) {  
        // Inflate the menu; this adds items to the action bar if it is present.  
        getMenuInflater().inflate(R.menu.main, menu);  
        return true;  
    }  
      
    @Override  
    public boolean onOptionsItemSelected(MenuItem item) {  
        /*make sure the home icon enable click and display the DrawerLayout*/  
        if (mDrawerToggle.onOptionsItemSelected(item)){  
            return true;  
        }  
        return super.onOptionsItemSelected(item);  
    }  
  
    @Override  
    public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {  
        Fragment contentFragment = new ContentFragment();  
        Bundle args = new Bundle();  
        iSelect = arg2;  
        if (0 == iSelect){  
            iSelect = 1;  
        }  
        args.putString("text", menuLists[iSelect-1]);  
        contentFragment.setArguments(args);  
  
        FragmentManager fm = getFragmentManager();  
        fm.beginTransaction().replace(R.id.frame_content, contentFragment)  
                .commit();  
        mDrawerLayout.closeDrawer(mDrawerList);  
    }  
  
      
    /** 
     * 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);  
    }  
  
}  
代码里边有注解，就不一一解释了。
[java] view plaincopy在CODE上查看代码片派生到我的代码片
@Override  
    public boolean onOptionsItemSelected(MenuItem item) {  
        /*make sure the home icon enable click and display the DrawerLayout*/  
        if (mDrawerToggle.onOptionsItemSelected(item)){  
            return true;  
        }  
        return super.onOptionsItemSelected(item);  
    }  

这段代码的目的：点击ActionBar导航栏上的Home 按键弹出和关闭 DrawerLayout 侧滑菜单。

[java] view plaincopy在CODE上查看代码片派生到我的代码片
/** 
     * 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);  
    }  

这段代码的目的：谷歌官方极力推荐重写两个方法，第一个方法 实现ActionBar 的Home键和 DrawerLayout 抽屉菜单关联，并且ActionBar的Home 有动画效果。
第二个方法 是在横屏的时候调用。保存状态。
[java] view plaincopy在CODE上查看代码片派生到我的代码片
mDrawerList.setOnItemClickListener(this);  

这段代码是添加DrawerLayout 抽屉菜单 里面元素的点击事件，代码中实现点击不同元素，替换不同FragMent。

[java] view plaincopy在CODE上查看代码片派生到我的代码片
/*set the application ActionBar title changes*/  
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,  
                R.drawable.ic_drawer, R.string.drawer_open,  
                R.string.drawer_close) {  
            @Override  
            public void onDrawerOpened(View drawerView) {  
                super.onDrawerOpened(drawerView);  
                getActionBar().setTitle(R.string.please);  
            }  
  
            @Override  
            public void onDrawerClosed(View drawerView) {  
                super.onDrawerClosed(drawerView);  
                if (-1 == iSelect) {  
                    getActionBar().setTitle(titleString);  
                } else {  
                    getActionBar().setTitle(menuLists[iSelect-1]);  
                }  
            }  
        };  
        /*set the DrawerLayout Listener*/  
        mDrawerLayout.setDrawerListener(mDrawerToggle);  


这段代码是 添加侧滑 菜单 DrawerLayout 的打开关闭监听事件，在打开关闭方法中重写 自己需要实现的效果。