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

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

前面提到 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 的运行效果

按照效果图，从左到右分别是我们前面提及到的导航栏图标、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) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_tool_bar);        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);//设置导航栏图标        toolbar.setLogo(R.mipmap.ic_launcher);//设置app logo        toolbar.setTitle("Title");//设置主标题        toolbar.setSubtitle("Subtitle");//设置子标题        toolbar.inflateMenu(R.menu.base_toolbar_menu);//设置右上角的填充菜单        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {            @Override            public boolean onMenuItemClick(MenuItem item) {                int menuItemId = item.getItemId();                if (menuItemId == R.id.action_search) {                    Toast.makeText(ToolBarActivity.this , R.string.menu_search , Toast.LENGTH_SHORT).show();                } else if (menuItemId == R.id.action_notification) {                    Toast.makeText(ToolBarActivity.this , R.string.menu_notifications , Toast.LENGTH_SHORT).show();                } else if (menuItemId == R.id.action_item1) {                    Toast.makeText(ToolBarActivity.this , R.string.item_01 , Toast.LENGTH_SHORT).show();                } else if (menuItemId == R.id.action_item2) {                    Toast.makeText(ToolBarActivity.this , R.string.item_02 , Toast.LENGTH_SHORT).show();                }                return true;            }        });    }}

代码到此已经完成了 Toolbar 的基本使用，下面有几个代码里面需要注意的地方：

我们在使用 Toolbar 时候需要先隐藏掉系统原先的导航栏，我这里直接在BaseActivity中调用 supportRequestWindowFeature(Window.FEATURE_NO_TITLE) 去掉了默认的导航栏（注意，我的BaseActivity是继承了AppCompatActivity的，如果是继承Activity就应该调用requestWindowFeature(Window.FEATURE_NO_TITLE)）；
如果你想修改标题和子标题的字体大小、颜色等，可以调用setTitleTextColor、setTitleTextAppearance、setSubtitleTextColor、setSubtitleTextAppearance 这些API；
自定义的View位于 title、subtitle 和 actionmenu 之间，这意味着，如果 title 和 subtitle 都在，且 actionmenu选项太多的时候，留给自定义View的空间就越小；
导航图标和 app logo 的区别在哪？如果你只设置导航图标（ or app logo）和 title、subtitle，会发现 app logo 和 title、subtitle 的间距比较小，看起来不如导航图标与它们两搭配美观；
Toolbar 和其他控件一样，很多属性设置方法既支持代码设置，也支持在xml中设置；

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:toolbar="http://schemas.android.com/apk/res-auto"    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"        toolbar:navigationIcon="@mipmap/ic_drawer_home"        toolbar:logo="@mipmap/ic_launcher"        toolbar:subtitle="456"        toolbar:title="123">                <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="Clock" />    android.support.v7.widget.Toolbar>LinearLayout>

必须设置自定义命名空间：

xmlns:toolbar="http://schemas.android.com/apk/res-auto"

系统默设置了ActionMenu每个Item的文字颜色和大小，像ToolbarActivity在Google原生5.1系统下默认效果就是下面这样的

此时，如果我有需求要改变一下item文字颜色，应该怎么破？我按照网上比较普遍的解决方案，做了如下两步的修改操作：

在styles.xml中自定义一个Theme，并设置 android:textColorPrimary 属性

<style name="Theme.ToolBar.Base" parent="Theme.AppCompat.Light.NoActionBar">    <item name="android:textColorPrimary">@color/color_redstyle>

在布局文件的Toolbar中设置popupTheme（注意：是toolbar:xxx，不是android:xxx）

<android.support.v7.widget.Toolbar    android:id="@+id/toolbar"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="@color/color_0176da"    toolbar:popupTheme="@style/Theme.ToolBar.Base">        <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Clock" />android.support.v7.widget.Toolbar>

这种方法也有一个小缺点，同时改变了自定义控件文字颜色

如果你想要修改 ActionMenu Item 的文字大小，也可以在theme中设置加上如下设置

<item name="android:textSize">20spitem>

仿知乎主页面

为了加深一下 Toolbar 的开发体验，我们使用 Toolbar 来实现知乎主页的效果！先来看下知乎主页的效果

如果前面的内容你看明白，想撸出这个界面无非是几分钟的事情，下面就直接上代码，不做赘述了。

ZhiHuActivity界面代码

public class ZhiHuActivity extends BaseActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_zhi_hu);        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        toolbar.inflateMenu(R.menu.zhihu_toolbar_menu);        toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);        toolbar.setTitle(R.string.home_page);        toolbar.setTitleTextColor(getResources().getColor(android.R.color.white));    }}

zhihu_toolbar_menu.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">    <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_settings"        android:orderInCategory="100"        android:title="@string/menu_settings"        app:showAsAction="never" />    <item        android:id="@id/action_about"        android:orderInCategory="101"        android:title="@string/menu_about_us"        app:showAsAction="never" />menu>

activity_zhi_hu.xml 布局

<?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"        android:theme="@style/Theme.ToolBar.ZhiHu">    android.support.v7.widget.Toolbar>    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@android:color/white">        <ImageView            android:layout_width="60dp"            android:layout_height="60dp"            android:layout_centerInParent="true"            android:background="@mipmap/ic_zhihu_logo" />    RelativeLayout>LinearLayout>

styles.xml 中的 Theme.ToolBar.ZhiHu，给 Toolbar 设置android:theme用的

    ...    ...

最终得到下面这样的效果

这里在 Toolbar 设置 android:theme=”@style/Theme.ToolBar.ZhiHu” 主要是为了替换系统右上角三个点的图标，如果不设置，则会成系统默认主题的样子。

最后，再给知乎的主页面做个小小的优化，它在 Android 4.4 上运行还是能够看到一条黑乎乎的通知栏，为此我把 Toolbar 和 Translucent System Bar 的特性结合起来，最终改进成下面的效果（附上 Android4.4 和 5.1 上的运行效果）。

如果你还不知道 Translucent System Bar 的特性怎么使用，请查看我转载的文章：Android Translucent System Bar 开发详解-实现沉浸式通知栏（通知栏与导航栏颜色相同）

源码点击此处下载

转自：
https://github.com/D-clock/AndroidSystemUiTraining/blob/master/note/01_AndroidSystemUI%EF%BC%9AToolBar%E7%89%B9%E6%80%A7%E7%9A%84%E4%BD%BF%E7%94%A8.md

Android(安卓)Toolbar详解-实现Material Design 风格的导航栏

仿知乎主页面

更多相关文章

随机推荐

Android(安卓)Toolbar详解-实现Material Design 风格的导航栏

初识 Toolbar

开始使用 Toolbar

仿知乎主页面

更多相关文章

随机推荐