文档章节

Navigation Drawer详解-Google推出的用来取代Sliding Menu的控件(一

科技创造
 科技创造
发布于 2014/10/07 14:28
字数 1998
阅读 348
收藏 4

相信Sliding Menu很多人都用过,在AndroidiOSapp中,越来越多的开发者都会把自己的菜单界面放在一个列表里,然后让用户通过向右(或者向左)滑动的操作看到应用所有的功能。Google官方的应用也基本都选择了这种交互方式,不同的是,Google使用的是Navigation Drawer,而我们大部分用的还是Sliding Menu

大家对Sliding Menu这个开源项目可能已经很熟悉了,但是Navigation Drawer我们有些童鞋可能了解的还比较少,它是Google I/O 2013刚推出不久的一个在support v4包里面的一个控件,下面我就通过一个demo跟大家介绍一下Navigation Drawer的使用方法。http://safe.ijiami.cn/



这个demogoogle官方的,大家可以到这里下载一下:http://developer.android.com/training/implementing-navigation/nav-drawer.html,我下面写的代码说明也基本就是翻译了一下这个教程,英语比较好的童鞋建议还是直接看官方的吧。

创建一个抽屉

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




创建抽屉布局

如果你要添加一个导航抽屉,需要用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" insteadof "left" (so the drawer appears on the right when thelayout is RTL)

      4、抽屉视图的宽度不宜匹配父视图,应当适当的窄一点,这样就能在抽屉显示的时候还能看到主体内容视图的一部分

初始化抽屉列表

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

  1. public class MainActivity extends Activity {

  2. private String[] mPlanetTitles;

  3. private DrawerLayout mDrawerLayout;

  4. private ListView mDrawerList;

  5. ...


  6. @Override

  7. public void onCreate(Bundle savedInstanceState) {

  8. super.onCreate(savedInstanceState);

  9. setContentView(R.layout.activity_main);


  10. mPlanetTitles = getResources().getStringArray(R.array.planets_array);

  11. mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

  12. mDrawerList = (ListView) findViewById(R.id.left_drawer);


  13. // Set the adapter for the list view

  14. mDrawerList.setAdapter(new ArrayAdapter<String>(this,

  15. R.layout.drawer_list_item, mPlanetTitles));

  16. // Set the list's click listener

  17. mDrawerList.setOnItemClickListener(new DrawerItemClickListener());


  18. ...

  19. }

  20. }

复制代码


处理导航项选点击事件

导航项的点击事件其实就是包含的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. /** Swaps fragments in the main content view */

  8. private void selectItem(int position) {

  9. // Create a new fragment and specify the planet to show based on position

  10. Fragment fragment = new PlanetFragment();

  11. Bundle args = new Bundle();

  12. args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);

  13. fragment.setArguments(args);


  14. // Insert the fragment by replacing any existing fragment

  15. FragmentManager fragmentManager = getFragmentManager();

  16. fragmentManager.beginTransaction()

  17. .replace(R.id.content_frame, fragment)

  18. .commit();


  19. // Highlight the selected item, update the title, and close the drawer

  20. mDrawerList.setItemChecked(position, true);

  21. setTitle(mPlanetTitles[position]);

  22. mDrawerLayout.closeDrawer(mDrawerList);

  23. }


  24. @Override

  25. public void setTitle(CharSequence title) {

  26. mTitle = title;

  27. getActionBar().setTitle(mTitle);

  28. }

复制代码


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

可以为DrawerLayout设置 DrawerLayout.DrawerListener监听器来监听打开和关闭事件,当导航抽屉打开和关闭时分别会回调onDrawerOpened() onDrawerClosed() 方法

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

  1. public class MainActivity extends Activity {

  2. private DrawerLayout mDrawerLayout;

  3. private ActionBarDrawerToggle mDrawerToggle;

  4. private CharSequence mDrawerTitle;

  5. private CharSequence mTitle;

  6. ...


  7. @Override

  8. public void onCreate(Bundle savedInstanceState) {

  9. super.onCreate(savedInstanceState);

  10. setContentView(R.layout.activity_main);

  11. ...


  12. mTitle = mDrawerTitle = getTitle();

  13. mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

  14. mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,

  15. R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {


  16. /** Called when a drawer has settled in a completely closed state. */

  17. public void onDrawerClosed(View view) {

  18. getActionBar().setTitle(mTitle);

  19. invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()

  20. }


  21. /** Called when a drawer has settled in a completely open state. */

  22. public void onDrawerOpened(View drawerView) {

  23. getActionBar().setTitle(mDrawerTitle);

  24. invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()

  25. }

  26. };


  27. // Set the drawer toggle as the DrawerListener

  28. mDrawerLayout.setDrawerListener(mDrawerToggle);

  29. }


  30. /* Called whenever we call invalidateOptionsMenu() */

  31. @Override

  32. public boolean onPrepareOptionsMenu(Menu menu) {

  33. // If the nav drawer is open, hide action items related to the content view

  34. boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);

  35. menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);

  36. return super.onPrepareOptionsMenu(menu);

  37. }

  38. }

复制代码

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

前面我们是介绍过通过手势来打开和关闭导航抽屉,但是如果Activity包含Action Bar的话,当我们点击应用图标时也能打开和关闭导航抽屉,而且我们也需要通过图标来指示导航抽屉当前的状态,如果我们是使用ActionBarDrawerToggle类的话,可以通过设置构造方法的参数来做到这一点,它的构造方法参数有五个,分别代表:宿主ActivityDrawerLayout、导航抽屉打开时应用图标、导航抽屉打开时描述文本、导航抽屉关闭时描述文本

