MaterialDesign设计-Toolbar

Toolbar将会是我们接触的第一个Material控件。

虽说对于Toolbar你暂时应该还是比较陌生的， 但是对于它的另一个相关控件ActionBar，每个活动最顶部的那个标题栏其实就是ActionBar， 之前我们编写的所有程序里一直都有ActionBar的身影。

不过ActionBar由于其设计的原因， 被限定只能位于活动的顶部， 从而不能实现一些Material Design的效果， 因此官方现在已经不再建议使用ActionBar了。 那么本书中我也就不准备再介绍ActionBar的用法了， 而是直接讲解现在更加推荐使用的Toolbar。

Toolbar的强大之处在于， 它不仅继承了ActionBar的所有功能， 而且灵活性很高， 可以配合其他控件来完成一些Material Design的效果， 下面我们就来具体学习一下。

首先你要知道， 任何一个新建的项目， 默认都是会显示ActionBar的， 这个想必你已经见识过太多次了。 那么这个ActionBar到底是从哪里来的呢？打开AndroidManifest.xml文件看一下：

android:theme="@style/AppTheme"Code language: JavaScript (javascript)

打开res/values/styles.xml文件：

<resources>

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

</resources>Code language: HTML, XML (xml)

这里定义了一个叫AppTheme的主题， 然后指定它的parent主题是Theme.AppCompat.Light.DarkActionBar。 这个DarkActionBar是一个深色的ActionBar主题， 我们之前所有的项目中自带的ActionBar就是因为指定了这个主题才出现的。

<resources>

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

</resources>Code language: HTML, XML (xml)

而现在我们准备使用Toolbar来替代ActionBar， 因此需要指定一个不带ActionBar的主题， 通常有Theme.AppCompat.NoActionBar 和Theme.AppCompat.Light.NoActionBar这两种主题可选。 其中Theme.AppCompat.NoActionBar表示深色主题， 它会将界面的主体颜色设成深色， 陪衬颜色设成淡色。 而Theme.AppCompat.Light.NoActionBar表示淡色主题， 它会将界面的主体颜色设成淡色， 陪衬颜色设成深色。

修改activity_main.xml中的代码：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</FrameLayout>Code language: HTML, XML (xml)

这里指定了xmlns:app ， 也就是说现在可以使用app:attribute 这样的写法了。 但是为什么这里要指定一个xmlns:app 的命名空间呢？ 这是由于Material Design是在Android 5.0系统中才出现的， 而很多的Material属性在5.0之前的系统中并不存在， 那么为了能够兼容之前的老系统， 我们就不能使用android:attribute 这样的写法了， 而是应该使用app:attribute。

现在gradle文件配置如下内容（要保证你的支持包已经更新material design哦）：

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha7'
    testCompile 'junit:junit:4.12'
}Code language: PHP (php)

dependencies {
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.1.1'
}Code language: JavaScript (javascript)

修改后台活动：

package com.example.material;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
}Code language: JavaScript (javascript)