android新特性：DrawerLayout与NavigationView配合使用(侧滑效果)

首先看一下效果吧

20170120150737931.png

Android Design Support Library中增加了 NavigationView与DrawerLayout这个控件。代替SlidingMenu项目中的使用！

在这里让我们来学习一下DrawerLayout和NavigationView的使用吧！

在工程中添加依赖：

 compile 'com.android.support:design:25.0.0'

在Material Design中，NavigationView导航与DrawerLayout抽屉，被设计用于应用导航，提供了一种通用的导航方式，体现了设计的一致性。

NavigationView是一个导航菜单框架，使用menu资源填充数据，使我们可以更简单高效的实现导航菜单。

在XML中使用DrawerLayout与NavigationView进行布局

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:app = "http://schemas.android.com/apk/res-auto"
4. xmlns:tools = "http://schemas.android.com/tools"
5. android:id = "@+id/activity_main"
6. android:layout_width = "match_parent"
7. android:layout_height = "match_parent"
8. tools:context = "cn.hnshangyu.navigationview.MainActivity" >
10. <android.support.v4.widget.DrawerLayout
11. android:id = "@+id/drawer_layout"
12. android:layout_width = "match_parent"
13. android:layout_height = "match_parent" >
14. <!--主页面-->
15. <FrameLayout
16. android:id = "@+id/fl_main"
17. android:background = "@color/colorAccent"
18. android:layout_width = "match_parent"
19. android:layout_height = "match_parent" />
20. <!--侧滑页-->
21. <android.support.design.widget.NavigationView
22. android:id = "@+id/navigation"
23. android:layout_width = "320dp"
24. android:layout_height = "match_parent"
25. android:layout_gravity = "start"
26. app:headerLayout = "@layout/drawer_header"
27. app:menu = "@menu/drawer" />
28. </android.support.v4.widget.DrawerLayout>
29. </RelativeLayout>

注意其中NavigationView的两个自定义属性
app:headerLayout接收一个layout，作为导航菜单顶部的Header，即效果图中的侧滑页图片部分，开发中设置则有，不设置则无。
app:menu接收一个menu，作为导航菜单的菜单项，几乎是必选项，不然这个控件就失去意义了。但也可以在运行时动态改变menu属性。

用于NavigationView的典型menu文件，应该是一个可选中菜单项的集合。其中checked=”true”的item将会高亮显示，这可以确保用户知道当前选中的菜单项是哪个。

侧滑页头布局drawer_header中的布局

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width = "match_parent"
4. android:layout_height = "match_parent" >
6. <ImageView
7. android:layout_width = "match_parent"
8. android:layout_height = "match_parent"
9. android:src = "@mipmap/ic_recyclerview_09" />
10. </RelativeLayout>

在这里只设置了一张图片，在这里其实有个疑惑，也是注意的地方，就是头布局在Activity中怎么得到并设置点击事件等操作呢？稍后看代码！

menu/drawer的布局

1. <?xml version = "1.0" encoding= "utf-8" ?>
2. <menu xmlns:android= "http://schemas.android.com/apk/res/android"
3. xmlns:tools= "http://schemas.android.com/tools"
4. tools:context= ".MainActivity" >
5. <group android:checkableBehavior= "single" >
6. < item
7. android: id = "@+id/navigation_item_one"
8. android:icon= "@mipmap/wsxx"
9. android:title= "huangixoaguo" />
10. < item
11. android: id = "@+id/navigation_item_two"
12. android:icon= "@mipmap/wddd"
13. android:title= "目录" />
14. < item
15. android: id = "@+id/navigation_item_three"
16. android:icon= "@mipmap/wdyd"
17. android:title= "佳佳" />
18. < item
19. android: id = "@+id/navigation_item_four"
20. android:icon= "@mipmap/wdyy"
21. android:title= "闹钟" />
22. < item
23. android: id = "@+id/navigation_item_five"
24. android:icon= "@mipmap/sz"
25. android:title= "设置" />
27. < item
28. android: id = "@+id/navigation_subheader_one"
29. android:icon= "@mipmap/sz"
30. android:title= "子条目" >
31. <menu>
32. < item
33. android: id = "@+id/navigation_sub_item_one"
34. android:icon= "@mipmap/wdyd"
35. android:title= "佳佳" />
36. < item
37. android: id = "@+id/navigation_sub_item_two"
38. android:icon= "@mipmap/wdyy"
39. android:title= "闹钟" />
40. </menu>
41. </ item >
44. < item
45. android: id = "@+id/navigation_subheader_two"
46. android:icon= "@mipmap/sz"
47. android:title= "子条目" >
48. <menu>
49. < item
50. android: id = "@+id/navigation_sub_item_four"
51. android:icon= "@mipmap/wdyd"
52. android:title= "佳佳" />
53. < item
54. android: id = "@+id/navigation_sub_item_five"
55. android:icon= "@mipmap/wdyy"
56. android:title= "闹钟" />
57. </menu>
58. </ item >
59. < item
60. android: id = "@+id/navigation_subheader_three"
61. android:icon= "@mipmap/sz"
62. android:title= "子条目" >
63. <menu>
64. < item
65. android: id = "@+id/navigation_sub_item_six"
66. android:icon= "@mipmap/wdyd"
67. android:title= "佳佳" />
68. < item
69. android: id = "@+id/navigation_sub_item_seven"
70. android:icon= "@mipmap/wdyy"
71. android:title= "闹钟" />
72. </menu>
73. </ item >
74. < item
75. android: id = "@+id/navigation_subheader_four"
76. android:icon= "@mipmap/sz"
77. android:title= "子条目" >
78. <menu>
79. < item
80. android: id = "@+id/navigation_sub_item_eight"
81. android:icon= "@mipmap/wdyd"
82. android:title= "佳佳" />
83. < item
84. android: id = "@+id/navigation_sub_item_nine"
85. android:icon= "@mipmap/wdyy"
86. android:title= "闹钟" />
87. </menu>
88. </ item >
89. </group>
90. </menu>

