Material Design之ActionBar、ToolBar

前言

Material Design是由谷歌的设计工程师们基于传统优秀的设计原则，结合丰富的创意和科学技术所发明的一套全新的界面设计语言，包含了视觉、运动、互动效果等特性。现实生活中，很多公司会自己封装界面的跳转、设计等，于是很多android应用风格不统一。鉴于此，Google工程师们提供了一套基本的平台界面。

此系列文章，一点点的介绍Material Design风格搭建。首先是“标题栏”：

工程创建

不必说，new project-empty activity，各种自己保存。空工程如图一：

图一

ActionBar

原系统自带标题栏ActionBar基本上都知道，很多公司会自己封装的，可以试着更改AndroidManifest.xml文件的一些属性，更改主题（当然，app名字、app桌面图标都可以在这里改）：

图二

图三

android:theme="@style/AppTheme"这句话就是app的主题，所谓主题，就是图三。点击跳转到styles.xml文件（res/values/style.xml），更改AppTheme，可以查看不同（自己增加点color）。

//这是style.xml

<!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/blue</item>
        <item name="colorPrimaryDark">@color/main_color</item>
        <item name="colorAccent">@color/red</item>
    </style>

   //这是colors.xml

    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>

    <color name="yellow">#FFFF00</color>
    <color name="blue">#834cb1</color>
    <color name="white">#FFFFFF</color>
    <color name="red">#E91010</color>
    <color name="black">#353535</color>
    <color name="main_color">#0065b4</color>
    <color name="dividerColor">#dadada</color>
    <color name="gray">#AAAAAA</color>

其实如果熟悉Framwork的话，应该知道，activity里面实际上有个phoneWindow，里面又有个decorView的，所以我们平时的setContentView()方法，知道放哪儿去了吧。

最后运行得到：

图四

图五

ToolBar

现在增加Material Design的ToolBar：修改activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!--高度：actionBar的size-->
    <!--主题为深色系-->
    <!--弹出框为浅色系-->
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/tool_bar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/main_color"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</LinearLayout>

至于为什么要这么写，注释已经有了。关于那个@style，实际上就是style定义的资源，里面的资源是可写成<...，parent:...>，类似于继承样式的，具体可以自己研究。

Mainactivity里面也要改一下，不然加进来的这个toolbar就只是个布局view：

图六

用Buttknife也好，自己用findviewbyid也好，随便。运行得到效果：

图七

标题栏太单调了？是的。再加吧，也可以自己定义view，然后布局，加自己想要的，当然，这里介绍的Material Design，那就用这种吧。

New-Menu resource file（在res-layout里面，也可以自己建一个directory包，单独放自己的menu，都是可以的）。这个menu就是自己找图自己定义了。

图八

MainActivity里面修改（重写父类某两个函数）：

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()){
            case R.id.search:
                Toast.makeText(this, "搜索", Toast.LENGTH_SHORT).show();
                break;
            case R.id.setting:
                Toast.makeText(this, "设置", Toast.LENGTH_SHORT).show();
                break;
            case R.id.add:
                Toast.makeText(this, "添加", Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
        return true;
    }

运行结果：（可以根据需要在toolBar里面增加返回按键，修改activity_main.xml，在toolbar里面增加1，或者在MainActivity的oncreat里面添加2）。

这里为了演示，效果图太丑太丑，感觉会毁了人家公司。。。。（所以自定义ActionBar到BaseActivity的确也很完美）

//1
app:navigationIcon="@mipmap/title_bar_back"
//2
toolbar.setNavigationIcon(R.mipmap.back);

图九