Android Toolbar总结

ToolBar简介

ToolBar是Android 5.0推出的一个新的导航控件用于取代之前的ActionBar，由于其高度的可定制性、灵活性、具有Material Design风格等优点，越来越多的应用也用上了ToolBar，比如常用的知乎软件其顶部导航栏正是使用ToolBar。官方考虑到仍有一部分用户的手机版本号低于5.0，所以，ToolBar也放进了support v7包内，使得低版本的系统也能使用上ToolBar。本文将使用support v7支持包的ToolBar来进行讲解，包括其基本用法、样式定制等知识点。

ToolBar的基本使用

一.引入support v7兼容包

dependencies {
    ……
    compile 'com.android.support:appcompat-v7:23.2.0'
    ……
}

support v7包的版本号与compileSdkVersion一致

二.更改主题

为了能够正常使用ToolBar，我们需要隐藏原来的ActionBar，这个可以在主题中修改，在values/styles.xml中做出如下修改：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">    
</style>

然后在manifest文件中引用这个主题。
其实主要是设置windowActionBar这个属性为false，如果有兴趣可以进入Theme.AppCompat.Light.NoActionBar主题：

    <style name="Theme.AppCompat.Light.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

三.布局中加入ToolBar控件

在布局文件中创建这个控件，activity_main.xml文件中，代码如下所示：

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content" 
            android:text="标题" 
            android:textSize="20sp"/>
    </android.support.v7.widget.Toolbar> 
</FrameLayout>

在上面，创建了android.support.v7.widget.Toolbar，同时我们在内部放了一个TextView，这是与ActionBar最大的不同，因为ToolBar实际上是一个ViewGroup，支持在其内部放入子View。ok，我们运行程序，得到如下结果：

可以看出ToolBar正常显示，当然了，这只是最简单的用法，接下来我们逐步添加内容、样式，使它看起开更加美，功能更加完善。

ToolBar的完善

一.首先我们考虑，改变ToolBar的颜色

要想改变toolbar的颜色很简单，直接在布局文件中添加一个backgroud属性指定颜色就可以了，但是为了全局考虑，我们可以这样：在values/styles.xml文件中做出如下修改：

<resources> 
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> 
        <!-- Customize your theme here. --> 
        <item name="colorPrimary">#2e8abb</item> <!--浅蓝色-->
        <item name="colorPrimaryDark">#3A5FCD</item> <!--深蓝色--> 
    </style> 
</resources>

然后在布局文件中，添加如下属性：

android:background="?attr/colorPrimary"

这样，就能方便对每一个toolbar引用同样的颜色了，我们先看看现在的效果是怎样的：

可以看到，颜色已经改变，同时我们注意到，顶部状态栏的颜色也变成了深蓝色，这是因为添加了”colorPrimaryDark”的属性，使得顶部状态栏随之改变，利用这一特性，我们可以轻松实现“状态栏沉浸”的效果了。当然，这只适用于Android 5.0以上，如果在低版本则这个属性无效。这里再附上一张图（图片来自http://blog.csdn.net/bbld_/article/details/41439715）：

根据图中的说明，我们可以轻松地在styles.xml文件中定制我们的样式，如果想要改变toolbar的title、subtitle以及menu中文字的颜色，可以利用“textColorPrimary”属性等。

二.添加title、subtitle、logo、导航栏图标

在MainActivity文件先获取控件的实例，接着通过一系列的set方法即可设置，代码如下：

public class MainActivity extends AppCompatActivity 
{ 
    private Toolbar toolbar; 
    @Override 
    protected void onCreate(Bundle savedInstanceState) 
    { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_main); 
        toolbar = (Toolbar) findViewById(R.id.toolbar); 
        toolbar.setTitle("Title"); 
        toolbar.setSubtitle("SubTitle"); 
        toolbar.setLogo(R.mipmap.ic_launcher); 
        //设置导航图标要在setSupportActionBar方法之后 
        setSupportActionBar(toolbar); 
        toolbar.setNavigationIcon(R.mipmap.ic_drawer_home); 
    } 
}

结果如下：

如果你想修改标题和子标题的字体大小、颜色等，可以调用 setTitleTextColor 、 setTitleTextAppearance 、 setSubtitleTextColor 、 setSubtitleTextAppearance 这些API。当然，这些设置都是支持在xml布局中直接添加的，但是用的不是android:命名空间，而是自定义命名空间，如下所示：

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:toolbar="http://schemas.android.com/apk/res-auto">
    <android.support.v7.widget.Toolbar
        toolbar:logo="@mipmap/ic_launcher"
        toolbar:title="Title"
        toolbar:subtitle="Sub Title"
        toolbar:titleTextColor="#ffffff"
        toolbar:titleTextAppearance ="@style/ToolbarTittleAppearance"
        toolbar:subtitleTextColor="#ffffff"
        toolbar:subtitleTextAppearance ="@style/ToolbarTittleAppearance>
    </android.support.v7.widget.Toolbar>
