DrawerLayout的使用

          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);
    }
     差不多就这样吧,下班啦~~~
    可参考: 抽屉布局的使用



你可能感兴趣的:(android)