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的简单应用就可以实现了。