MaterialDesign之NavigationView和DrawerLayout实现侧滑菜单栏

本文将介绍使用Google最新推出规范式设计中的NavigationView和DrawerLayout结合实现侧滑菜单栏效果，NavigationView是android-support-design包下的一个控件，该包下还有AppBarLayout、CoordinatorLayout、FloatingActionButton、SnackBar、TabLayout、TextInputLayout等控件，也是Google在Android 5.x推荐规范式使用的控件。本系列将逐一介绍每个控件的使用。。。

好了，先来看看本文最终的效果图吧！



它把标题栏也遮住了，正是符号Google的材料设计思想。。。

现在我们分几步说说怎么实现这个效果吧：

一、首先就需要添加包依赖，废话就不说了，上图



二、主布局：activity_main.xml

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#30469b"/>
<!--内容显示布局-->
<FrameLayout
android:id="@+id/frame_content"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>

<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
app:headerLayout="@layout/navigation_header"
app:menu="@menu/drawer" />
</android.support.v4.widget.DrawerLayout>

其中在NavigationView布局中，需要给NavigationView设置app:headerLayout和app:menu,那是什么意思呢？

 

headerLayout就是给导航栏增加一个头部Layout。

menu就是对应菜单项的选择条目。

三、分别写headerLayout和menu对应的布局navigation_header.xml和菜单drawer.xml文件

navigation_header.xml

 

view
sourceprint?

01.

<?xml
version=

"1.0"

 

encoding=

"utf-8"

?>

02.

<RelativeLayout
xmlns:android=

"http://schemas.android.com/apk/res/android"

03.

android:layout_width=

"match_parent"

04.

android:layout_height=

"200dp"

05.

android:background=

"#30469b"

>

06.

<TextView

07.

android:id=

"@+id/header_tv"

08.

android:layout_width=

"wrap_content"

09.

android:layout_height=

"wrap_content"

10.

android:layout_centerInParent=

"true"

11.

android:text=

"HeaderLayout"

12.

android:textColor=

"#ffffff"

13.

android:textSize=

"25sp"

 

/>

14.

</RelativeLayout>

drawer.xml

 

 

view
sourceprint?

01.

<?xml
version=

"1.0"

 

encoding=

"utf-8"

?>

02.

<menu
xmlns:android=

"http://schemas.android.com/apk/res/android"

>

03.

<group
android:checkableBehavior=

"single"

>

04.

<item

05.

android:id=

"@+id/item_one"

06.

android:icon=

"@mipmap/icon"

07.

android:title=

"我的动态"

></item>

08.

<item

09.

android:id=

"@+id/item_two"

10.

android:icon=

"@mipmap/icon"

11.

android:title=

"我的留言"

></item>

12.

<item

13.

android:id=

"@+id/item_three"

14.

android:icon=

"@mipmap/icon"

15.

android:title=

"附近的人"

></item>

16.

</group>

17.

</menu>

四、这时候开始写代码了，也很简单：

MainActivity:

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;

public class MainActivity extends ActionBarActivity {
private DrawerLayout mDrawerLayout =null;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//设置ToolBar
final Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
// mToolbar.setTitleTextColor(Color.WHITE);
setSupportActionBar(mToolbar);
//这里是动态的在action bar上添加图标
final ActionBar ab = getSupportActionBar();
ab.setHomeAsUpIndicator(R.drawable.ic_menu);
ab.setDisplayHomeAsUpEnabled(true);

//设置抽屉DrawerLayout
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
// ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_launcher,
// R.string.drawer_open, R.string.drawer_close);
// mDrawerToggle.syncState();//初始化状态
// mDrawerLayout.setDrawerListener(mDrawerToggle);

//设置导航栏NavigationView的点击事件
NavigationView mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
switch (menuItem.getItemId()) {
case R.id.item_one:
getSupportFragmentManager().beginTransaction().replace(R.id.frame_content, new FragmentOne()).commit();
mToolbar.setTitle("我的动态");
break;
case R.id.item_two:
getSupportFragmentManager().beginTransaction().replace(R.id.frame_content, new FragmentTwo()).commit();
mToolbar.setTitle("我的留言");
break;
case R.id.item_three:
getSupportFragmentManager().beginTransaction().replace(R.id.frame_content, new FragmentThree()).commit();
mToolbar.setTitle("附近的人");
break;
}
menuItem.setChecked(true);//点击了把它设为选中状态
mDrawerLayout.closeDrawers();//关闭抽屉
return true;
}
});
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == android.R.id.home) {
mDrawerLayout.openDrawer(GravityCompat.START);
return true;
}
return super.onOptionsItemSelected(item);
}

}

小结 ： 这里的DrawerLayout的布局是很重要的它的层次一次是 标题栏 主屏幕内容（fragment） 侧边栏内容，层次比较清晰，要在哪里填充数据就在相应的地方写代码.这里写的参考的zhanghongyang的博客，补充了三个fragment.

源码地址：http://download.csdn.net/detail/qq_26296197/9494419

在这也可以参考zhanghongyang的博客   http://blog.csdn.net/lmj623565791/article/details/46405409，写的也很好。