目录(?)[-]

  1. 创建一个导航抽屉
    1. 创建抽屉布局
    2. 初始化抽屉列表
    3. 处理导航项选点击事件
    4. 监听导航抽屉打开和关闭事件
    5. 点击应用图标来打开和关闭导航抽屉

创建一个导航抽屉

导航抽屉是一个位于屏幕左侧边缘用来显示应用程序导航项的一个面板。导航抽屉在大部分时间是不显示的,但两种情况下会进行显示:一是发生从屏幕左侧边缘向右滑的手势,二是点击了工具栏中应用图标。导航抽屉在Support Library  中提供支持,在使用导航抽屉时,需要符合导航抽屉设计原则(Navigation Drawer),看看你是否有必要创建导航抽屉 。
 

创建抽屉布局

如果你要添加一个导航抽屉,需要用DrawerLayout来作为用户界面的根视图,DrawerLayout视图下需放置两个子视图,一个是用来显示显示屏幕的主体内容(导航抽屉隐藏的时候),一个是用来显示导航抽屉。
 
用来显示屏幕主体内容的视图一般是FrameLayout(运行的时候,会被一个Fragment填充),用来显示导航抽屉的视图一般是一个ListView,如下所示

  1. <android.support.v4.widget.DrawerLayout
  2. xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:id="@+id/drawer_layout"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent">
  6. <!-- The main content view -->
  7. <FrameLayout
  8. android:id="@+id/content_frame"
  9. android:layout_width="match_parent"
  10. android:layout_height="match_parent" />
  11. <!-- The navigation drawer -->
  12. <ListView android:id="@+id/left_drawer"
  13. android:layout_width="240dp"
  14. android:layout_height="match_parent"
  15. android:layout_gravity="start"
  16. android:choiceMode="singleChoice"
  17. android:divider="@android:color/transparent"
  18. android:dividerHeight="0dp"
  19. android:background="#111"/>
  20. </android.support.v4.widget.DrawerLayout>
上面的布局说明了导航抽屉的布局一些非常重要的特点:
  1、显示主体内容的视图必须是DrawerLayout下的第一个子视图,因为抽屉视图必须在主体内容视图的上方(意味着DrawerLayout是一个以z轴来布局的控件)
  2、显示主体内容的视图必须设置为匹配父视图的高和宽,因为当抽屉视图隐藏的时候显示主体内容的视图代表了整个用户界面
  3、抽屉视图的layout_gravity属性值需为“start”,To support right-to-left (RTL) languages, specify the value with "start" instead of "left" (so the drawer appears on the right when the layout is RTL)
  4、抽屉视图的宽度不宜匹配父视图,应当适当的窄一点,这样就能在抽屉显示的时候还能看到主体内容视图的一部分
 

初始化抽屉列表

抽屉视图一般包含一个ListView(具体包含的View取决于你的应用),该ListView和平常没什么两样,都需要一个Adapter来填充,也可设置单项选中监听器

  1. public class MainActivity extends Activity {
  2. private String[] mPlanetTitles;
  3. private ListView mDrawerList;
  4. ...
  5.  
  6. @Override
  7. public void onCreate(Bundle savedInstanceState) {
  8. super.onCreate(savedInstanceState);
  9. setContentView(R.layout.activity_main);
  10.  
  11. mPlanetTitles = getResources().getStringArray(R.array.planets_array);
  12. mDrawerList = (ListView) findViewById(R.id.left_drawer);
  13.  
  14. // Set the adapter for the list view
  15. mDrawerList.setAdapter(new ArrayAdapter<String>(this,
  16. R.layout.drawer_list_item, mPlanetTitles));
  17. // Set the list's click listener
  18. mDrawerList.setOnItemClickListener(new DrawerItemClickListener());
  19.  
  20. ...
  21. }
  22. }

处理导航项选点击事件

