DrawerLayout翻译过来就是抽屉布局,网易云音乐和知乎首页都是采用的这种布局。可以简单实现侧滑菜单的功能。
在使用之前需要在Build.gald中加入compile'com.android.support:design:23.1.1'
在布局中的使用:
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/drawer_ly"> <!--抽屉布局--> <RelativeLayout android:id="@+id/top_rly" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="70dp" android:fitsSystemWindows="true" android:background="@color/colorPrimary" app:title=" "> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="抽屉布局" android:textColor="#ffffff"/> </android.support.v7.widget.Toolbar> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/toolbar" android:gravity="center" > <ImageView android:layout_width="200dp" android:layout_height="200dp" android:background="@mipmap/cheese_5" android:scaleType="centerCrop" /> </LinearLayout> </RelativeLayout> <!--伸缩菜单--> <android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:layout_gravity="left" app:headerLayout="@layout/left_menu_layout" app:menu="@menu/menu_main" > <!-- <TextView android:layout_width="match_parent" android:layout_height="100dp" android:text="头衔" android:layout_gravity="top" android:background="@color/colorPrimary" android:gravity="center" android:textColor="#ffffff"/>--> </android.support.design.widget.NavigationView> </android.support.v4.widget.DrawerLayout>
如图:top_rly是展示的内容布局,nav_view是可伸缩的侧滑菜单。在nav_view中,我们为其添加了一个menu和headerlayout,这两个是用于展示菜单的栏目和头布局的。
left_menu_layout的布局如下:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="70dp" android:fitsSystemWindows="true" android:background="@color/colorPrimary" android:gravity="bottom" android:paddingLeft="10dp" android:paddingBottom="5dp"> <ImageView android:id="@+id/image" android:layout_width="40dp" android:layout_height="40dp" android:background="@mipmap/ic_launcher"/> <TextView android:id="@+id/nick_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/image" android:textColor="#ffffff" android:text="昵称" /> </RelativeLayout>menu_main的文件如下:
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:id="@+id/topPanel" > <item android:title="菜单1" android:id="@+id/menu1" android:icon="@mipmap/ic_dashboard" android:checked="false" /> <item android:title="菜单2" android:id="@+id/menu2" android:icon="@mipmap/ic_forum" android:checked="false" /> <item android:title="菜单3" android:id="@+id/menu3" android:icon="@mipmap/ic_event" android:checked="false" /> </group> </menu>我们看在代码中的实现:
//关闭抽屉 navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.menu1: Toast.makeText(MainActivity.this, "点击菜单1", Toast.LENGTH_SHORT).show(); break; case R.id.menu2: Toast.makeText(MainActivity.this, "点击菜单2", Toast.LENGTH_SHORT).show(); break; case R.id.menu3: Toast.makeText(MainActivity.this, "点击菜单3", Toast.LENGTH_SHORT).show(); break; } drawerLayout.closeDrawers(); return true; } }); } //打开抽屉 @Override public void onClick(View v) { drawerLayout.openDrawer(GravityCompat.START); }差不多就这样吧,下班啦~~~