Android Toolbar 使用

概述

自从Google 推出 Material Design 发展至今，市面上大多的App都逐步采用了这种设计方式。其中新版本的5.X SDK中推荐使用AppCompatActivity代替了ActionBarActivity。对于ActionBar 本人并没有深入研究过。目前新版本的SDK也已经弃用了。取而代之的是ToolBar。

ToolBar 位于android.support.v7.widget.Toolbar,提供了低版本的兼容，包含了大多的ActionBar操作。并且ToolBar可以直接在布局文件中声明。相对ActionBar灵活很多。

ToolBar共有2中使用方式：

• 将ToolBar作为ActionBar使用
• 将ToolBar作为单独控件使用，意味着ToobBar可以和ActionBar共存。

本文主要说的是第一种方式，代替ActionBar。

使用ToolBar

隐藏ActionBar

App的主题需要继承 Theme.AppCompat.Light.NoActionBar

<style name="Theme.MaterialDesign" parent="Theme.AppCompat.Light.NoActionBar">        <item name="colorPrimary">@color/app_primary_color</item>        <item name="colorPrimaryDark">@color/app_primary_dark_color</item>        <item name="colorAccent">@color/app_primary_color</item>        <item name="android:textSize">16sp</item>        <item name="android:windowBackground">@color/white</item></style>

此处我使用了一些Color Palette ,对应Material Design

其中各种颜色的对应如下图：

其中navigationBarColor 属性5.0以下设备可能会失效，可以通过定义values-v21来设定。

在xml中声明ToolBar

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@id/toolbar"    style="@style/ToolBarStyle">    <TextView        android:id="@id/toolbar_title"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:ellipsize="end"        android:singleLine="true"        android:textColor="@color/white"        android:textSize="20sp" /></android.support.v7.widget.Toolbar>

由于本质上ToolBar是一个ViewGroud ，并且在ToolBar中的Title 属性显示的标题是在左上角的，所以我在这里定义了一个TextView用于显示标题

其中Toolbar 需要设定样式，ToolBarStyle

 <style name="ToolBarStyle">        <item name="android:layout_width">match_parent</item>        <item name="android:layout_height">45dp</item>        <item name="android:minHeight">45dp</item>        <item name="android:background">?attr/colorPrimary</item>        <item name="android:theme">@style/PopWindowStyle</item>    </style>

ToolBar 需要设定 background 这里设为 colorPrimary 的值，跟上面Material Design Theme 设定的ActionBar颜色一致。

<style name="PopWindowStyle" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">        <item name="android:colorBackground">@color/white</item>        <item name="android:textColorPrimary">@color/red</item></style>

这里设定了ToolBar的背景颜色和文字颜色。

在代码中使用ToolBar

首先，当然需要findViewById找到ToolBar

toolbar = (Toolbar) findViewById(R.id.toolbar); 

其次我这里有个title的TextView也需要找到：

toolbar_title = (TextView) findViewById(R.id.toolbar_title);

然后代替ActionBar

setSupportAction(toolbar);

注意，调用了 setSupportActionBar 之后，菜单的加载只能在onCreateOptionsMenu中加载了，然后在onOptionsItemSelected 处理菜单的点击事件。

假如你不需要ActionBar的功能，只需要作为标题和一些菜单的作用，你也可以不调用setSupportActionBar 然后直接用ToolBar 加载Menu 。

toolbar.inflateMenu(menuId);toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {              @Override              public boolean onMenuItemClick(MenuItem item) {                  return false;              }    });

通过setOnMenuItemClickListener来处理菜单的点击时间。

在实验过程中，也碰到一些问题。 假如我需要实现在ToolBar右边显示一个图标，点击之后会弹出相应的菜单选项出来，我采用的是定义Menu的二级菜单，然后用ToolBar加载。效果实现了，但是弹出来的选项框会出现在ToolBar顶部，而且把ToolBar的右边部分遮住了，我的需求是，选项框会在TooBar的右下方显示。（现在大多App都是这样的，毕竟不能挡住了菜单栏） 但是我发现并没有方法，最后想了个折中的方法，使用PopupWindow 在菜单点击的时候弹出来显示在ToolBar下方。目前没有找到ToolBar本事的实现方式。

例子

本例子实现ToolBar和DrawerLayout结合，左右两边都简单加载一个空白的Fragment，效果图：

例子实现起来非常简单。

首先是布局文件：

<?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="match_parent"    android:orientation="vertical">    <include layout="@layout/widget_toolbar" />    <android.support.v4.widget.DrawerLayout        android:id="@+id/drawerlayout"        android:layout_width="match_parent"        android:layout_height="match_parent">        <FrameLayout            android:id="@+id/drawer_content"            android:layout_width="match_parent"            android:layout_height="match_parent">        </FrameLayout>        <FrameLayout            android:id="@+id/drawer_menu"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_gravity="left"            android:background="@color/white">        </FrameLayout>    </android.support.v4.widget.DrawerLayout></LinearLayout>

接下来是Activity代码：

package com.crxz.sample;import android.os.Bundle;import android.support.annotation.Nullable;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.widget.TextView;import com.crxz.R;/** * Created by Crxz on 16-4-29 * Description: */public class DrawerToolbarActivity extends AppCompatActivity {    Toolbar mToolbar;    TextView mToolbar_title;    DrawerLayout mDrawerLayout;    SampleFragment leftFragment;    SampleFragment contentFragment;    ActionBarDrawerToggle mActionBarDrawerToggle;    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_drawer_toolbar);        initToolBar();        initViews();    }    private void initViews() {        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);        mActionBarDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close);        mActionBarDrawerToggle.syncState();        mDrawerLayout.setDrawerListener(mActionBarDrawerToggle);        leftFragment = new SampleFragment();        contentFragment = new SampleFragment();        getSupportFragmentManager().beginTransaction().add(R.id.drawer_menu,leftFragment,"left").commit();        getSupportFragmentManager().beginTransaction().add(R.id.drawer_content,contentFragment,"left").commit();    }    private void initToolBar() {        mToolbar = (Toolbar) findViewById(R.id.toolbar);        mToolbar.setTitle("");        mToolbar_title = (TextView) findViewById(R.id.toolbar_title);        mToolbar_title.setText("Title");        setSupportActionBar(mToolbar);        mToolbar.setNavigationIcon(R.drawable.ic_toolbar_back);    }}

几十行代码即可实现ToolBar + DrawerLayou结合 ，是不是很方便！！！

曾经我纠结过ToolBar 左上角的图标是怎么实现的，现在看来是因为ActionBarDrawerToggle自带的。