导航项的点击事件其实就是包含的ListView项的点击事件,我们需要根据点击的项来相应的改变主体内容,记得上面说过显示主体内容的View运行时一般会是一个Fragment,所以只要把当前的Fragment替换成相应的Fragment就行了

  1. private class DrawerItemClickListener implements ListView.OnItemClickListener {
  2. @Override
  3. public void onItemClick(AdapterView parent, View view, int position, long id) {
  4. selectItem(position);
  5. }
  6. }
  7.  
  8. /** Swaps fragments in the main content view */
  9. private void selectItem(int position) {
  10. // Create a new fragment and specify the planet to show based on position
  11. Fragment fragment = new PlanetFragment();
  12. Bundle args = new Bundle();
  13. args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);
  14. fragment.setArguments(args);
  15.  
  16. // Insert the fragment by replacing any existing fragment
  17. FragmentManager fragmentManager = getFragmentManager();
  18. fragmentManager.beginTransaction()
  19. .replace(R.id.content_frame, fragment)
  20. .commit();
  21.  
  22. // Highlight the selected item, update the title, and close the drawer
  23. mDrawer.setItemChecked(position, true);
  24. setTitle(mPlanetTitles[position]);
  25. mDrawerLayout.closeDrawer(mDrawer);
  26. }
  27.  
  28. @Override
  29. public void setTitle(CharSequence title) {
  30. mTitle = title;
  31. getActionBar().setTitle(mTitle);
  32. }

监听导航抽屉打开和关闭事件

可以为DrawerLayout设置 DrawerLayout.DrawerListener监听器来监听打开和关闭事件,当导航抽屉打开和关闭时分别会回调onDrawerOpened()  和 onDrawerClosed() 方法
但是如果你的Activity包含Action Bar话,你可以选择 ActionBarDrawerToggle 来替代 DrawerListener , ActionBarDrawerToggle 实现了DrawerListener接口,所以抽屉的打开和关闭事件照样能监听的到,并且使用ActionBarDrawerToggle能促进Action Bar Icon和导航抽屉之间的交互(通过点击icon来打开和关闭导航抽屉),当导航抽屉打开或关闭时Action Bar的状态也应该做相应的改变( Navigation Drawer 中有介绍)

  1. public class MainActivity extends Activity {
  2. private DrawerLayout mDrawerLayout;
  3. private ActionBarDrawerToggle mDrawerToggle;
  4. private CharSequence mDrawerTitle;
  5. private CharSequence mTitle;
  6. ...
  7.  
  8. @Override
  9. public void onCreate(Bundle savedInstanceState) {
  10. super.onCreate(savedInstanceState);
  11. setContentView(R.layout.activity_main);
  12. ...
  13.  
  14. mTitle = mDrawerTitle = getTitle();
  15. mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
  16. mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
  17. R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {
  18.  
  19. /** Called when a drawer has settled in a completely closed state. */
  20. public void onDrawerClosed(View view) {
  21. getActionBar().setTitle(mTitle);
  22. invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
  23. }
  24.  
  25. /** Called when a drawer has settled in a completely open state. */
  26. public void onDrawerOpened(View drawerView) {
  27. getActionBar().setTitle(mDrawerTitle);
  28. invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
  29. }
  30. };
  31.  
  32. // Set the drawer toggle as the DrawerListener
  33. mDrawerLayout.setDrawerListener(mDrawerToggle);
  34. }
  35.  
  36. /* Called whenever we call invalidateOptionsMenu() */
  37. @Override
  38. public boolean onPrepareOptionsMenu(Menu menu) {
  39. // If the nav drawer is open, hide action items related to the content view
  40. boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
  41. menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);
  42. return super.onPrepareOptionsMenu(menu);
  43. }
  44. }

点击应用图标来打开和关闭导航抽屉

