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