Android Material Design(2) ToolBar,NavigationView以及DrawerLayot的使用

今天结合ToolBar,NavigationView以及DrawerLayou来实现一下侧滑菜单

Android Studio依赖:

compile 'com.android.support:appcompat-v7:23.2.0'
compile 'com.android.support:design:23.2.0'
compile 'com.android.support:support-v4:23.2.0'

首先我们的布局是这样子的:

<?xml version="1.0" encoding="utf-8"?>
<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/drawlayout_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <LinearLayout
        android:id="@+id/flayout_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ff6600"></android.support.v7.widget.Toolbar>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Hello World" />
    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigat_view_main"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/head_layout"
        app:menu="@menu/header_menu"></android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

上面的布局中.

NavigationView引用了一个headerLayout和一个menu,headerlayout就是侧滑菜单中背景颜色为橘黄色的一部分,menu就是侧滑菜单中的菜单了,首先我们看一下headerLayout的布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:gravity="center"
    android:orientation="vertical"
    android:background="#ff6600">

    <ImageView
        android:id="@+id/img_header_icon"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/ic_launcher"
        />

    <TextView
        android:id="@+id/txt_header_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我就是我,不一样的烟火"
        android:textColor="#fff"/>
</LinearLayout>

很简单的一个线性布局

我们的菜单是这样子的

<?xml version="1.0" encoding="utf-8"?>
<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/header_menu1"
            android:icon="@mipmap/ic_launcher"
            android:title="Material Design"></item>
        <item
            android:id="@+id/header_menu2"
            android:icon="@mipmap/ic_launcher"
            android:title="我的收藏"></item>
        <item
            android:id="@+id/header_menu3"
            android:icon="@mipmap/ic_launcher"
            android:title="关于"></item>
    </group>
</menu>

这样即使我们没写一行java代码.我们的侧滑菜单就已经实现了.毕竟DrawLayout给我们提供了很多的便利

下面贴一下代码,

package com.example.imgod.md_1;

import android.content.res.ColorStateList;
import android.graphics.Color;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private DrawerLayout drawlayout_main;
    private NavigationView navigat_view_main;

    private View headView;
    private ImageView img_header_icon;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initEvent();
    }

    //初始化视图
    private void initView() {
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        drawlayout_main = (DrawerLayout) findViewById(R.id.drawlayout_main);
        navigat_view_main = (NavigationView) findViewById(R.id.navigat_view_main);
        //我们先用NavigarView拿到Headview,然后才能拿到HeadView中的其他View
        headView = navigat_view_main.getHeaderView(0);
        img_header_icon = (ImageView) headView.findViewById(R.id.img_header_icon);

        //设置NavigarView中菜单的颜色
//        navigat_view_main.setItemTextColor(ColorStateList.valueOf(Color.rgb(0xff,0x66,0x00)));
        //设置NavigarView中菜单的背景
        navigat_view_main.setItemBackgroundResource(R.drawable.menu_item_drawable);
    }


    //初始化事件
    private void initEvent() {
        //把我们的toolBar设置上去
        setSupportActionBar(toolbar);
        //ActionBarDrawerToggle 把toolbar drawLayout关联起来
        ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawlayout_main, toolbar, R.string.open, R.string.close);
        actionBarDrawerToggle.syncState();//同步状态
        drawlayout_main.addDrawerListener(actionBarDrawerToggle);
        //给NavigationView设置一个item选择事件
        navigat_view_main.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.header_menu1:
                        Toast.makeText(MainActivity.this, "点击了Material Design", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.header_menu2:
                        Toast.makeText(MainActivity.this, "点击了我的收藏", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.header_menu3:
                        Toast.makeText(MainActivity.this, "点击了关于", Toast.LENGTH_SHORT).show();
                        break;
                    default:
                        Log.e("main", "default");
                        break;
                }
                item.setChecked(true);
                drawlayout_main.closeDrawers();
                return true;
            }
        });

        //给侧滑菜单中的headview中的icon添加一个点击事件
        img_header_icon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "点击了Header View头像", Toast.LENGTH_SHORT).show();
                drawlayout_main.closeDrawer(GravityCompat.START);//关闭侧滑
            }
        });
    }


    //back键点击事件,如果抽屉是打开的.那就先关上
    @Override
    public void onBackPressed() {
        if (drawlayout_main.isDrawerOpen(GravityCompat.START)) {
            drawlayout_main.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }
}

项目重点:

1.NavigationView中headview中的控件怎么拿到?

//我们先用NavigarView拿到Headview,然后才能拿到HeadView中的其他View
headView = navigat_view_main.getHeaderView(0);
img_header_icon = (ImageView) headView.findViewById(R.id.img_header_icon);

2.NavigationView如何添加item的点击事件?

navigat_view_main.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener());

3.NavigationView中item的颜色以及选中后的颜色怎么设置?

这个主要是通过Theme实现

 <!--android:textColorPrimary 正常状态下icon和item的颜色-->
    <!--colorAccent 选中状态下icon和item的眼色-->
    <style name="NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:textColorPrimary">@color/text_color</item>
        <item name="colorAccent">@color/app_color</item>
    </style>

然后把这个Style设置给Activity就行了

4.明明我给NavigationView设置了OnNavigationItemSelectedListener监听,为何点击没有效果?

首先检查DrawLayout的第一个子View是不是内容视图,DrawLayout规定第一个视图必须是内容视图(可以没有内容视图,如果有,必须是第一个)

源码地址:https://github.com/imgod1/Md_1