让你的布局更加酷炫——Material Design滑动菜单

很早之前就像写个android的侧滑菜单加入到项目中了，但是很多给的都是密密麻麻的代码，今天看到了简单快速的实现方法：通过NavigationView+DrawerLayout来实现侧滑菜单的功能。Google I/O 2015 给大家带来了Android Design Support Library，对于希望做md风格的app的来说，简直是天大的喜讯.NavigationView是是Google在5.0之后推出了NavitationView，就是我们左边滑出来的那个菜单。这个菜单整体上分为两部分，上面一部分叫做HeaderLayout，下面的那些点击项都是menu菜单项，这样的效果如果我们要自己写肯定也能写出来，但比较复杂，没有必要，既然Google提供了这个控件，那我们当然选择简单的实现方式。

马上来看看是具体如何实现的吧：

1.首先要在project structure的dependence中导入v4.design包，导入后可以在build.grade下看到如下信息：

compile 'com.android.support:design:25.2.0'

2.使用NavigationView

首先在主布局文件中使用DrawerLayout作为外包装，里面包含一个主页面和侧滑的菜单页面，而侧滑菜单页面用NavigationView实现：

activity_main.layout：

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"
    android:id="@+id/activity_na"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.app.ui.MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/blue_700"
            android:gravity="center_vertical"
            android:orientation="horizontal">
            <ImageView
                android:id="@+id/main_menu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/mm"
                android:background="@color/blue_700"

                android:layout_margin="20dp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="旅行者说"
                android:textColor="#ffffff"
                android:textSize="20sp"
                android:layout_marginLeft="16dp"/>
            <ImageView
                android:id="@+id/search"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/three"
                android:background="@color/blue_700"
                android:layout_margin="20dp"/>
        LinearLayout>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="主页"
            android:textSize="22sp"
            android:gravity="center"/>
    LinearLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/nav"
        android:layout_gravity="left"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        app:headerLayout="@layout/head"
        app:menu="@menu/new_menu"

        >

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

以上可以这样理解，drawerLayout中包含了主页面和侧滑的菜单页面，具体DrawerLayout用法参考官方文档。

我们可以看到

app:headerLayout="@layout/head"
        app:menu="@menu/new_menu"

这两个属性，它们分别表示头部的布局（也就是菜单的头部）和menu菜单，前者是布局文件而后者是菜单文件

来看下它们的具体内容：

首先是头布局：

xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="@color/blue_500">
    <ImageView
        android:id="@+id/person"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:layout_marginTop="42dp"
        android:src="@mipmap/lufei"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:layout_marginTop="24dp"
        android:textColor="#ffffff"
        android:text="沐风"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:layout_marginTop="12dp"
        android:textColor="#ffffff"
        android:layout_marginBottom="18dp"
        android:text="人生像一场没有尽头的旅行."/>

LinearLayout>

头布局内容很简单，只包含一张图片和两个textview

接下来是菜单menu：

xml version="1.0" encoding="UTF-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:checkableBehavior="single">
        <item
            android:id="@+id/favorite"
            android:icon="@mipmap/v"
            android:checkable="true"
            android:title="    会员"/>

    group>
    <item
        android:id="@+id/wallet"
        android:icon="@mipmap/wa"

        android:title="    钱包"/>
    <item
        android:id="@+id/photo"
        android:icon="@mipmap/photo"
        android:title="    相册"/>
    <item
        android:id="@+id/dress"
        android:icon="@mipmap/dress1"
        android:title="    装扮"/>
    <item
        android:id="@+id/file"
        android:icon="@mipmap/file"
        android:title="    文件"/>

menu>

menu里包含了各个菜单项，每个菜单项可以设置icon和title以及点击状态，关于menu的具体用法参考网上的文章：

http://blog.csdn.net/yuzhongchun/article/details/8956256

http://blog.csdn.net/a600423444/article/details/7417613

下面基本工作做完了，就到activity里去设置一下点击事件吧：

public class MainActivity extends Activity implements View.OnClickListener {
    private DrawerLayout drawerLayout;
    private SystemBarTintManager tintManager;
    private NavigationView navigationView;
    ImageView menu;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initWindow();
        drawerLayout = (DrawerLayout) findViewById(R.id.activity_na);
        navigationView = (NavigationView) findViewById(R.id.nav);
        menu= (ImageView) findViewById(R.id.main_menu);
        View headerView = navigationView.getHeaderView(0);//获取头布局
        menu.setOnClickListener(this);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                //item.setChecked(true);
                Toast.makeText(MainActivity.this,item.getTitle().toString(),Toast.LENGTH_SHORT).show();
                drawerLayout.closeDrawer(navigationView);
                return true;
            }
        });
    }


    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.main_menu://点击菜单，跳出侧滑菜单
                if (drawerLayout.isDrawerOpen(navigationView)){
                    drawerLayout.closeDrawer(navigationView);
                }else{
                    drawerLayout.openDrawer(navigationView);
                }
                break;
        }
    }
    private void initWindow() {//初始化窗口属性，让状态栏和导航栏透明
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            tintManager = new SystemBarTintManager(this);
            int statusColor = Color.parseColor("#1976d2");
            tintManager.setStatusBarTintColor(statusColor);
            tintManager.setStatusBarTintEnabled(true);
        }
    }
}

侧滑菜单不仅通过手指滑动来实现，还可以通过主页面的菜单键点击的实现，详情看上面代码，可以为菜单项设置点击事件，通过

setNavigationItemSelectedListener

来实现，以上的此外，侧滑菜单头布局也可以设置点击事件，通过View head=navigtionview.getHeaderView实现，这里的点击事件我没有写，这里我还将状态栏的颜色改成了标题栏的颜色，达到整体的界面协调。具体实现方法可以参考文章http://blog.csdn.net/s1674521/article/details/59480114

3.思考如何关闭手势滑动？

NavigationView的确没有相关关闭侧滑手势的属性，但是别忘了，drawerLayout却可以，通过以下属性可以关闭滑动手势操作：

在android抽屉开发中，需要关闭手势滑动，来滑出弹出框

mDrawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED); //关闭手势滑动

mDrawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED); //打开手势滑动