欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-07-11 23:32:02
本文介绍如何使用drawerlayout和navigationview实现侧滑菜单栏的效果。 效果如下: layout布局

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

效果如下:

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。