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"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="#30469b"/><!--内容显示布局--><FrameLayoutandroid:id="@+id/frame_content"android:layout_width="match_parent"android:layout_height="match_parent"/></LinearLayout><android.support.design.widget.NavigationViewandroid: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;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//设置ToolBarfinal 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);//设置抽屉DrawerLayoutmDrawerLayout = (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() {@Overridepublic 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;}});}@Overridepublic 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，写的也很好。

MaterialDesign之NavigationView和DrawerLayout实现侧滑菜单栏相关推荐

android模仿快手作品界面,android开发：使用DrawerLayout仿快手侧滑菜单栏
先看对比一下我们写的效果和别人的效果: activity的xml布局: 1.根部局是DrawerLayout布局,必须设置openDrawer属性: tools:openDrawer="st ...
034 Android NavigationView和DrawerLayout实现抽屉式导航设计(侧边栏效果)
1.创建带侧滑效果的activity 右击,new---->activity---->选择NavgationDrawer Activity 2.xml文件布局 (1)activity_ma ...
仿网易新闻的首页+QQ的侧滑菜单栏
//依赖 compile 'com.zhy:base-adapter:2.0.0'compile 'com.android.support:recyclerview-v7:26.+'compile ' ...
DrawerLayout实现侧滑菜单效果
众所周知,android里面我们很熟悉的一个功能,侧滑菜单效果在以前我们大部分都是用的slidingmenu这个开源框架,自从谷歌官方新出的一个DrawerLayout控件之后,越来越多的应用开始使用 ...
DrawerLayout的导航图标详解
前言 DrawerLayout是Google官方推出的一个应用于侧滑菜单的工具类,遵循Google提出的Material Design设计风格.而DrawerLayout与Toolbar之间的图标联动 ...
记录开发一款安卓便签的过程
ps:初识安卓是在很久三年前高中第一次拥有了一部天语的ktouch2,然后开始了解root,刷机等等.直到今天进入大学选择了这个专业.因为之前给老师写过一个设备管理的app,发现自己有很多的不足.因此 ...
MaterialDesign学习篇(二)，Toolbar、DrawerLayout的使用
什么是Toolbar Toolbar是应用的内容的标准工具栏,可以说是Actionbar的升级版,两者不是独立关系,要使用Toolbar还是得跟ActionBar扯上关系的.相比Actionbar,T ...
android新特性：DrawerLayout与NavigationView配合使用
首先看一下效果吧 Android Design Support Library中增加了 NavigationView与DrawerLayout这个控件.代替SlidingMenu项目中的使用! 在这里 ...
【Android笔记44】Android利用DrawerLayout布局组件实现侧滑导航菜单的效果
这篇文章,主要介绍Android如何利用DrawerLayout布局组件实现侧滑导航菜单的效果. 目录一.侧滑菜单栏 1.1.效果演示 1.2.DrawerLayout布局介绍 (1)打开侧边栏

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

MaterialDesign之NavigationView和DrawerLayout实现侧滑菜单栏相关推荐

最新文章

热门文章