前面我们是介绍过通过手势来打开和关闭导航抽屉,但是如果Activity包含Action Bar的话,当我们点击应用图标时也能打开和关闭导航抽屉,而且我们也需要通过图标来指示导航抽屉当前的状态,如果我们是使用ActionBarDrawerToggle类的话,可以通过设置构造方法的参数来做到这一点,它的构造方法参数有五个,分别代表:宿主Activity、DrawerLayout、导航抽屉打开时应用图标、导航抽屉打开时描述文本、导航抽屉关闭时描述文本
还有一点要注意的是,当手机屏幕的配置环境发生变化时(横竖屏切换),导航抽屉的配置也需改变,当宿主Activity的onRestoreInstanceState方法调用的时候,导航抽屉的状态也需进行同步,可在onPostCreate方法中进行同步,具体的可以看如下代码

  1. public class MainActivity extends Activity {
  2. private DrawerLayout mDrawerLayout;
  3. private ActionBarDrawerToggle mDrawerToggle;
  4. ...
  5.  
  6. public void onCreate(Bundle savedInstanceState) {
  7. ...
  8.  
  9. mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
  10. mDrawerToggle = new ActionBarDrawerToggle(
  11. this, /* host Activity */
  12. mDrawerLayout, /* DrawerLayout object */
  13. R.drawable.ic_drawer, /* nav drawer icon to replace 'Up' caret */
  14. R.string.drawer_open, /* "open drawer" description */
  15. R.string.drawer_close /* "close drawer" description */
  16. ) {
  17.  
  18. /** Called when a drawer has settled in a completely closed state. */
  19. public void onDrawerClosed(View view) {
  20. getActionBar().setTitle(mTitle);
  21. }
  22.  
  23. /** Called when a drawer has settled in a completely open state. */
  24. public void onDrawerOpened(View drawerView) {
  25. getActionBar().setTitle(mDrawerTitle);
  26. }
  27. };
  28.  
  29. // Set the drawer toggle as the DrawerListener
  30. mDrawerLayout.setDrawerListener(mDrawerToggle);
  31.  
  32. getActionBar().setDisplayHomeAsUpEnabled(true);
  33. getActionBar().setHomeButtonEnabled(true);
  34. }
  35.  
  36. @Override
  37. protected void onPostCreate(Bundle savedInstanceState) {
  38. super.onPostCreate(savedInstanceState);
  39. // Sync the toggle state after onRestoreInstanceState has occurred.
  40. mDrawerToggle.syncState();
  41. }
  42.  
  43. @Override
  44. public void onConfigurationChanged(Configuration newConfig) {
  45. super.onConfigurationChanged(newConfig);
  46. mDrawerToggle.onConfigurationChanged(newConfig);
  47. }
  48.  
  49. @Override
  50. public boolean onOptionsItemSelected(MenuItem item) {
  51. // Pass the event to ActionBarDrawerToggle, if it returns
  52. // true, then it has handled the app icon touch event
  53. if (mDrawerToggle.onOptionsItemSelected(item)) {
  54. return true;
  55. }
  56. // Handle your other action bar items...
  57.  
  58. return super.onOptionsItemSelected(item);
  59. }
  60.  
  61. ...
  62. }

程序运行结果如下

源码:http://commondatastorage.googleapis.com/androiddevelopers/shareables/training/NavigationDrawer.zip

译自:http://developer.android.com/training/implementing-navigation/nav-drawer.html

转自:http://blog.csdn.net/tu_bingbing/article/details/9008255

