ToolBar+DrawerLayout实现MD设计效果

记录 学习 中遇到的点点滴滴 并将此分享给大家

先看图



在这篇文章里，我介绍了ToolBar的基本使用方法，并实现了一个难看的视图http://blog.csdn.net/u012552275/article/details/52431660

今次我将实现ToolBar+DrawerLayout实现Material Design设计效果

在项目中，我们的toolbar基本都是使用公用的，它遵循了APP布局优化。

我们写一个公用的toolbar，在主布局使用  include 加载布局。代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimaryDark"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize" />

在主布局中引用

<include
android:id="@+id/toolbar"
layout="@layout/public_toolbar"/>

为布局风格统一，color修改一下颜色

<resources>
<color name="colorPrimary">@color/material_deep_teal_200</color>
<color name="colorPrimaryDark">@color/material_deep_teal_500</color>
<color name="overflowTextColor">#9e9e9e</color>
</resources>

接着在style里修改

<style name="AppTheme" parent="@style/AppBaseTheme">
</style>

<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- 状态栏和标题栏颜色-->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<!-- 标题颜色-->
<item name="android:textColorPrimary">@android:color/white</item>

<!-- 箭头 -->
<item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
<!-- 溢出菜单文字颜色-->
<item name="textAppearanceLargePopupMenu">@style/OverflowMenuTextAppearance</item>
<!-- 菜单项点击selector-->
<item name="actionBarItemBackground">@drawable/abc_item_background_holo_dark</item>

</style>
<!-- 左边的箭头指示-->
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">@android:color/white</item>
</style>

</style>

到此，一个简单的ToolBar就完成了，接下来，我们加入Drawerlayout（当前Activity应该继承AppCompatActivity，试了一下，继承Activity没有某些方法）

接下来要在主布局加入DrawerLayout，如果没使用过DrawerLayout，请自行百度，网上介绍很多很全面很详细，这里不再复述

请看布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<include
android:id="@+id/toolbar"
layout="@layout/public_toolbar"/>

<android.support.v4.widget.DrawerLayout
android:id="@+id/drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/toolbar">
<!--主布局-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff" >

</LinearLayout>
<!--侧滑菜单左-->
<LinearLayout
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#009688">

</LinearLayout>
<!--侧滑菜单右-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="end"
android:background="#009688">

</LinearLayout>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>

类里的代码：

package com.mymap.toolbar;

import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Gravity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;

public class MainActivity extends AppCompatActivity
{
private Toolbar mToolbar;
private DrawerLayout mDrawerLayout;

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

mToolbar = (Toolbar) findViewById(R.id.toolbar);
mToolbar.setLogo(R.mipmap.ic_launcher);
mToolbar.setTitle("主标题");
mToolbar.setSubtitle("副标题");
setSupportActionBar(mToolbar);

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open, R.string.drawer_close) {
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}

@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
}
};
mDrawerToggle.syncState();
mDrawerLayout.setDrawerListener(mDrawerToggle);//设置监听器
}

@Override
public boolean onCreateOptionsMenu(Menu menu)
{
getMenuInflater().inflate(R.menu.main_menu, menu);
return super.onCreateOptionsMenu(menu);
}

@Override
public boolean onOptionsItemSelected(MenuItem item)
{
switch (item.getItemId())
{
case R.id.action_zone:
return toggleDrawerLayout();
case R.id.action_weather:
break;
case R.id.action_offline:
break;
case R.id.action_theme:
break;
case R.id.action_search:
break;
case R.id.action_scan:
break;
case R.id.action_setting:
break;
}
return super.onOptionsItemSelected(item);
}

protected boolean toggleDrawerLayout(){
//如果左边的已打开，则关闭左边的，不进行后续操作
if (mDrawerLayout.isDrawerOpen(Gravity.START)) {
mDrawerLayout.closeDrawer(Gravity.START);
return true;
}
//如果左边的没打开，右边的打开了关闭，关闭了打开
if (mDrawerLayout.isDrawerOpen(Gravity.END)) {
mDrawerLayout.closeDrawer(Gravity.END);
} else {
mDrawerLayout.openDrawer(Gravity.END);
}
return true;
}

}

这里我们加入了一个菜单的布局，在res目录下新建文件夹mune.xml，新建xxxx.xml，：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">

<item
android:id="@+id/action_zone"
android:icon="@mipmap/ic_launcher"
android:orderInCategory="90"
android:title="头像"
app:showAsAction="ifRoom"/>

<item
android:id="@+id/action_weather"
android:icon="@mipmap/ic_launcher"
android:orderInCategory="100"
android:title="天气"
app:showAsAction="never"/>

<item
android:id="@+id/action_offline"
android:icon="@mipmap/ic_launcher"
android:orderInCategory="100"
android:title="离线"
app:showAsAction="never"/>
<item
android:id="@+id/action_theme"
android:icon="@mipmap/ic_launcher"
android:orderInCategory="100"
android:title="夜间模式"
app:showAsAction="never"/>
<item
android:id="@+id/action_search"
android:icon="@mipmap/ic_launcher"
android:orderInCategory="100"
android:title="搜索"
app:showAsAction="never"/>
<item
android:id="@+id/action_scan"
android:icon="@mipmap/ic_launcher"
android:orderInCategory="100"
android:title="扫一扫"
app:showAsAction="never"/>
<item
android:id="@+id/action_setting"
android:icon="@mipmap/ic_launcher"
android:orderInCategory="100"
android:title="设置"
app:showAsAction="never"/>
</menu>

onOptionsItemSelected这个方法是事件监听，我在类里写得很清楚，不做解释

其中

DrawerToggle.syncState();

这个方法，因为某些原因，暂时无法翻墙，如果有哪位大神知道这是什么意思麻烦给个地址参观，谢过。在类里，我尽可能将注释写得非常全面了，我相信都扫一眼应该就能看得懂。欢迎大家与我交流。

Demo下载地址http://download.csdn.net/detail/u012552275/9628235