android开发 -- Android Toolbar 开发实践总结（Material Design）

缺乏、安全感 2022-07-14 03:10 285阅读 0赞

## 推荐另一篇 Toolbar 的文章： ##

## [http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1118/2006.html][http_jcodecraeer.com_a_anzhuokaifa_androidkaifa_2014_1118_2006.html] ##

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

## 初识 Toolbar ##

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

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

![2][]

Toolbar支持的特性

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

## 开始使用 Toolbar ##

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

![1240][]  
关键部分代码

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

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

![strip][]

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="?attr/actionBarSize"
            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 菜单项（即toolbar最右边那“三个点”的更多按钮）**

<?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item
            android:id="@id/action_search"
            android:icon="@mipmap/ic_search"
            android:title="@string/menu_search" />
    
        <item
            android:id="@id/action_notification"
            android:icon="@mipmap/ic_notifications"
            android:title="@string/menu_notifications"/>
    
        <item
            android:id="@+id/action_item1"
            android:title="@string/item_01"/>
    
        <item
            android:id="@+id/action_item2"
            android:title="@string/item_02"/>
    </menu>

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

/**
     * Toolbar的基本使用
     */
    public class ToolBarActivity extends AppcompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_tool_bar);
    
            Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    
            // 继承的activity要是 AppcompatActivity 下面这句话setSupportActionBar才有效
            // 设置后Toolbar即能取代原本的 actionbar 了
            setSupportActionBar(toolbar);
    
    
            try {
                getSupportActionBar().setDisplayShowHomeEnabled(true);    //使左上角图标是否显示，如果设成false，则没有程序图标，仅仅就个标题，否则，显示应用程序图标
                getSupportActionBar().setDisplayShowTitleEnabled(false);   //隐藏toolbar上的app title
                getSupportActionBar().setDisplayHomeAsUpEnabled(true);    //先启用home as up：即打开侧边栏那个按钮
            } catch (NullPointerException e) {
                e.printStackTrace();
            }
    
            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);//设置右上角的填充菜单
            //设置toolbal最右边 那“三个点” 更多菜单选项监听器
            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;
                }
            });
    
        }
    
    
    
        /**
         * 开启toolbal最右边 那“三个点” 更多按钮
         * （不写此方法的话那按钮不显示）
         * @param menu
         * @return
         */
        @Override
        public boolean onCreateOptionsMenu(Menu menu)
        {
            // Inflate the menu; this adds items to the action bar if it is present.
            getMenuInflater().inflate(R.menu.base_toolbar_menu, menu);
            return true;
        }
    
    
        /**
         * toolbar最左边那个打开侧滑栏的按钮
         * （在home菜单被点击的时候，打开drawer；不写此方法点击那按钮会没反应）
         * @param item
         * @return
         */
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            switch (item.getItemId()) {
                case android.R.id.home:     //toolbar最左边那个按钮
                    mDrawerLayout.openDrawer(GravityCompat.START);//打开侧滑栏
                    return true;
            }
    
            return super.onOptionsItemSelected(item);
        }
    
    
    }

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

1.  我们在**使用 Toolbar 时候**需要**先隐藏掉系统原先的导航栏****：方法一：在style中设置一个NoActionBar的Theme**。如下：  
    
    
        <style name="AppTheme.NoActionBar" >
                <item name="windowActionBar">false</item>
                <item name="windowNoTitle">true</item>
            </style>
    
      
    **方法二：**   直接在**BaseActivity中调用supportRequestWindowFeature(Window.FEATURE\_NO\_TITLE) 去掉了默认的导航栏**（注意，我的BaseActivity是继承了AppCompatActivity的，如果是继承Activity就应该调用**requestWindowFeature(Window.FEATURE\_NO\_TITLE)** ）；
2.  如果你想**修改标题和子标题的字体大小、颜色**等，可以调用**setTitleTextColor** 、**setTitleTextAppearance** 、**setSubtitleTextColor** 、**setSubtitleTextAppearance** 这些API；
3.  自定义的View位于 **title** 、 **subtitle** 和 **actionmenu** 之间，这意味着，如果**title** 和**subtitle** 都在，且**actionmenu选项** 太多的时候，留给自定义View的空间就越小；
4.  导航图标和 **app logo** 的区别在哪？如果你只设置 **导航图标** （ or  **app logo** ） 和 **title** 、 **subtitle** ，会发现  **app logo** 和 **title** 、 **subtitle** 的间距比较小，看起来不如**导航图标** 与 它们两搭配美观；
5.  Toolbar和其他控件一样，很多属性设置方法既支持代码设置，也支持在xml中设置（这里也是最最最最最坑爹的地方，如何坑爹法，请接着往下看）；

## Toolbar 踩坑填坑 ##

**坑一：xml布局文件中，Toolbar属性设置无效**

刚开始使用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="?attr/actionBarSize"
            android:background="@color/color_0176da"
            android:logo="@mipmap/ic_launcher"
            android:navigationIcon="@mipmap/ic_drawer_home"
            android:subtitle="456"
            android:title="123">
    
            
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Clock" />
        </android.support.v7.widget.Toolbar>
    </LinearLayout>

