Android5.0新特性：Toolbar标题栏

Toolbar标题栏

Android 5.0最主要的变化就是采用了全新的Material Design界面。Material Design就是材质化设计，材质化设计指的是物体是有质地的，两个控件之间室友实体的，不允许互相穿墙，并且引入了Z轴的概念。

本篇主要讲解android 5.0新特性中的控件 Toolbar ,即标题栏的使用。

一.Toolbar的简介：

Toolbar是Android 5.0 新特性中新出的一个标题栏控件，是用来代替Android3.0中的ActionBar的。ActionBar的功能比较弱，并且显示出来的控件也不漂亮，大部分人都喜欢自定义一个组件来代替ActionBar,也就使得界面不统一、杂乱，在Android5.0 时谷歌推出Toolbar，在 material design 也对之做了名称的定义：App bar。Toolbar相对于ActionBar来说，更加的灵活，有更多的属性，不仅能够在页首，也可以放置在页面的其他部位，因此，使得页面趋向统一。

二.Toolbar的属性：

1. NavigationIcon: Toolbar左边的按钮，即返回键按钮，点击返回上一个界面。

2. Logo: Toolbar上的图标。

3. Title :主标题

4. SubTitle :副标题

5. Menu :Toolbar 的菜单栏

详细的使用可以在接下来的代码中看到，在这就不一一说明了。

三.Toolbar的简单使用步骤：

1.style的设置：

首先是 style中(res/values/styles.xml)：修改为无标题，再添加其他属性，代码如下：

<resources>

    <!-- Base application theme. -->
    <style name="MyTheme.Theme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!-- Actionbar color -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <!--Status bar color-->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <!--Window color-->
        <item name="android:windowBackground">@color/colorAccent</item>
    </style>

</resources>

然后是style中 (res/values-v21/styles.xml)：创建values-v21，styles.xml，继承values中的theme，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="MyTheme.Theme">
        <item name="android:navigationBarColor">@color/colorPrimaryDark</item>
    </style>
</resources>

以上是需要改动的有关style的部分，接下来是ui布局：

2.ui布局：

需要注意的是要使用v7包的Toolbar,代码如下：

<!--需要v7包的Toolbar-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary">
    </android.support.v7.widget.Toolbar>

android:background="?attr/colorPrimary" ，这样就可以使之延用 Actionbar 的颜色设定.

3.MainActivity的代码：

在代码中注释的非常详细了，就不单一说了，代码如下：

package com.example.star.toolbar.activity;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

import com.example.star.toolbar.R;
import com.example.star.toolbar.utils.MyToast;

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化控件
        initView();

        //设置Toolbar
        setToolbar();
    }

    /**
     * 设置Toolbar
     * 给Toolbar加入各种属性，并且设置为Toolbar
     */
    private void setToolbar() {
        //Logo
        toolbar.setLogo(R.drawable.ic_launcher);
        //Title 主标题
        toolbar.setTitle("主标题");
        //subTitle 副标题
        toolbar.setSubtitle("副标题");

        setSupportActionBar(toolbar);
        //返回键
        toolbar.setNavigationIcon(R.drawable.ic_launcher);

    }

    /**
     * 初始化控件
     * 这个地方可以用butterknife，简写代码。
     */
    private void initView() {
        toolbar = (Toolbar) findViewById(R.id.toolbar);
    }

    /**
     * Toolbar的菜单的添加
     * @param menu
     * @return
     */
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main,menu);
        return true;
    }

    /**
     * Toolbar的菜单点击事件
     * @param item
     * @return
     */
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.menu_1:
                MyToast.show(this,"菜单1");
                break;
            case R.id.menu_2:
                MyToast.show(this,"菜单2");
                break;
            case R.id.menu_3:
                MyToast.show(this,"菜单3");
                break;
            default:
                break;
        }

        return true;
    }
}

接下来是显示的界面：

下一张是点击菜单栏之后的界面：

4.菜单栏menu的使用：

在res-menu-menu_main.xml中的代码：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/menu_1"
        android:title="111"
        android:orderInCategory="80"
        android:icon="@drawable/ic_launcher"
        android:showAsAction="ifRoom"/>

    <item android:id="@+id/menu_2"
    android:title="222"
    android:orderInCategory="90"
    android:icon="@drawable/ic_launcher"
    android:showAsAction="ifRoom"/>

    <item android:id="@+id/menu_3"
        android:title="333"
        android:orderInCategory="100"
        android:icon="@drawable/ic_launcher"
        android:showAsAction="ifRoom"/>
</menu>

item的id、title、icon属性就不用多说了，主要是showAsAction这个属性主要有几个值：

ifRoom:如果还有空余空间，就将icon显示在toolbar上。

always:一直显示icon。

never:从不显示icon。

写完menu之后，在MainActivity中重写onCreateOptionsMenu()方法以及onOptionsItemSelected()方法；详细代码在第三步中。

完成以上几步，关于Toolbar的简单应用就可以实现了。