DrawerLayout 官方创建导航抽屉示例

最新推荐文章于 2025-05-10 16:56:50 发布

翻译最新推荐文章于 2025-05-10 16:56:50 发布 · 1.1k 阅读

标签

#侧边滑动 #官方API #Drawer #layout

Android组件专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何使用DrawerLayout实现Android应用中的导航抽屉功能。包括布局配置、ListView初始化、抽屉点击事件处理、抽屉开关监听及actionbar图标联动等步骤。

先体验下官方示例运行效果图：

这里写图片描述

这个简单示例对比起之前用的SlideMenu，在侧边滑动上，还是不错的。官方组件，API提供。下面直接进入主题：

官方示例地址：
https://developer.android.com/training/implementing-navigation/nav-drawer.html
想看官方提示的可以直入

下面抛砖引玉，对官方示例简单翻译标记，做个记录：
简单说说如何用android.support.v4.jar里面提供的DrawerLayout实现一个导航抽屉功能。（创建工程得有android.support.v4.jar）

1、创建一个Drawer Layout：

从布局入手，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" >

    <!-- 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="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#111"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp" />

</android.support.v4.widget.DrawerLayout>

上面的布局中，需要注意的几个重要地方：

主布局根节点得是DrawerLayout 。里面可以像上面布局，嵌套了两个子View，一个子View是用于显示主体内容的 FrameLayout （示例是通过加入Fragment 展示主体内容），另一个子View是用于显示抽屉内容的ListView。
显示主体的View（上面FrameLayout）必须是 DrawerLayout 下第一个子View，这样，另一个显示抽屉的子View（ListView）才能在它上面。
显示主体的View宽高设置要匹配父View（上面DrawerLayout），这样抽屉隐藏时，主体内容便可完全显示。
抽屉View（上面ListView）必须设置好android:layout_gravity属性，为了支持从右到左布局，这个属性的值最好用“start”代替“left”，这样遇到从右到左的布局情况，抽屉便出现在右边。
抽屉View（上面ListView），用dp单位制定其宽，其高的设置跟父View（ DrawerLayout ）匹配，宽的设置不要超过320dp，这样用户随时都能看到主体内容的一部分。

2、初始化用于显示抽屉内容的LsitView：

填充ListView内容，主要看你抽屉想显示什么内容。通常左边抽屉都是个ListView，下面是用ArrayAdapter 方式简单填充ListView要显示的内容，用于Demo展示：

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

        ...
    }
}

3、处理抽屉点击事件（这里就是ListView的点击事件）：

示例就是，ListView点击哪个，通过Fragment定义好要显示的内容，这里还切换了action bar Title要显示的内容：

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

@Override
public void setTitle(CharSequence title) {
    mTitle = title;
    getActionBar().setTitle(mTitle);
}

4、监听抽屉打开及关闭事件：

这个可以实现DrawerLayout.DrawerListener接口，通过setDrawerListener()设置好抽屉的监听，接口提供了监听到抽屉打开时回调onDrawerOpened()函数，关闭时回调onDrawerClosed()函数。

如果你的Activity使用了action bar，那你可以通过继承ActionBarDrawerToggle 类，这个类已经实现了DrawerLayout.DrawerListener 接口，你还是可以通过复写上面提到的回调函数，这个类主要是已经协调好action bar图标与抽屉的显示。
示例就是采用这个。

官方示列如下，利用 ActionBarDrawerToggle，复写DrawerLayout.DrawerListener 的onDrawerClosed及onDrawerOpened方法，在监听到打开或者关闭方法中，设置action bar 的title，通过invalidateOptionsMenu()，回调
onPrepareOptionsMenu(Menu menu)

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);
                // creates call to onPrepareOptionsMenu()
                invalidateOptionsMenu(); 
            }

     /** Called when a drawer has settled in a completely
     open state. */
     public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                getActionBar().setTitle(mDrawerTitle);
                // creates call to onPrepareOptionsMenu()
                invalidateOptionsMenu(); 
            }
        };

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

5、通过action bar 图标，点击控制打开或者关闭抽屉：

用户可以通过侧边滑动，打开或者关闭导航抽屉，也可以通过action bar 的图标。也可以自定义action bar 图标（类似Menu或者箭头），可以通过监听打开或者关闭，自定义要实现的东西。

创建一个ActionBarDrawerToggle实例，需要传入构造函数参数，所传参数需要遵循以下要求

Activity 上下文
DrawerLayout组件
设定作为抽屉指示的图标
打开抽屉字符串描述
关闭抽屉字符串描述

下面需要注意的是，如果你用 ActionBarDrawerToggle 作为你抽屉的监听器，那么你需要在Activity生命周期的几个地方调用 ActionBarDrawerToggle ，进行些设置。

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 */ 
                /* DrawerLayout object */              
                mDrawerLayout,
                /*自定义抽屉指示图标，就是效果图的左上角那个图标*/
                /* nav drawer icon to replace 'Up' caret */
                R.drawable.ic_drawer,  
                /* "open drawer" description */
                R.string.drawer_open,  
                /* "close drawer" description */
                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);
            }

            /** 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
        // 这里就是通过ActionBarDrawerToggle，协同action bar
        // 图标点击，控制抽屉打开或关闭
        if (mDrawerToggle.onOptionsItemSelected(item)) {
          return true;
        }
        // Handle your other action bar items...

        return super.onOptionsItemSelected(item);
    }

    ...
}