Android开发之Navigationdrawer导航抽屉功能的实现（源代码分享）

 导航抽屉（navigationdrawer）是一个从屏幕左边滑入的面板，用于显示应用的主要导航项目。用户可以通过在屏幕左边缘滑入或者触摸操作栏的应用图标打开导航抽屉。导航抽屉覆盖在内容之上，但不覆盖操作栏。当导航抽屉完全打开后，操作栏的标题需要更换为应用的名称，而不是显示当前视图的名称，并且关闭所有和当前视图相关的操作按钮。操作栏的“更多操作”菜单按钮不需要关闭，以保证用户可以随时访问“设置”和“帮助”。下面我们就来实现导航抽屉的功能。

    

 Layout布局文件代码

 

<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/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"


        />
    <!-- The navigation drawer -->
    <ListView android:id="@+id/left_drawer"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:dividerHeight="1dp"
       android:background="#ffffff"/>
</android.support.v4.widget.DrawerLayout>

注意要点：

 

（1）主要视图(上述FrameLayout)必须为DrawerLayout中的第一个孩子,因为XML意味着z顺序和抽屉必须的内容。　　

（2）主要内容视图必须设置为匹配父视图的宽度和高度,因为它代表整个UI导航抽屉时隐藏。　　

（3）抽屉视图(上述ListView)必须指定它的水平重力与Android:layout_gravity属性。支持从右到左的语言(RTL),指定值与“开始”而不是“左”(右边的抽屉里出 现时,布局是RTL)。　　　

（4）抽屉视图指定宽度的dp单位和父视图的高度匹配。抽屉的宽度应不超过320 dp所以用户总是可以看到部分的主要内容。

（5）DrawerLayout必须成为布局的根节点

MainActivity的代码

 

package com.example.g07_navigationdrawer;

import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.os.Bundle;

import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.widget.DrawerLayout;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends Activity {
    private String[] mPlanetTitles; // listView的每一个item的名字
    private DrawerLayout mDrawerLayout;
    private ListView mDrawerList;
    private ActionBarDrawerToggle mDrawerToggle; // 用来监听DrawerLayout事件

    @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);
        // 为ListView添加适配器
        mDrawerList.setAdapter((ListAdapter) new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, mPlanetTitles));
        // 监听ListView的点击事件
        mDrawerList.setOnItemClickListener(new DrawerItemClickListener());
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        // 监听DrawerLayout的监听事件
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
                R.drawable.ic_launcher, R.string.app_name, R.string.app_name) {
            public void onDrawerClosed(View view) {
                super.onDrawerClosed(view);
                Toast.makeText(MainActivity.this, "抽屉关闭了", Toast.LENGTH_SHORT)
                        .show();
            }
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                Toast.makeText(MainActivity.this, "抽屉打开了", Toast.LENGTH_SHORT)
                        .show();
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);

    }

    private class DrawerItemClickListener implements
            ListView.OnItemClickListener {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position,
                long id) {
            // 根据ListView的被选中的选项切换界面布局
            Fragment fragment = new Fragment();
            FragmentManager fragmentManager = getFragmentManager();
            fragmentManager.beginTransaction()
                    .replace(R.id.content_frame, fragment).commit();
            mDrawerList.setItemChecked(position, true);
            // 给操作栏设置标题
            getActionBar().setTitle(mPlanetTitles[position]);
            mDrawerLayout.closeDrawer(mDrawerList);
        }
    }
}