学习使用Material Design控件（二）使用DrawerLayout实现侧滑菜单栏效果

概述本文介绍如何使用DrawerLayout和NavigationView实现侧滑菜单栏的效果。效果如下：

本文介绍如何使用DrawerLayout和NavigationVIEw实现侧滑菜单栏的效果。

效果如下：

Layout布局

<androID.support.v4.Widget.DrawerLayout xmlns:androID=“http://schemas.androID.com/apk/res/androID” xmlns:app=“http://schemas.androID.com/apk/res-auto” androID:ID=“@+ID/drawer_layout” androID:layout_wIDth=“match_parent” androID:layout_height=“match_parent” androID:fitsSystemwindows=“true”> <androID.support.design.Widget.NavigationVIEw androID:ID=“@+ID/navigation_vIEw” androID:layout_wIDth=“wrap_content” androID:layout_height=“match_parent” androID:layout_gravity=“start” app:headerLayout=“@layout/navigation_header” app:menu=“@menu/drawer” /></androID.support.v4.Widget.DrawerLayout>

NavigationVIEw需要设置app:headerLayout 和 app:menu，headerLayout对应菜单的上面部分，一般用来显示用户信息，menu则对应实际的菜单项文件。

headerLayout

<linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" xmlns:app="http://schemas.androID.com/apk/res-auto" androID:layout_wIDth="match_parent" androID:layout_height="192dp" androID:background="?attr/colorPrimaryDark" androID:gravity="center" androID:orIEntation="vertical" androID:padding="16dp" androID:theme="@style/themeOverlay.AppCompat.Dark"> <de.hdodenhof.circleimagevIEw.circleimageVIEw androID:ID="@+ID/profile_image" androID:layout_wIDth="72dp" androID:layout_height="72dp" androID:layout_margintop="20dp" androID:src="@mipmap/profile" app:border_color="@color/primary_light" app:border_wIDth="2dp" /> <TextVIEw androID:layout_margintop="10dp" androID:textSize="18sp" androID:layout_wIDth="match_parent" androID:layout_height="wrap_content" androID:text="APP开发者" androID:gravity="center" androID:textAppearance="@style/TextAppearance.AppCompat.Body1"  /></linearLayout>

menu

<menu xmlns:androID="http://schemas.androID.com/apk/res/androID" xmlns:tools="http://schemas.androID.com/tools" tools:context=".MainActivity"> <group androID:checkableBehavior="single"> <item  androID:ID="@+ID/navigation_item_example"  androID:icon="@drawable/ic_favorite"  androID:title="@string/navigation_example" /> <item  androID:ID="@+ID/navigation_item_blog"  androID:icon="@drawable/ic_favorite"  androID:title="@string/navigation_my_blog" /> <item  androID:ID="@+ID/navigation_item_about"  androID:icon="@drawable/ic_favorite"  androID:title="@string/navigation_about" /> </group></menu>

代码实现

ActionbarDrawerToggle可以配合Toolbar，实现Toolbar上菜单按钮开关效果。

 //设置Toolbar mToolbar = (Toolbar) findVIEwByID(R.ID.toolbar); setSupportActionbar(mToolbar);//设置DrawerLayout mDrawerLayout = (DrawerLayout) findVIEwByID(R.ID.drawer_layout); mDrawerToggle = new ActionbarDrawerToggle(this,mDrawerLayout,mToolbar,R.string.drawer_open,R.string.drawer_close);   mDrawerToggle.syncState(); mDrawerLayout.setDrawerListener(mDrawerToggle);

//设置NavigationVIEw点击事件 mNavigationVIEw = (NavigationVIEw) findVIEwByID(R.ID.navigation_vIEw); setupDrawerContent(mNavigationVIEw); //设置NavigationVIEw点击事件private voID setupDrawerContent(NavigationVIEw navigationVIEw) { navigationVIEw.setNavigationItemSelectedListener(  new NavigationVIEw.OnNavigationItemSelectedListener() {   @OverrIDe   public boolean onNavigationItemSelected(MenuItem menuItem) {   switch (menuItem.getItemID()) {    case R.ID.navigation_item_example:    switchToExample();    break;    case R.ID.navigation_item_blog:    switchToBlog();    break;    case R.ID.navigation_item_about:    switchToAbout();    break;   }   menuItem.setChecked(true);   mDrawerLayout.closeDrawers();   return true;   }  }); }

项目源码已发布到Github，以后慢慢加入其他控件的使用。

源码地址：MaterialDesignExample

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的学习使用Material Design控件（二）使用DrawerLayout实现侧滑菜单栏效果全部内容，希望文章能够帮你解决学习使用Material Design控件（二）使用DrawerLayout实现侧滑菜单栏效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。