里面使用menu的嵌套，来显示分组子标题！

Activity中的操作

1. package cn.hnshangyu.navigationview;
3. import android.os.Bundle;
4. import android.support.annotation.NonNull;
5. import android.support.design.widget.NavigationView;
6. import android.support.v4.widget.DrawerLayout;
7. import android.support.v7.app.AppCompatActivity;
8. import android.view.MenuItem;
9. import android.view.View;
10. import android.widget.FrameLayout;
11. import android.widget.ImageView;
12. import android.widget.RelativeLayout;
14. import butterknife.Bind;
15. import butterknife.ButterKnife;
16. import cn.hnshangyu.navigationview.utils.UIUtils;
18. public class MainActivity extends AppCompatActivity {
20. @Bind(R.id.fl_main)
21. FrameLayout flMain;
22. @Bind(R.id.navigation)
23. NavigationView mNavigationView;
24. @Bind(R.id.drawer_layout)
25. DrawerLayout mDrawerLayout;
26. private RelativeLayout headerView;
28. @Override
29. protected void onCreate(Bundle savedInstanceState) {
30. super.onCreate(savedInstanceState);
31. setContentView(R.layout.activity_main);
32. ButterKnife.bind( this);
33. //得到头布局
34. headerView = (RelativeLayout) mNavigationView.getHeaderView( 0);
35. initListener();
36. }
38. private MenuItem lastItem;
40. private void initListener() {
41. mNavigationView.setNavigationItemSelectedListener( new NavigationView.OnNavigationItemSelectedListener() {
42. @Override
43. public boolean onNavigationItemSelected( @NonNull MenuItem item) {
45. switch (item.getItemId()) {
46. case R.id. navigation_item_one:
47. break;
48. case R.id. navigation_item_two:
49. break;
50. case R.id. navigation_item_three:
51. break;
52. case R.id. navigation_item_four:
53. break;
54. case R.id. navigation_sub_item_one:
55. break;
56. case R.id. navigation_sub_item_two:
57. break;
58. case R.id. navigation_sub_item_four:
59. break;
60. case R.id. navigation_sub_item_five:
61. break;
62. case R.id. navigation_sub_item_six:
63. break;
64. case R.id. navigation_sub_item_seven:
65. break;
66. case R.id. navigation_sub_item_eight:
67. break;
68. case R.id. navigation_sub_item_nine:
69. break;
70. case R.id. navigation_item_five:
71. break;
72. }
73. if (lastItem != null) {
74. lastItem.setChecked( false);
75. }
76. item.setChecked( true);
77. lastItem = item;
78. UIUtils.showToast(item.getTitle().toString());
79. mDrawerLayout.closeDrawers();
80. return false;
81. }
82. });
83. headerView.setOnClickListener( new View.OnClickListener() {
84. @Override
85. public void onClick(View view) {
86. UIUtils.showToast( "头像");
87. mDrawerLayout.closeDrawers();
88. }
89. });
90. }
91. }

用setNavigationItemSelectedListener方法来设置当导航项被点击时的回调。OnNavigationItemSelectedListener会提供给我们被选中的MenuItem，这与Activity的onOptionsItemSelected非常类似。通过这个回调方法，我们可以处理点击事件，改变item的选中状态，更新页面内容，关闭导航菜单，以及任何我们需要的操作。

其中的到headview的方法在这里我使用的是： navigationView.getHeaderView(0)的方式，如果子view较多

1. headerView = navigationView.getHeaderView(0);
2. headImg = (ImageButton)headerView.findViewById(R.id.user_head_img);
3. userName = (TextView) headerView.findViewById(R.id.user_name);
4. userDescription = (TextView) headerView.findViewById(R.id.user_description);

这种方式可以得到子view。

或：

1. 先在Activity中声明NavigationView，然后再通过 View view = NavigationView.inflateHeaderView( int LayoutResID)这个方法导入头部布局文件，
2. 这就意味着在NavigationView中不会静态去设置app: header属性，并且获取了头部的 View,这样就可以通过 View.findId...()方法来定位和监听了。

好了，差不多到这里基本的使用方法就实现了！有不好的地方，欢迎大家指出….谢谢！！！

Demo下载：http://download.csdn.net/detail/huangxiaoguo1/9742204