实现Material Design风格的Actionbar和Drawer侧边导航栏

<strong><span style="font-size:18px;">前言：</span></strong>

        自从Google公布了Material Design之后，Android App的UI更加好看了，动画也nice不少。相信有情怀的码农（这个词真是被玩坏了=.=）肯定都不愿意做IOS风格的Android应用，都愿意用Google自己的Android Design。

        一个符合Android风格的App最基本也最标准的就是有一个ActionBar了，本篇博文就是实现Material Design的ActionBar外加Drawer侧边栏。先上截图：

      

        在5.0中，Google定义了一个叫Toolbar的控件，ToolBar基本上就是我们熟知的ActionBar，他们最主要的区别是ToolBar是我们所能控制的布局的一部分， 所以我们可以随意的实现一些自定义的效果，比如在ToolBar上使用动画、设定其高度之类的。为了使用此控件并向下兼容，就必须使用到AppCompat v7兼容包（关于Android各个兼容包，StormZhang这篇博文很不错的作了解释：Android Support兼容包详解）。

1.首先要定义一下 value 文件夹下的 style.xml 文件：

<resources>    <style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">        <!-- Toolbar颜色 -->        <item name="android:colorPrimary">@color/primary</item>        <!-- 状态栏颜色 -->        <item name="android:colorPrimaryDark">@color/primaryDark</item>        <!-- 返回键样式 -->        <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>    </style>    <style name="AppTheme.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">        <item name="color">@android:color/white</item>    </style></resources>

        AppCompat 就是能向下适配的主题，选择 NoActionBar 是因为等会我们自己去用 Toolbar 实现 ActionBar 并自行添加。 colorPrimary 和 colorPrimaryDark 两个参数一张图作解释：Toolbar左边的图案是用的5.0中的组件，如后面代码所示。

2.在 layout 文件夹下定义一个 Toolbar 的 xml 文件 include_toolbar.xml ：

<?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="?attr/actionBarSize"    android:layout_alignParentStart="true"    android:layout_alignParentTop="true"    android:background="@color/primary"    android:elevation="5dp"    android:popupTheme="@style/ThemeOverlay.AppCompat.Light"    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"></android.support.v7.widget.Toolbar>

3.主布局 xml 文件 activity_main.xml ：

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/drawerLayout"    android:layout_width="match_parent"    android:layout_height="match_parent">    <!-- 这里是主布局 -->     <RelativeLayout        android:layout_width="match_parent"        android:layout_height="match_parent">        <include            android:id="@+id/toolbar"            layout="@layout/include_toolbar" />    </RelativeLayout>    <!-- 这里是侧边栏的布局 -->    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="left|start"        android:background="@color/primary"        android:elevation="10dp"        android:orientation="vertical">        <ImageView            android:background="#FFFFFF"            android:layout_marginTop="200dp"            android:layout_width="match_parent"            android:layout_height="match_parent" />        </LinearLayout></android.support.v4.widget.DrawerLayout>

        DrawerLayout 就是侧边栏，需要注意的是侧边栏的布局要写在整个大布局的最后。

4.主 Activity 代码：

public class MainActivity extends BaseActivity {private Toolbar mToolbar;private DrawerLayout mDrawerLayout;private ActionBarDrawerToggle mDrawerToggle;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main_activity);findViews();init();setListeners();}@Overrideprotected void findViews() {mToolbar = (Toolbar) findViewById(R.id.toolbar);mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);}@Overrideprotected void init() {// 设置标题mToolbar.setTitle(R.string.app_name);mToolbar.setTitleTextColor(Color.parseColor("#FFFFFF"));// 将ToolBar设置为ActionBarsetSupportActionBar(mToolbar);getSupportActionBar().setHomeButtonEnabled(true);// 设置返回键可用getSupportActionBar().setDisplayHomeAsUpEnabled(true);// 创建返回键，并实现打开关/闭监听mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,mToolbar, R.string.draw_open, R.string.draw_close) {@Overridepublic void onDrawerOpened(View drawerView) {super.onDrawerOpened(drawerView);}@Overridepublic void onDrawerClosed(View drawerView) {super.onDrawerClosed(drawerView);}};mDrawerToggle.syncState();mDrawerLayout.setDrawerListener(mDrawerToggle);}@Overrideprotected void setListeners() {}}

        ActionbarDrawerToggle是侧边栏的监听器，控制侧边栏打开关闭后状态的改变。Activity必须继承自ActionBarActivity。

           后记：

         其实这个侧边导航栏在交互体验中被讨论很多，关于侧边栏的覆盖问题，有三种：1侧边栏不覆盖，在Toolbar之下。2侧边栏覆盖Toolbar。3覆盖Toolbar并在状态栏后显示。Google官方，例如Google商店就是采用第三种，博主在寻找实现这种的方法上花了点时间。最后实现了这个效果，下次把实现方法写下：