Toolbar使用之踩过的坑

• toolbar是v7包中的类安卓5.0推出，自2014年谷歌io大会上的md风格的设计

• toolbar作用：代替ActionBar使用，继承自viewgroup

• 要使用toolbar，需要设置主题为AppCompat,并且主题设置里面不要actionbar
  

 
 
<style name="ToolbarTheme.Base" parent="Theme.AppCompat">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
</style>

• xml文件和activity中设置toolbar
  

 
 
  <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"/>

 
 
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

• menu菜单文件

  
  
<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">
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="102"
        android:title="@string/action_settings"
        app:showAsAction="always" />
    <item
        android:id="@+id/action_about"
        android:orderInCategory="106"
        android:title="关于"
        app:showAsAction="never" />
    <item
        android:orderInCategory="103"
        android:title="item1"
        app:showAsAction="never" />
    <item
        android:orderInCategory="104"
        android:title="item2"
        app:showAsAction="never" />
</menu>

运行效果为：

• 发现toolbar和下面的内容界面都是黑色，这个问题是主题引起的，修改主题样式为light，并区分toolbar和内容界面的背景色

 
 
    <style name="ToolbarTheme.Base" parent="Theme.AppCompat.Light">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        //设置actionbar的背景色
        <item name="colorPrimary">@color/colorPrimary</item>
    </style>

 
 
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary" />

上面的主题可以偷懒写

 
 
 <style name="ToolbarTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
    </style>

效果：

还可设置状态栏的背景色

 
 
  <style name="ToolbarTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    </style>

效果：

• 修改toolbar的title文字颜色，在style主题中添加item，这样修改的就是应用的文字颜色为白色

 
 
<item name="android:textColorPrimary">@color/white</item>

• 为toolar加上返回上一级界面的箭头：activity中添加toolbar代码

 
 
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);

 
 
   @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_settings:
                Toast.toastShort("Setting");
                return true;
            default:
                return super.onOptionsItemSelected(item);
     }
｝

• 发现返回箭头和右上角的menu折叠三个点为黑色的，一般应用使用的是白色的，这个问题出现的原因是app设置的主题是light（浅色主题，内容区域为白色背景，箭头为黑色），这里需要设置toolbar的主题为dark（深色主题，内容区域为黑色背景，箭头为白色）

 
 
  <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:theme="@style/ToolbarTheme"／／为了兼容使用app命名空间
        android:background="?attr/colorPrimary" />

 
 
 <style name="ToolbarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar"／>

• 修改toolbar的title文字的大小和重新设置颜色，需要设置title的样式

 
 
 app:titleTextAppearance="@style/ToolBarTitleText"

 
 
    <style name="ToolBarTitleText" parent="TextAppearance.AppCompat.Medium">
        <item name="android:textColor">@color/red</item>
        <item name="android:textSize">20sp</item>
        <item name="android:textStyle">bold</item>
    </style>

• 设置menu文字的颜色和大小，在toolber主题中设置

 
 
 app:theme="@style/ToolbarTheme"

 
 
<style name="ToolbarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
        <item name="actionMenuTextColor">@color/blue_light</item>
        <item name="android:actionMenuTextAppearance">@style/ToolbarMenuTextSize</item>
    </style>
    <style name="ToolbarMenuTextSize" parent="Base.TextAppearance.AppCompat.Menu">
        <item name="android:textSize">12sp</item>
    </style>

• 点击界面右上角三个点展示的是我们设置的popupmneu弹窗，背景色为黑色，是因为我们的toolbar的主题使用的是drak深色主题，所以背景色为黑色，字体为白色

• 修改popupmenu弹窗的背景色和文字颜色和文字大小，在toolbar中设置popuptheme主题

  
  
 app:popupTheme="@style/ToolbarPopupTheme"

   
   
    <style name="ToolbarPopupTheme" parent="Theme.AppCompat">
        <!--设置背景色为灰色-->
        <item name="android:colorBackground">@color/Gray_e</item>
        <!--menu菜单的文字颜色设置-->
        <item name="android:textColorPrimary">@color/c_xiuxiu</item>
        <!--菜单文字的大小-->
        <item name="android:textSize">12sp</item>
    </style>

• toolbar其他属性的设置

   
   
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:logo="@mipmap/ic_launcher"
        app:navigationIcon="@mipmap/icon_back"
        app:popupTheme="@style/ToolbarPopupTheme"
        app:subtitle="subtitle"
        app:theme="@style/ToolbarTheme"
        app:title="ToolBar"
        app:titleTextAppearance="@style/ToolBarTitleText" />

这些属性也可通过在代码总进行设置

• 总结

1. 使用ToolBar需要线设置Activity的主题样式为AppCompat,并且设置NoActionBar.主题样式主要分浅色light，和深色dark

2. 可以在主题设置中定义主题颜色和主题文字颜色

3. 设置toolbar返回上一届功能，需要在activity中设置setSupportActionBar,和setDisplayHomeAsUpEnabled(true)方法，和点击事件

4. 修改toolbar返回箭头和menu菜单三个点的颜色，需要设置toolbar的主题－app：theme

5. 设置menu文字颜色和大小样式，在toolbar主题中进行设置acitonMenuTextColor
   

6. 修改toolbar的title文字颜色和大小，需要设置app：titleTextAppearance样式

7. 设置menu菜单的popup弹窗的背景色，文字颜色和大小等样式，需要设置popupTheme主题