Android ToolBar的开发总结

1、概述：

谷歌在2014的 google i/o 发表令多数人为之眼前一亮的 material design，从那开始，大家也陆陆续续地看到其更新的
android app 皆套用了这个设计界面。

Toolbar是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ，Google 非常推荐大家使用 Toolbar 来作为Android客户端的导航栏，以此来取代之前的 Actionbar 。与 Actionbar 相比， Toolbar 明显要灵活的多。它不像 Actionbar 一样，一定要固定在Activity的顶部，而是可以放到界面的任意位置。除此之外，在设计 Toolbar 的时候，Google也留给了开发者很多可定制修改的余地，这些可定制修改的属性在API文档中都有详细介绍，如：

• 设置导航栏图标；
• 设置App的logo；
• 支持设置标题和子标题；
• 支持Action Menu；
• 支持添加一个或多个的自定义控件；

2、开始使用 Toolbar

Toolbar 是在 Android 5.0 才开始加上的，所以，我们需要在工程中引入 appcompat-v7 的兼容包，使用 android.support.v7.widget.Toolbar 进行开发。
首先创建一个工程My Application 代码结构如下：

（假如没有values-v21文件夹，就自己手动创建一个，然后再在里面创建一个styles.xml文件）

下面开始写一个模拟新闻界面的demo
在res/values/styles.xml中

<resources>    <!-- Base application theme. -->    <style name="AppTheme.Base" parent="Theme.AppCompat.NoActionBar">        <item name="windowActionBar">false</item>        <item name="android:windowNoTitle">true</item>        <!-- 使用 API Level 22 编译，去掉android:前缀 如下 -->        <!--<item name="windowNoTitle">true</item>-->        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>        <item name="colorAccent">@color/colorAccent</item>    </style>    <style name="AppTheme" parent="AppTheme.Base"/></resources>

自己创建一个主题”AppTheme.Base” 继承自Theme.AppComppat.NoActionBar（先把ActionBar隐藏起来）

• colorPrimary 对应ActionBar的颜色。
• colorPrimaryDark对应状态栏的颜色 colorAccent
• 对应EditText编辑时、RadioButton选中、CheckBox等选中时的颜色。

注意：Theme.AppComppat.NoActionBar是黑色主题，title字体的颜色为白色，Theme.AppComppat.Light.NoActionBar是浅色主题，title字体的颜色为黑色。 对应图：

再设置Android 5.0以上版本的风格：/res/values-v21/styles.xml中，

<resources>    <style name="AppTheme" parent="AppTheme.Base">        <item name="android:statusBarColor">@color/colorPrimaryDark</item>    </style></resources>

metarial design的theme允许我们去设置status bar的颜色，在Android 5.0以上，那么你可以使用android:Theme.Material，设置android:statusBarColor。但是在5.0一下，就不支持上述主题了，所以我们多数使用的是Theme.AppCompat，通过设置android:colorPrimaryDark.来设置status bar颜色。（ps：默认情况下，android:statusBarColor的值继承自android:colorPrimaryDark）.

在AndroidManifest文件中设置程序的主题：

在activity_main.xml中添加控件：

<android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_height="wrap_content"        android:layout_width="match_parent"        android:minHeight="?attr/actionBarSize"        android:background="?attr/colorPrimary">    </android.support.v7.widget.Toolbar>    <LinearLayout        android:layout_below="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        android:background="@color/lightGreen">        <TextView            android:layout_width="match_parent"            android:layout_height="match_parent"            android:gravity="center"            android:text="新闻内容"            android:textSize="32sp"/>    </LinearLayout>

• android:minHeight=”?attr/actionBarSize”：设置标题栏最小高度为ActionBar的高度。
• android:background=”?attr/colorPrimary”：该主题下的主色。也就是@color/colorPrimary对应的颜色。

一、设置导航栏图标及title（左上角加一个返回按钮）

在MainActivity.java中：

 @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setTitle("新闻");        setSupportActionBar(toolbar);        toolbar.setNavigationIcon(R.drawable.back_white);        toolbar.setNavigationOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Toast.makeText(MainActivity.this, "toolbar返回按钮点击事件", Toast.LENGTH_SHORT).show();            }        });    }

在setSupportActionBar(toolbar);后面加入toolbar.setNavigationIcon(R.drawable.back_white);，你可以加入到前面试试，虽然可以显示回退的图片，但是点击并没有调用该按钮的点击事件，而在setSupportActionBar(toolbar);后面设置点击才有反应。一定要记住，不然回退是不会起作用的。

还有一个抖机灵的方法，利用ActionBar设置左上角返回键

 @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setTitle("新闻");        setSupportActionBar(toolbar);        toolbar.setNavigationIcon(R.drawable.ic_arrow_back_white_18pt_2x);        ActionBar actionBar = getSupportActionBar();        actionBar.setDisplayHomeAsUpEnabled(true);    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()) {            case android.R.id.home:                Toast.makeText(MainActivity.this, "利用ActionBar返回按钮点击事件", Toast.LENGTH_SHORT).show();                return true;        }        return super.onOptionsItemSelected(item);    }