还有一点要注意的是,当手机屏幕的配置环境发生变化时(横竖屏切换),导航抽屉的配置也需改变,当宿主ActivityonRestoreInstanceState方法调用的时候,导航抽屉的状态也需进行同步,可在onPostCreate方法中进行同步,具体的可以看如下代码

  1. public class MainActivity extends Activity {

  2. private DrawerLayout mDrawerLayout;

  3. private ActionBarDrawerToggle mDrawerToggle;

  4. ...


  5. public void onCreate(Bundle savedInstanceState) {

  6. ...


  7. mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

  8. mDrawerToggle = new ActionBarDrawerToggle(

  9. this, /* host Activity */

  10. mDrawerLayout, /* DrawerLayout object */

  11. R.drawable.ic_drawer, /* nav drawer icon to replace 'Up' caret */

  12. R.string.drawer_open, /* "open drawer" description */

  13. R.string.drawer_close /* "close drawer" description */

  14. ) {


  15. /** Called when a drawer has settled in a completely closed state. */

  16. public void onDrawerClosed(View view) {

  17. getActionBar().setTitle(mTitle);

  18. }


  19. /** Called when a drawer has settled in a completely open state. */

  20. public void onDrawerOpened(View drawerView) {

  21. getActionBar().setTitle(mDrawerTitle);

  22. }

  23. };


  24. // Set the drawer toggle as the DrawerListener

  25. mDrawerLayout.setDrawerListener(mDrawerToggle);


  26. getActionBar().setDisplayHomeAsUpEnabled(true);

  27. getActionBar().setHomeButtonEnabled(true);

  28. }


  29. @Override

  30. protected void onPostCreate(Bundle savedInstanceState) {

  31. super.onPostCreate(savedInstanceState);

  32. // Sync the toggle state after onRestoreInstanceState has occurred.

  33. mDrawerToggle.syncState();

  34. }


  35. @Override

  36. public void onConfigurationChanged(Configuration newConfig) {

  37. super.onConfigurationChanged(newConfig);

  38. mDrawerToggle.onConfigurationChanged(newConfig);

  39. }


  40. @Override

  41. public boolean onOptionsItemSelected(MenuItem item) {

  42. // Pass the event to ActionBarDrawerToggle, if it returns

  43. // true, then it has handled the app icon touch event

  44. if (mDrawerToggle.onOptionsItemSelected(item)) {

  45. return true;

  46. }

  47. // Handle your other action bar items...


  48. return super.onOptionsItemSelected(item);

  49. }


  50. ...

  51. }

复制代码


几张运行的截图:

 



© 著作权归作者所有

科技创造
粉丝 37
博文 199
码字总数 174505
作品 0
徐汇
程序员
私信 提问
Navigation Drawer详解-Google推出的用来取代Sliding Menu的控件(二

第一篇我们就google官方给出的Navigation Drawer demo做了一个简单的介绍,细心的童鞋可能已经发现问题了,google虽然是在support v4中添加的这个控件,但是他给的demo中却使用了ActionBar!...

科技创造
2014/10/08
64
0
Android 之 Material Design(三)—DrawerLayout+NavigationView+Toolbar(点击icon打开关闭侧滑菜单)

前言 关于Material Design相关的控件,前两篇文章已经介绍了一些常用的控件了,这篇文章主要介绍一下DrawerLayout+NavigationView+Toolbar。这样Material Design的也介绍的差不多了,剩下Rec...

AFinalDream
2017/06/22
0
0
开源中国 OsChina Android 客户端源码分析(2)滑动菜单DrawerLayout

1滑动菜单oschina使用了android.support.v4.widget.DrawerLayout,之前没有用过这个控件,百度了下,大致了解如下: 1.1类似与LinearLayout,就是一个布局控件。 1.2使用时,其有两部分组成,...

姬鑫
2015/05/20
1K
3
NavigationDrawer的使用

一。Create a NavigationDrawer 创建Navigation Drawer需要用DrawerLayout 作为界面根控件。在DrawerLayout里面第一个View为当前界面主内容;第二个和第三个View为Navigation Drawer内容。如...

chuiyuan
2014/07/23
2.4K
0
android官方控件DrawerLayout和Toolbar地配合使用

接下来是Layout文件: 最后是Activity: 最后是Menu的布局文件:

fantasiter
2015/08/23
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

前端面试题汇总

一. HTML常见的兼容性 1.HTML5 标签在低版本浏览器不兼容 解决办法:使用html5shiv库,引入下列语句 <!--[if lte IE 8]> <script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></sc......

蓝小驴
39分钟前
10
0
OSChina 周四乱弹 —— 我气的脸都黑了!

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑推荐《Red Battle》- 高橋李依 / 豊崎愛生 《Red Battle》- 高橋李依 / 豊崎愛生 手机党少年们想听歌,请使劲儿戳(这里) @丶Lion ...

小小编辑
52分钟前
668
23
找OSG教程, B站就有

https://www.bilibili.com/video/av64849038?from=search&seid=11632913960900279653

洛克人杰洛
今天
6
0
学习记录(day07-Vue组件、自定义属性、自定义事件)

[TOC] 1.1.1什么是组件 一个vue文件就是一个组件 组件将html标签/css样式/对应JS打包成一个整体,也可以理解钻进一个具有样式和特效的自定义标签。 一、编写组件(提供方)<template> <di...

庭前云落
今天
5
0
使用Prometheus监控SpringBoot应用

通过之前的文章我们使用Prometheus监控了应用服务器node_exporter,数据库mysqld_exporter,今天我们来监控一下你的应用。(本文以SpringBoot 2.1.9.RELEASE 作为监控目标) 编码 添加依赖 使...

JAVA日知录
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部