ToolBar的使用及overflow的定制问题

ToolBar，顾名思义，工具栏。这是继ActionBar之后的新工具栏，也是Google推崇的。相信很多Android Developers都在使用了。不过这里我自己用的时候也发现了些小问题。这里记录一下。

效果图

这个是我做了些改变后的效果图

ToolBar的一般使用

• 布局

<android.support.v7.widget.Toolbar
    android:id="@+id/tool_bar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"                    
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"></android.support.v7.widget.Toolbar>

• 代码

mToolbar = (Toolbar) findViewById(R.id.tool_bar);

setSupportActionBar(mToolbar); 
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

• Theme
  

  设置为NoActionBar

 <style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

可以看到效果是这样的：

图标和字体显示的都是黑色的，我看着不好看，想要显示白色的，那么可以这样改变：

• 
  
• 方法一
  

为Toolbar添加theme

 <android.support.v7.widget.Toolbar
        android:id="@+id/tool_bar"
        android:background="@color/colorPrimary"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:theme="@style/Theme.AppCompat.NoActionBar"
       />

• 方法二
  

  将Theme中的Light去掉

 <style name="BaseTheme" parent="Theme.AppCompat.NoActionBar">

这是因为默认暗色主题的话，toolbar的图标和字体会默认显示白色。亮色主题的话，toolbar的图标和字体会默认显示黑色。
那么问题来了，虽然图标和字体变为白色了。如下图：

overflow menu的背景是黑色的，我也想要它是白色。
方法：

为menu添加上白色主题即可

 app:popupTheme="@style/Theme.AppCompat.Light"

效果如下：

默认navaigationIcon是返回箭头，修改图标：

mToolBar.setNavigationIcon(R.drawable.navigation);

app:navigationIcon="@drawable/navigation"

那么还有一个问题就是，share默认全是大写，而我写的明明是小写。那就需要改了。

<!--添加设置到Theme里-->
 <item name="android:actionMenuTextAppearance">@style/MenuTextStyle</item>

   <style name="MenuTextStyle">
        <item name="android:textSize">14sp</item><!--调整字体大小-->
        <item name="android:textAllCaps">false</item>
    </style>

注意:

1.这里的ToolBar主题要设置为:
android:theme=”@style/ThemeOverlay.AppCompat.Dark.ActionBar”

2.这些代码要写在values-v21的styles里面才生效

overflow menu的位置及色调

我们知道，overflow menu默认是覆盖在toolbar之上的，我想移动到下面怎么办呢？

<!--添加到Theme里-->
 <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>

  <style name="OverflowMenuStyle" parent="@style/Widget.AppCompat.PopupMenu.Overflow">
        <!-- 是否覆盖在Toolbar之上 -->
        <item name="overlapAnchor">false</item>
        <!--overflow menu背景颜色 -->
        <item name="android:popupBackground">@color/colorPrimary</item>
        <item name="android:dropDownVerticalOffset">4dp</item>
        <item name="android:dropDownHorizontalOffset">0dp</item>
    </style>

注意： 这些代码要写在values-v21的styles里面才生效.

完整的布局及Theme

这里把最终的布局及Theme设置附上.

• 布局

 <android.support.v7.widget.Toolbar
        android:id="@+id/tool_bar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:navigationIcon="@drawable/navigation"
        />

• 
  
• styles.xml
  

这个完全写到values-v21即可

    <style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>
        <item name="android:actionMenuTextAppearance">@style/MenuTextStyle</item>
    </style>

<!--menu text style-->
    <style name="MenuTextStyle">
        <item name="android:textSize">14sp</item>
        <item name="android:textAllCaps">false</item>
    </style>

<!--overflow menu style-->
    <style name="OverflowMenuStyle" parent="@style/Widget.AppCompat.PopupMenu.Overflow">
        <item name="overlapAnchor">false</item>
        <item name="android:popupBackground">@color/colorPrimary</item>
        <item name="android:dropDownVerticalOffset">4dp</item>
        <item name="android:dropDownHorizontalOffset">0dp</item>
    </style>

好了，到这里已经实现了效果里面的内容。

当然，这里面还有其他要设置的。这里没总结。如果问题的可以分享下。~