</FrameLayout>

其中ToolbarTittleAppearance的定义如下：

    <style name="ToolbarTittleAppearance">
        <item name="android:textSize">19.0dip</item>
        <item name="android:textColor">@android:color/white</item>
    </style>

三.添加菜单选项图标及点击事件

1.添加菜单选项图标

一般导航条，在其右侧都会有菜单选项，当然ToolBar也是支持自定义菜单的，首先我们在菜单文件中，修改如下：res/menu/menu_main.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=".MainActivity"> 
    <item 
        android:id="@+id/action_search" 
        android:title="Search" 
        android:icon="@mipmap/ic_search"
        app:showAsAction="ifRoom"/> 
    <item 
        android:id="@+id/action_notifications"
        android:title="notifications" 
        android:icon="@mipmap/ic_notifications" 
        app:showAsAction="ifRoom"/> 
    <item 
        android:id="@+id/action_settings" 
        android:title="@string/action_settings" 
        android:orderInCategory="100"
        android:icon="@mipmap/ic_launcher" 
        app:showAsAction="never"/> 
</menu>

这里用了这样一个熟悉：app:showAsAction=”ifRoom”/”never”，app是自定义的命名空间，因为我们的activity继承的是AppCompatActivity，是support v7包的，并不是原生sdk内部的，因此不能使用android:showAsAction，否则会报错。然后ifRoom表示有空间则显示，never表示从不显示，而是会通过overflowwindow显示。
接着我们在Activity中，要重写onCreateOptionsMenu()方法，把这个菜单加载进去：

@Override
public boolean onCreateOptionsMenu(Menu menu)
{ 
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true; 
}

2.添加点击事件

菜单有了，我们要为菜单添加点击事件，这样菜单才会有实际用途,添加点击事件也很方便，可以这样操作：

 //设置导航图标、添加菜单点击事件要在setSupportActionBar方法之后 
        setSupportActionBar(toolbar);
        toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener()
        { 
            @Override 
            public boolean onMenuItemClick(MenuItem item) 
            { 
                switch (item.getItemId()) 
                { 
                    case R.id.action_search: 
                        Toast.makeText(MainActivity.this, "Search !", Toast.LENGTH_SHORT).show(); 
                        break; 
                    case R.id.action_notifications: 
                        Toast.makeText(MainActivity.this, "Notificationa !", Toast.LENGTH_SHORT).show(); 
                        break; 
                    case R.id.action_settings: Toast.makeText(MainActivity.this, "Settings !", Toast.LENGTH_SHORT).show(); 
                        break; 
                } 
                return true; 
            }
        });

结果如下：

可以看到，菜单选项图标正常显示，以及点击事件都正常触发，但是还有一点瑕疵的地方，那就是右上角的三个圆点，是黑色的，与图标格格不入，有没有什么办法改变它呢？答案是有的，可以通过添加样式改变，如下所示：

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> 
        ... 
        <item name="android:textColorSecondary">#ffffff</item> 
    </style> 
</resources>

“android:textColorSecondary”属性对应的就是右上角三个圆点的颜色了。改变之后将会变成你要的颜色。

四.其他样式修改

修改Toolbar popup menu样式

我们先点击右上角的三个点，会弹出一个popup menu，如下所示：

可以看到右上角的popup menu是白底黑字，那么有没有什么办法改变它的背景颜色，使菜单显示为黑底白字呢呢？答案是有的，我们可以这样设置：
首先在styles.xml文件中，新建一个主题：

<!-- toolbar弹出菜单样式 -->
<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark"> 
    <item name="android:colorBackground">#000000</item>
</style>

可以看到这个主题的parent是直接继承自ThemeOverlay.AppCompat.Dark，是支持包的一个主题，并且我们在内部声明了“android:colorBackground”这个属性，我们只要更改这个属性就能变更菜单的背景颜色了。接下来我们在布局文件中引入这个主题，这也很简单，为toolbar添加额外的属性如下：

toolbar:popupTheme="@style/ToolbarPopupTheme"

这样，改几行代码即可修改popup menu的背景颜色了，如下面所示：

修改Toolbar popup menu 弹出位置

我们可以看到，popup menu的位置是过于偏上的，我们还可以修改它的位置，使它处于Toolbar之下，这样看起来可能更美观：
修改styles.xml文件如下：

<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark"> 
    <item name="android:colorBackground">#000000</item> 
    <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item><!--新增一个item，用于控制menu--> 
</style> 
<style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow"> 
    <item name="overlapAnchor">false</item> <!--把该属性改为false即可使menu位置位于toolbar之下--> 
</style>

效果如下图：

转载自：http://www.jianshu.com/p/ae0013a4f71a