熟悉ActionBar的同学这段代码应该很容易看明白 这样写的优点是不用自己找素材了，系统会直接调用ActionBar的返回键的图标（算是优点么？）

二、设置logo以及副标题

两行代码：

toolbar.setLogo(R.drawable.ic_home_white);toolbar.setSubtitle("副标题");

三、设置菜单
我们知道onCreateOptionsMenu是上下文菜单，同理可以直接在该方法中设置菜单
MainActivity中 加入这两个函数即可

 @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.main_activity, menu);        return true;    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        int id = item.getItemId();        //相应按钮的事件        if (id == R.id.action_settings) {            Toast.makeText(MainActivity.this, "action_settings", Toast.LENGTH_SHORT).show();            return true;        }else if (id == R.id.action_about){            Toast.makeText(MainActivity.this, "action_about", Toast.LENGTH_SHORT).show();            return true;        }else if (id == R.id.action_search){            Toast.makeText(MainActivity.this, "action_search", Toast.LENGTH_SHORT).show();            return true;        }else if (id == R.id.action_share){            Toast.makeText(MainActivity.this, "action_share", Toast.LENGTH_SHORT).show();            return true;        }else if (id == R.id.action_folder){            Toast.makeText(MainActivity.this, "action_folder", Toast.LENGTH_SHORT).show();            return true;        }        return super.onOptionsItemSelected(item);    }

/res/menu/main_activity.xml中

<menu 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"    tools:context="com.inspur.broadbandnetaccepthn.MainActivity2" >    <item        android:id="@+id/action_folder"        android:orderInCategory="100"        android:title="setting"        android:icon="@drawable/ic_folder_shared_white_24dp"        app:showAsAction="always"/>    <item        android:id="@+id/action_share"        android:orderInCategory="100"        android:title="setting"        android:icon="@drawable/ic_share_white_24dp"        app:showAsAction="always"/>    <item        android:id="@+id/action_search"        android:orderInCategory="100"        android:title="setting"        android:icon="@drawable/ic_search_white_24dp"        app:showAsAction="always"/>    <item        android:id="@+id/action_settings"        android:orderInCategory="100"        android:title="setting"        app:showAsAction="never"/>    <item        android:id="@+id/action_about"        android:orderInCategory="100"        android:title="About"        app:showAsAction="never"/></menu>

解释一下：
app:showAsAction有三个值：
always：总是显示在界面上
never：不显示在界面上，只让出现在右边的三个点中
ifRoom：如果有位置才显示，不然就出现在右边的三个点中

可以用 | 同时使用两个上面的值。

android:orderInCategory是显示顺序的优先级，数值越小，优先级越高，显示靠前，

大公告成
哎 ，不对，这个弹出的按钮把后面的遮住了，而且黑色的背景好丑啊(-｡-;)，

首先要说明一下，toolbar菜单默认样式的父类为Widget.AppCompat.Light.PopupMenu.Overflow，那么要更改toobar中菜单的弹出的样式，就必须继承这个父类的样式。

 <style name="AppTheme.Base" parent="Theme.AppCompat.NoActionBar">        <item name="windowActionBar">false</item>        <item name="android:windowNoTitle">true</item>        <!-- 使用 API Level 22 编译，去掉android:前缀 如下 -->        <!--<item name="windowNoTitle">true</item>-->        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>        <item name="colorAccent">@color/colorAccent</item>        <item name="actionOverflowMenuStyle">@style/MenuStyle</item></style><style name="MenuStyle" parent="@style/Widget.AppCompat.Light.PopupMenu.Overflow">        <item name="overlapAnchor">false</item>        <!--按钮的背景颜色-->        <item name="android:popupBackground">@color/colorPrimary</item>        <!--弹出菜单与标题栏的垂直间距-->        <item name="android:dropDownVerticalOffset">10.0dip</item>    </style>

这样是不是就美观多了

四、设置自定义的空间
假如我们想让标题居中显示怎么办呢，title那暂时还没找到相应的属性设置（大家谁知道记得教小弟一下），但是我们可以曲线救国，在toolbar里面放一个textview，居中显示，话不多说，上代码：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/white"    tools:context="com.kbweather.myapplication.MainActivity">    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_height="wrap_content"        android:layout_width="match_parent"        android:minHeight="?attr/actionBarSize"        android:background="?attr/colorPrimary">        <TextView            android:layout_width="match_parent"            android:layout_height="match_parent"            android:gravity="center"            android:text="新闻标题"            android:textStyle="bold"            android:textColor="@color/white"            android:textSize="24sp"/>    </android.support.v7.widget.Toolbar>    <LinearLayout        android:layout_below="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        android:background="@color/lightGreen">        <TextView            android:layout_width="match_parent"            android:layout_height="match_parent"            android:gravity="center"            android:text="新闻内容"            android:textSize="32sp"/>    </LinearLayout></RelativeLayout>

activity中

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

参考：
Android 5.x Theme 与 ToolBar 实战
深入辨析Android四大组件(九)——Activity之AppCompatActivity与toolbar的结合
android：ToolBar详解（手把手教程）