DrawerLayout 官方创建导航抽屉示例

来源：互联网发布：iphone无移动网络编辑：程序博客网时间：2024/04/29 08:50

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

这里写图片描述

这个简单示例对比起之前用的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);}@Overridepublic 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);    }    ...}

转载请注明出处：http://blog.csdn.net/BigHulk/article/details/45034649

详细完整代码，可参考官方Demo地址：
http://developer.android.com/shareables/training/NavigationDrawer.zip
整个官方Demo打包，CSDN下载地址：
http://download.csdn.net/detail/bighulk/8591661

0 0