android ——滑动菜单

一、DrawerLayout是一个拥有两个子控件的布局，第一个子控件是主屏幕中显示的内容，第二个子控件是滑动菜单中显示的内容：

 <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"
     >

     <FrameLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent">

         <android.support.v7.widget.Toolbar
             android:id="@+id/toolbar"
             android:layout_width="match_parent"
             android:layout_height="?attr/actionBarSize"
             android:background="?attr/colorPrimary"
             android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
             app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

     </FrameLayout>
     <TextView
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_gravity="start"
         android:text="这是一个菜单"
         android:textSize="30sp"
         android:background="#FFF"/>
 </android.support.v4.widget.DrawerLayout>

要注意的地方是第二个子控件TextView的layout_gravity属性指定的是滑动菜单是在屏幕的左边还是右边，属性值使用right或者left,这里使用start表示根据系统语言进行判断。

这里的效果是这样：

然后在标题栏上加入一个导航按钮，点击导航按钮也能打开滑动菜单，具体实现原理是，标题栏左方本来就有一个叫作HomeAsup的按钮，它默认的图标是一个返回的箭头，含义是返回上一个活动，所以只需要将它显示出来，修改它的图标和点击事件即可。

具体java代码：

 public class MainActivity extends AppCompatActivity {

     private DrawerLayout mDrawerLayout;
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
         setSupportActionBar(toolbar);
         mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
         ActionBar actionBar = getSupportActionBar();
         if(actionBar != null){
             //让ActionBar的HomeAsUp按钮显示出来
             actionBar.setDisplayHomeAsUpEnabled(true);
             //改变HomeAsUp按钮的图标
             actionBar.setHomeAsUpIndicator(R.drawable.ic_action_name);
         }

     }
     ...
     public boolean onOptionsItemSelected(MenuItem item){
         switch (item.getItemId()){
             case android.R.id.home:
                 mDrawerLayout.openDrawer(GravityCompat.START);
                 break;
     ...
             default:
                 break;
         }
         return true;
     }
 }

HomeAsup的id永远都是android.R.id.home，mDrawerLayout.openDrawer(GravityCompat.START)调用这个方法就可以打开滑动菜单。

二、 在滑动菜单中定制任意的布局——使用NavigationView

使用这个NavigationView先要添加一个库，

compile 'com.android.support:design:26.0.0-alpha1'

这里为了一个图片圆形化的功能我又添加了另一个库

compile 'de.hdodenhof:circleimageview:2.1.0'

把DrawerLayout的第二个子控件换成NavigationView，具体代码如下：

 <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"
     >

     <FrameLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent">

         <android.support.v7.widget.Toolbar
             android:id="@+id/toolbar"
             android:layout_width="match_parent"
             android:layout_height="?attr/actionBarSize"
             android:background="?attr/colorPrimary"
             android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
             app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

     </FrameLayout>
     <android.support.design.widget.NavigationView
         android:id="@+id/nav_view"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_gravity="start"
         app:menu="@menu/nav_menu"
         app:headerLayout="@layout/nav_header">

     </android.support.design.widget.NavigationView>
 </android.support.v4.widget.DrawerLayout>

app:menu和app:headerLayout两个属性分别指定了NavigationView的具体菜单项和头部布局，这里只是先写好一个名字，还需要去创建这样两个布局文件：

菜单项：

 <menu xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:android="http://schemas.android.com/apk/res/android">

     <group android:checkableBehavior="single">
         <item
             android:id="@+id/nav_call"
             android:icon="@drawable/nav_call"
             android:title="Call" />
         <item
             android:id="@+id/nav_friend"
             android:icon="@drawable/nav_friend"
             android:title="Friend" />
         <item
             android:id="@+id/nav_location"
             android:icon="@drawable/nav_location"
             android:title="Location" />
         <item
             android:id="@+id/nav_mail"
             android:icon="@drawable/nav_mail"
             android:title="Mail" />
         <item
             android:id="@+id/nav_task"
             android:icon="@drawable/nav_task"
             android:title="Task" />
     </group>
 </menu>

</menu>里嵌套了一个</group>，然后将group的checkableBehavior属性设置为single表示所有的菜单只能单选。

然后是头部布局：

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="180dp"
     android:padding="10dp"
     android:background="?attr/colorPrimary">

     <de.hdodenhof.circleimageview.CircleImageView
         android:id="@+id/icon_image"
         android:layout_width="70dp"
         android:layout_height="70dp"
         android:src="@drawable/nac_icon"
         android:layout_centerInParent="true"/>

     <TextView
         android:id="@+id/mail"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentBottom="true"
         android:text="943217258@qq.com"
         android:textSize="14sp"
         android:textColor="#FFF"/>

     <TextView
         android:id="@+id/username"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_above="@id/mail"
         android:text="一个名字"
         android:textSize="14sp"
         android:textColor="#FFF"/>
 </RelativeLayout>

最终效果：

最后就是菜单项的点击事件了，直接改java代码就行：

  NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
  navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
  　　@Override
      public boolean onNavigationItemSelected(MenuItem item) {
      　　switch (item.getItemId()){
          　　case R.id.nav_call:
              　　Intent intent = new Intent(MainActivity.this,Main2Activity.class);
                  startActivity(intent);
                  break;
             }
                return true;
         }
     });