Navigation Drawer(导航抽屉)的更多相关文章

  1. 【转】Navigation Drawer(导航抽屉)

    创建一个导航抽屉 创建抽屉布局 初始化抽屉列表 处理导航项选点击事件 监听导航抽屉打开和关闭事件 点击应用图标来打开和关闭导航抽屉   创建一个导航抽屉 导航抽屉是一个位于屏幕左侧边缘用来显示应用程序 ...

  2. Android官方终于支持 Navigation Drawer(导航抽屉)模式

    在2013 google IO当天,Android团的更新了Support库,新版本(V13)的Support库中新加入了几个比较重要的功能. 添加 DrawerLayout 控件,支持创建  Nav ...

  3. Android Navigation Drawer(导航抽屉)

    Google I/O 2013 Android 更新了Support库,新版本的Support库中新加入了几个比较重要的功能. 添加 DrawerLayout 控件,支持创建  Navigation ...

  4. 【原创+译文】官方文档中声明的如何创建抽屉导航栏(Navigation Drawer)

    如需转载请注明出处:http://www.cnblogs.com/ghylzwsb/p/5831759.html 创建一个抽屉导航栏 抽屉式导航栏是显示在屏幕的左边缘,它是应用程序的主导航选项面板.它 ...

  5. 安卓导航抽屉 Navigation Drawer 实现沉浸通知栏

    在使用 Navigation Drawer Activity 模版的时候,遇到了通知栏无法完全沉浸的问题,尝试搜索一些现有的解决方法,但是或多或少都会存在一些问题,通过反复尝试找到找到了一种比较靠谱的 ...

  6. Android导航抽屉-Navigation Drawer

    Google今年七月份的时候更新了他们的Google+应用,采用了新的导航方式并抛弃了navigationdrawer.一时之间,又引发了一系列关于NavigationDrawer利弊的讨论,不过对于 ...

  7. Creating a Navigation Drawer 创建一个导航侧边栏

    The navigation drawer is a panel that displays the app’s main navigation options on the left edge of ...

  8. Android UI开发第三十二篇——Creating a Navigation Drawer

    Navigation Drawer是从屏幕的左侧滑出,显示应用导航的视图.官方是这样定义的: The navigation drawer is a panel that displays the ap ...

  9. Android开发之Navigationdrawer导航抽屉功能的实现(源码分享)

    导航抽屉(navigationdrawer)是一个从屏幕左边滑入的面板,用于显示应用的主要导航项目.用户能够通过在屏幕左边缘滑入或者触摸操作栏的应用图标打开导航抽屉. 导航抽屉覆盖在内容之上,但不覆盖 ...

随机推荐

  1. sqlite3 语句总结

      一. iOS客户端设计数据库时一般使用  sqlite,以sqlite3 为例,简单介绍一下. 二. sqlite3常用命令当前目录下建立或打开test.db数据库文件,并进入sqlite命令终端 ...

  2. 菜鸟笔记之java中方法使用

    N!!!java中无参无返回值方法的使用 1,定义方法 eg: public void show(){ System.out.println("HelloWorld!") } -- ...

  3. HDU_2156 分数矩阵

    Problem Description             我们定义如下矩阵:            1/1 1/2 1/3            1/2 1/1 1/2            1 ...

  4. java对象初始化顺序的简单验证

    以下这段小程序对调用对象构造函数时,父类构造函数.成员变量初始化函数,以及非静态初始化块调用顺序进行验证,不考虑静态成员及静态初始化块. public class Derive extends Bas ...

  5. C语言库函数--操作文件

    //C库函数读取文件的代码 I/O缓冲机制 C语言库函数写文件都是写在内存中,然后一次写入磁盘.提高了效率. 读写文件,不对系统进行操作,一般采用C语言库函数.移植可以在任何可以对C支持的操作系统,而 ...

  6. 网站开发常用jQuery插件总结(11)折叠插件Akordeon

    实现折叠菜单,可以完全不使用插件.如果使用jquery的话,实现起来也比较简单,我们只需要定义折叠菜单的样式,然后使用jquery中的渐隐渐现就可以了.如果我们自己写折叠菜单,可以方便的使用我们自己的 ...

  7. linux重新增加硬盘容量

    1.先用df -h查看硬盘使用情况 2.fdisk -l查看分区情况 表示还没有挂载 3.fdisk /dev/vdb进行分区 4.mkfs.ext3 /dev/vdb进行格式化 5.mount /d ...

  8. Sqlserver 原生 MD5 函数(转)

    --创建md5函数CREATE FUNCTION [dbo].[MD5](@src varchar(255) )RETURNS varchar(255)ASBEGIN    DECLARE @md5 ...

  9. C# 实现繁体字和简体字之间的转换

    今天收到一个需求,将一组简体的汉字转换成繁体的汉字,刚开始有点茫然,后来在网上搜了一下思路,结果很少有涉及,终于我在看了MSDN后找到了如何解决,可能这方面对一些高程来说很Easy,但是除了高程还有很 ...

  10. Asp.Net MVC 使用FileResult导出Excel数据文件

    MVC实现Excel导出功能,今天来记录一下. 采取了最简单的方法.(转载)   用的是Html拼接成Table表格的方式,返回 FileResult 输出一个二进制的文件. 第一种:使用FileCo ...