在真机跑起来之后，看到的结果是下面这样的。

![1240 1][]

Toolbar 属性设置无效

此时心中真是万千匹草泥马在奔腾，除了设置背景色和TextView有效外，说好的 **logo 、 navigationIcon 、subtitle 、 title**都跑哪去了？在编译器没报错又不见效果的情况下，参考了其他开发者的用法后找到了以下的解决方案，**就是在根布局中加入自定义属性的命名空间：**

xmlns:toolbar="http://schemas.android.com/apk/res-auto"(这里的toolbar可以换成你想要其他命名，做过自定义控件的童鞋相比很熟悉此用法了)

然后把所有用 **android:xxx** 设置无效的，都用  **toolbar：xxx**设置即可生效。最终的布局代码如下： **（正确写法）**

<?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="?attr/actionBarSize"
            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>

**ps：toolbar的高度可以设置成官方的【?attr/actionBarSize】如：**android:layout\_height="?attr/actionBarSize"

到此即可解决 xml 中属性设置失效的问题，为什么会出现这种问题呢？我猜测是因为这个控件是兼容版的控件，用 **android:xxx** 设置无效是的这些属性是在兼容包中，不在默认的Android SDK中，所以我们需要额外的引入。至于为什么IDE不报错，估计就是bug了吧！

**Action Menu Item 的文字颜色**

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

![strip 1][]

Android 5.1 默认的ActionMenu Item的风格

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

在styles.xml中自定义一个Theme，并设置 actionMenuTextColor 属性（注意：不是 android:actionMenuTextColor ）

在布局文件的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>

![strip 2][]

成功修改 actionmenu item 文字的颜色

这种方法也有一个小缺点，如果我把自定义控件换成Button，你会发现Button默认的文字颜色也变成了红色。所以，此处如果有朋友有更好的解决方案，请留言赐教。

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

## 仿知乎主页面 ##

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

![strip 3][]

Android 5.1上知乎主页效果图

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

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用的

<resources>
    
        ...
        ...
    
        <style name="Theme.ToolBar.ZhiHu" parent="Theme.AppCompat.Light.NoActionBar">
            <item name="actionOverflowButtonStyle">@style/ActionButton.Overflow.ZhiHu</item>
        </style>
    
        <style name="ActionButton.Overflow.ZhiHu" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
            <item name="android:src">@mipmap/ic_menu_more_overflow</item>
        </style>
    
    </resources>

最终得到下面这样的效果

![strip 4][]

Android5.1上仿知乎主页面效果

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

![1240 2][]

不设置Theme的效果

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

![1240 3][]

Android4.4上改进版的知乎主页

![1240 4][]

Android5.1上改进版的知乎主页

如果你还不知道 **Translucent System Bar** 的特性怎么使用，请查看我的上一篇文章： [ Translucent System Bar 的最佳实践][Translucent System Bar]

## 总结 ##

关于 **Toolbar** 的使用就介绍到此，本来是怀着很简单就可以上手的心态来使用，结果发现还是有很多坑需要填。果然还是验证了一句老话

纸上得来终觉浅，绝知此事要躬行

对于想要更深的了解 **Toolbar** 设计的童鞋，也可以看看这篇 [ 官网文档][Link 1] （自备梯子）。

同样，分享即美德，需要源代码的童鞋，请戳： [ https://github.com/D-clock/AndroidSystemUiTraining][https_github.com_D-clock_AndroidSystemUiTraining]

**[  
][https_github.com_D-clock_AndroidSystemUiTraining]**

【本文章转至，我稍做了修改】  [http://www.codeceo.com/article/android-toolbar-develop.html  
][https_github.com_D-clock_AndroidSystemUiTraining]

[http_jcodecraeer.com_a_anzhuokaifa_androidkaifa_2014_1118_2006.html]: http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1118/2006.html
[2]: /images/20220714/c5304e0faa5b4699aa278c1174533f78.png
[1240]: /images/20220714/e0caac2dbea9416bad8a384f0d109583.png
[strip]: /images/20220714/997e39da1ed748408e049c2b060a844e.png
[1240 1]: /images/20220714/ddd6679d2a41440ab847c657a7e0f8ad.png
[strip 1]: /images/20220714/b34300f63f5d494ab6eb92f46e7369d4.png
[strip 2]: /images/20220714/9ad939fba6e84f5681c3398c220e28dd.png
[strip 3]: /images/20220714/684bb74eebee4393ac2cef6ab51cd86b.png
[strip 4]: /images/20220714/f1cf68077ad5496ba2f6f8ac0e8a469f.png
[1240 2]: /images/20220714/65026b2c2da5412a91ae701fda267545.png
[1240 3]: /images/20220714/27e5f647f4234ce3b483e0b4b4a08998.png
[1240 4]: /images/20220714/791154e19bd445548b3c8863a4854c58.png
[Translucent System Bar]: http://www.jianshu.com/p/0acc12c29c1b
[Link 1]: http://www.google.com/design/spec/components/toolbars.html
[https_github.com_D-clock_AndroidSystemUiTraining]: https://github.com/D-clock/AndroidSystemUiTraining