Android Material Design之Toolbar

 

1.ActionBar

1.1 ActionBar概述

        ActionBar是系统原生的标题栏。每个Activity默认的最顶部的那个标题栏就是ActionBar。

1.2 默认的使用方式

        ActionBar到底从哪里来呢？其实是根据项目中指定的主题来显示的。在AndridManifest.xml中默认引入的theme如下所示：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.luckyliuqs.materialdesign">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        ......
    </application>

</manifest>

          打开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>

        可以看到，这里引入的parent主题就是Theme.AppCompat.Light.DarkActionBar，这个DarkActionBar就是一个深色的ActionBar主题，默认出现的ActionBar就是因为指定了这个主题才出现的。

1.3 ActionBar缺陷

      ActionBar被限定只能位于Activity的顶部，而不能实现一些Material Design效果，因此官方已经不再建议使用ActinBar了。

 

2.ToolBar

2.1 概述

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

2.2 ToolBar的引入方式

       通过在styles.xml中指定parent主题为不带ActionBar的主题。通常选择有Theme.AppCompat.NoActionBar和Theme.AppCompat.Light.NoActionBar这两种主题。

       1）Theme.AppCompat.NoActionBar

        表示深色主题，它会将界面的主体颜色设为深色，陪衬颜色设为淡色。如下所示：

      2）Theme.AppCompat.Light.NoActionBar

       表示淡色主题，它会将界面的主体颜色设为淡色，陪衬颜色设为深色。如下所示：

        引入方式 如下所示：

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

2.3 Activity界面color位置设置详解

       如下图所示：

         从上图可以看出，每个属性所指定的颜色的位置不一样。

 

 

3.ToolBar实例

3.1 实现效果

     实现的效果如下图所示：

 

3.2 添加action按钮

          右击res目录->new->Directory，创建一个menu文件夹，然后右击menu文件夹->new->Menu resource file，创建一个toobar.xml文件如下所示：每一个item就是一个action按钮

<?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/mail"
        android:icon="@drawable/ic_mail"
        android:title="邮箱"
        app:showAsAction="always"/>
    <item android:id="@+id/delete"
        android:icon="@drawable/ic_delete"
        android:title="删除"
        app:showAsAction="ifRoom"/>
    <item android:id="@+id/qq"
        android:icon="@drawable/ic_qq"
        android:title="QQ"
        app:showAsAction="never"/>
</menu>

        参数说明：

app:showAsAction=""	always：表示永远显示在ToolBar中，如果屏幕空间不够，则不显示。 ifRoom：表示屏幕空间足够的情况下显示在ToolBar中；不够则显示在菜单中。 never：表示永远显示在菜单中。 注意：ToolBar中的action只会显示图标，而菜单中的action只会显示title文字。
icon	用于指定按钮的图标。
title	用于指定按钮的文字。

3.3 设置布局样式

         在activity_mian.xml中：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

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

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="35dp" />
</RelativeLayout>

        注意：这里使用了xmlns:app指定了一个新的命名空间。正是用于布局文件使用了xmlns:android来指定一个命名空间，才可以使用android:id、andrid:layout_width等等属性。

         由于Mater Design是在Android 5.0系统才出现的，所以很多Meterial属性在5.0之前的系统中并不存在，为了兼容之前的老系统，这里使用了xmlns:app，这样就可用使用app:attribute属性了。

 

3.4 在Activity中处理业务

        在MainActivity.java中：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);
        //设置支持的ActionBar
        setSupportActionBar(toolbar);

    }
    //加载toolbar.xml菜单文件
    public boolean onCreateOptionsMenu(Menu menu){
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;
    }
    //处理各个按钮的点击事件
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.mail:
                Toast.makeText(this,"点击了邮箱图标",Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this,"点击了删除图标",Toast.LENGTH_SHORT).show();
                break;
            case R.id.qq:
                Toast.makeText(this,"点击了QQ图标",Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }
}