android：toolbar用法详解

Toolbar作为ActionBar的替代，在material design 中也对其有一个统一名称：app bar，在未来的 Android app 中，就以 toolbar 这个元件来实作之。下面就一步步的来探析一下它的使用方法。 

（一）Toolbar的显示 
既然是作为Actionbar的替代，所以就需要把ActionBar隐藏起来。现设置 res/values/styles.xml的theme主题如下：

同样的，在/res/values-v21/styles.xml中设置theme主题如下：

设置当前Activity为无标题并且隐藏ActionBar。 

Toolbar作为一个控件，像其它的控件一样直接布置在layout中即可，代码如下：

在activity中的调用如下：

package com.bukailiu.toolbardemo;

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

public class MainActivity extends AppCompatActivity {

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

然后就是效果图了：

（二）自定义颜色，变为适合自己app风格的亮色。

1.colorPrimaryDark（状态栏底色）：在风格 (styles) 或是主题 (themes) 里进行设定。 
2.colorPrimary ：appbar底色 
3.navigationBarColor：导航栏底色（只能在API v21 也就是 Android 5 以后的版本中使用， 因此要将之设定在 res/values-v21/styles.xml 里面才会起作用） 
现更改res/values-v21/styles.xml中theme主题如下：

效果图如下：

（三）修改Toolbar中的内容显示 

先上图如下：

根据图看，从左到上，从上到下的设置方法如下： 
setLogo：设置标题的logo图标 
setTitle：设置标题 
setSubtitle：设置副标题 
具体的代码如下：

package com.bukailiu.toolbartest;

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

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
        toolbar.setLogo(R.mipmap.ic_launcher);
        toolbar.setTitle("ToolbarTittle");
        toolbar.setSubtitle("SubToolbarTittle");
        setSupportActionBar(toolbar);
    }

}

基础的Toolbar的使用方法就这样了。

下面讲讲Toolbar内容显示微调

（三）Toolbar的标题Title文字居中调整

从效果图上看得出，文字已经居中显示了，那下面就是方法代码了：

    //Toolbar的标题Title文字居中调整
    private void setTitleCenter(Toolbar toolbar){
        int childCount = toolbar.getChildCount();
        for(int i = 0 ;i < childCount;i++){
            View child = toolbar.getChildAt(i);
            if(child instanceof TextView){
                TextView childTitle = (TextView)child;
                if(childTitle.getText().equals(toolbar.getTitle())){
                    int deviceWidth = getWindowManager().getDefaultDisplay().getWidth();
                    Paint p = childTitle.getPaint();
                    float textWidth = p.measureText(childTitle.getText().toString());
                    float tx = (deviceWidth - textWidth) / 2.0f - toolbar.getContentInsetLeft();
                    childTitle.setTranslationX(tx);
                    break;
                }
            }
        }

基本的思想是这样的：首先获取Toobar的子view 的个数，然后循环获取子view，因为用来显示title的是一个TextView的控件，所以需要判断当前view 是否是TextView，由于Toolbar中还包含一个副标题，所以这里判断TextView的内容是否是一样的（注意：这里副标题和标题之间的文字不能相同暂时），这个时候如果判断通过则进入if语句中。首先获取屏幕的宽度，然后在获取文字的宽度，最后计算出title控件需要移动的距离，然后调用setTranslationX即可。

（四）Toolbar中的PopuMenu菜单的显示位置
自定义溢出菜单之前，首先需要说明一点的是，当前的Activity的主题样式需要设置为”Theme.AppCompat.Light.NoActionBar”(或者”Theme.AppCompat.NoActionBar”)，以及parent为它的也可以。如下代码：

给Toolebar设置poputheme，如下：

这时候效果如下：

（五）Toolbar内容调整

1.修改标题文字的颜色，在主题styles文件中中添加如下代码即可。

        
        @android:color/holo_blue_bright

效果图：

从图上看出，修改的颜色不单单是标题的颜色，连点击overflowButton之后的PopuMenu弹框中的颜色也一起修改了。说明设置了这个属性之后这两个部分的文字颜色是一样的。

2.修改菜单栏MenuItem文字的大小,即图中的”ToolbarTittle”文字
现在感觉文字有点小了，那好现在修改大一点的。现定义标题的样式如下：

然后设置此样式给Toolbar：app:titleTextAppearance=”@style/ToolbarTitle”，代码如下：

效果图看下：

文字大小变大了，比以前大多咧。

3.修改Overflow中，PopuMenu中文字大小
上面已经定义了一个OverflowMenuStyle样式的PopuMenu，所以只需要在添加一项即可。代码如下：

由于前面已经给Toolbar设置了popuTheme样式，下面直接看效果图：

效果已经很明显了，文字被放大了。

4.单独给文字标题和Menu设置样式

从2和3中可以看出，只要设置不同的style就可以实现单独的样式设置。先改变如下：

样式改变如下：PopuMenu中文字变为红色，以及背景颜色现效果图如下：

5.修改PopuMenu中ListView的样式

发现PopuMenu中每一个MenuItem之间没有分割线，不爽！那么就自己定义一个样式，给它加上分割线，代码如下：

然后在“appTheme”Activity主题样式中添加如下代码：

@style/PopupMenuListView

效果图如下：

5.给MenuItem设置icon

有些时候，menuItem中显示一下icon图标也是极好赏心悦目的。现改变menu布局如下：

那么效果图来看下：

图上显示，overflow之后的PopuMenu中并没有显示icon图标，怎么回事呢？这是官方的做法，默认只能显示文字而不能显示icon，但是觉得这样不美观啊，icon必须得显示出来。icon显示不显示是由MenuBuilder这个类的setOptionalIconsVisible方法来决定的，如果我们在PopuMenu被展开的时候给这个方法传入true，那么里面的每一个MenuItem对应的图标就都会显示出来了，所以要调用此方法当然用到反射了。 

通过重写onPrepareOptionsPanel方法来实现。

    @Override
    protected boolean onPrepareOptionsPanel(View view, Menu menu) {
        if (menu != null) {
            if (menu.getClass() == MenuBuilder.class) {
                try {
                    Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                    m.setAccessible(true);
                    m.invoke(menu, true);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
        return super.onPrepareOptionsPanel(view, menu);
    }

看下效果图如下：

6.修改navigation icon的padding值

修改padding值，就需要在style.xml中修改；在此我们修改的是navigation的pading值：

（1）定义style

然后在“AppTheme”Activity主题样式中添加如下代码：

@style/myToolbarNavigationButtonStyle

效果图就不贴了。

好了，到这里基本上的样式改变应该差不多都涉及到了。通过上面的探索，发现，针对不同的控件，会有单独的style样式供其设置来改变，就像ActionMenuTextStyle、ToolbarTitle、OverflowMenuStyle等，来改变相对应的控件的样式，剩下的得自己在探索了。