Android开发：最详细的 Toolbar 开发实践总结

644 查看

最详细的 Toolbar 开发实践总结

过年前发了一篇介绍 Translucent System Bar 特性的文章 Translucent System Bar 的最佳实践，收到很多开发者的关注和反馈。今天开始写第二篇，全面的介绍一下 Toolbar 的使用。说起 Toolbar ，可能有很多开发的童鞋还比较陌生，没关系，请接着往下看。

初识 Toolbar

Toolbar 是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件，Google 非常推荐大家使用 Toolbar 来作为Android客户端的导航栏，以此来取代之前的 Actionbar 。与 Actionbar 相比，Toolbar 明显要灵活的多。它不像 Actionbar 一样，一定要固定在Activity的顶部，而是可以放到界面的任意位置。除此之外，在设计 Toolbar 的时候，Google也留给了开发者很多可定制修改的余地，这些可定制修改的属性在API文档中都有详细介绍，如：

设置导航栏图标；
设置App的logo；
支持设置标题和子标题；
支持添加一个或多个的自定义控件；
支持Action Menu；

Toolbar支持的特性

总之，与 Actionbar 相比，Toolbar 让我感受到Google满满的诚意。怎样？是否已经对 Toolbar 有大概的了解，跃跃欲试的感觉出来了有木有？接下来，我们就一步一步的来看如何使用 Toolbar（其实是我使用 Toolbar 踩坑填坑的血泪史，你们接下去看，我先擦个眼泪…. ）。

开始使用 Toolbar

前面提到 Toolbar 是在 Android 5.0 才开始加上的，Google 为了将这一设计向下兼容，自然也少不了要推出兼容版的 Toolbar 。为此，我们需要在工程中引入 appcompat-v7 的兼容包，使用 android.support.v7.widget.Toolbar 进行开发。下面看一下代码结构，同样把重点部分已经红圈圈出：

关键部分代码

ToolbarActivity 包含了 Toolbar 的一些基本使用， ZhiHuActivity 是在熟悉了 Toolbar 后对知乎主页面的一个高仿实现。
layout和menu文件夹分别是上面提到的两个Activity的布局文件和 actionmenu 菜单文件。
values、values-v19、values-v21 中包含了一些自定义的 theme，后面用到的时候会顺带讲解。

我们先来看一下 ToolbarActivity 的运行效果

ToolbarActivity效果图

按照效果图，从左到右分别是我们前面提及到的 导航栏图标、App的logo、标题和子标题、自定义控件、以及 ActionMenu 。接着，我们来看下布局文件和代码实现。

首先，在布局文件 activity_tool_bar.xml 中添加进我们需要的 Toolbar 控件

<?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">

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/color_0176da">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Clock" />

</android.support.v7.widget.Toolbar>

</LinearLayout>

接着在 base_toolbar_menu.xml 中添加 action menu 菜单项

<?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">

<item

android:id="@id/action_search"

android:icon="@mipmap/ic_search"

android:title="@string/menu_search"

app:showAsAction="ifRoom" />

<item

android:id="@id/action_notification"

android:icon="@mipmap/ic_notifications"

android:title="@string/menu_notifications"

app:showAsAction="ifRoom" />

<item

android:id="@+id/action_item1"

android:title="@string/item_01"

app:showAsAction="never" />

<item

android:id="@+id/action_item2"

android:title="@string/item_02"

app:showAsAction="never" />

</menu>

最后到 ToolbarActivity 中调用代码拿到这 Toolbar 控件，并在代码中做各种setXXX操作。

/**

* Toolbar的基本使用

public class ToolBarActivity extends BaseActivity {

@Override

protected void onCreate(Bundle savedInstanceState)="crayon-line" id="crayon-5812bc22a305f506599783-7"> protected void onCreate(Bundle savedInstanceState)stem Bar 的最佳实践，收到很多开发者的关注和反馈。今天开始写第二篇，全面的介绍一下 Toolbar 的使用。说起 Toolbar ，可能有很多开发的童鞋还比较陌生，没关系，请接着往下看。

初识 Toolbar

设置导航栏图标；
设置App的logo；
支持设置标题和子标题；
支持添加一个或多个的自定义控件；
支持Action Menu；

Toolbar支持的特性

开始使用 Toolbar

关键部分代码

ToolbarActivity 包含了 Toolbar 的一些基本使用， ZhiHuActivity 是在熟悉了 Toolbar 后对知乎主页面的一个高仿实现。
layout和menu文件夹分别是上面提到的两个Activity的布局文件和 actionmenu 菜单文件。
values、values-v19、values-v21 中包含了一些自定义的 theme，后面用到的时候会顺带讲解。

我们先来看一下 ToolbarActivity 的运行效果

ToolbarActivity效果图

首先，在布局文件 activity_tool_bar.xml 中添加进我们需要的 Toolbar 控件

<?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">

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/color_0176da">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Clock" />

</android.support.v7.widget.Toolbar>

</LinearLayout>

接着在 base_toolbar_menu.xml 中添加 action menu 菜单项

<?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">

<item

android:id="@id/action_search"

android:icon="@mipmap/ic_search"

android:title="@string/menu_search"

app:showAsAction="ifRoom" />

<item

android:id="@id/action_notification"

android:icon="@mipmap/ic_notifications"

android:title="@string/menu_notifications"

app:showAsAction="ifRoom" />

<item

android:id="@+id/action_item1"

android:title="@string/item_01"

app:showAsAction="never" />

<item

android:id="@+id/action_item2"

android:title="@string/item_02"

app:showAsAction="never" />

</menu>

最后到 ToolbarActivity 中调用代码拿到这 Toolbar 控件，并在代码中做各种setXXX操作。

/**

* Toolbar的基本使用

public class ToolBarActivity extends BaseActivity {

@Override

protected void onCreate(Bundle savedInstanceState)f='http://androi