ToolBar详解

一 集成

     1   添加v7包      compile 'com.android.support:appcompat-v7:25.3.1'

     2  隐藏掉ActionBar    显示ToolBar       更改主题 

         更改  清单文件  appliCation里的     @style/AppTheme         去掉ActionBar

        

 <style name="AppTheme" 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>

     item等下详细解释具体控制哪块的颜色

     注：ToolBar其实是一个ViewGroup   可以存放子View

     为了兼容5.0以下版本   引入新命名空间 xmlns:app="http://schemas.android.com/apk/res-auto"  使用app：的属性   否则使用android在xml设置的属性添加的控件无效

<FrameLayout    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"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.wbxu.mymaterialdemo.MainActivity">    <android.support.v7.widget.Toolbar        android:id="@+id/toolBar"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:background="?attr/colorPrimary"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"        >        <TextView            android:id="@+id/title"            android:layout_width="wrap_content"            android:layout_height="wrap_content"/>    </android.support.v7.widget.Toolbar></FrameLayout>

   由于开始去掉ActionBar然后整体使用浅色系主题，，toolBar上的元素会自动使用深色系  来与主题颜色分开，，比如下边的标题颜色变黑，，所以单独将Toolbar的主题改为深色系     然后单独将toolbar上的menu菜单  设置成浅色系即可

    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

    如果不更改toolbar的主题    这样显示的ToolBar中的字体是黑色的

   

 二更改toolBar中的颜色     先看一张style  主题里的item的控制界面各部分  颜色的方法

     

     解释：  colorPrimaryDark（状态栏底色）：在风格 (styles) 或是主题 (themes) 里进行设定。

                 colorPrimary  标题栏【toolbar或者actionbar的颜色】   如果是toolbar  在主题里的style里设置   再供toolbar的背景色调用   如下

               

<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"

        如果是actionBar的话 则直接在风格 (styles) 或是主题 (themes) 里进行设定 colorPrimary 参数即可；

                  navigationBarColor（导航栏底色）：  底部导航栏的颜色   手机的主键    回退键等等

                  textColorPrimary    指定默认的label自带标题的颜色

                  还有个colorAccent指定app的悬浮窗的颜色          也设置被选中时的颜色 

      更改toolBar颜色前        先在主题里设置颜色        供toolbar的   background调用

三  toolBar上的元素添加 

          

     setNavigationIcon  即设定 up button 的图标，因为 Material 的介面，在 Toolbar这里的 up button样式也就有別于过去的 ActionBar 哦。
     setLogo   APP 的图标。
     setTitle   主标题。
     setSubtitle  副标题。
     setOnMenuItemClickListener   设定菜单各按鈕的动作。

     使用：

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);// App Logotoolbar.setLogo(R.drawable.ic_launcher);// Titletoolbar.setTitle("My Title");// Sub Titletoolbar.setSubtitle("Sub title");setSupportActionBar(toolbar);// Navigation Icon 要設定在 setSupoortActionBar 才有作用// 否則會出現 back buttontoolbar.setNavigationIcon(R.drawable.ab_android);

    注意：setNavigationIcon需要放在 setSupportActionBar之后才会生效。

   给Up  Button 添加点击事件

  

//要放在setSupportActionBar之后才会生效        toolbar.setNavigationIcon(R.mipmap.ic_launcher);        //设置点击事件        toolbar.setNavigationOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Toast.makeText(MainActivity.this, "导航栏click", Toast.LENGTH_SHORT).show();            }        });

       如果想更改标题的颜色大小   子标题的颜色和大小 

       可以调用setTitleTextColor、setTitleTextAppearance、setSubtitleTextColor、setSubtitleTextAppearance 这些API；

四设置menu

     创建menu的资源文件          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_edit"        android:title="@string/action_edit"        android:orderInCategory="80"        android:icon="@drawable/ab_edit"        app:showAsAction="always" />  <item android:id="@+id/action_share"        android:title="@string/action_edit"        android:orderInCategory="90"        android:icon="@drawable/ab_share"        app:showAsAction="ifRoom" />  <item android:id="@+id/action_settings"        android:title="@string/action_settings"        android:orderInCategory="100"        app:showAsAction="never"/></menu>

      其中showAsAction      是控制menu的显示位置

      always是永远显示在toolBar中             ifRoom是屏幕空间足够的情况下显示在toolBar中 不够就显示在菜单中            never一直显示在菜单中

      withText：使菜单项和它的图标，菜单文本一起显示。

      如果显示在toolbar中只显示图标      而显示在菜单中只显示文字

      应用菜单布局在main

     

 //创建菜单的布局    @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.toolbar, menu);        return true;    }

      .监听菜单点击

      

@Override    public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()) {            case R.id.one:                Toast.makeText(this, "第一个按钮", Toast.LENGTH_SHORT).show();                break;            case R.id.two:                Toast.makeText(this, "第二个按钮", Toast.LENGTH_SHORT).show();                break;            case R.id.three:                Toast.makeText(this, "第三个按钮", Toast.LENGTH_SHORT).show();                break;        }        return true;    }

    直接运行  点击菜单按钮会遮挡toolbar
      

      在自定义的popupMenu的style里重新  设置

    

     

<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Light">        <item name="android:colorBackground">#ffff</item>        <!--新增一个item，用于控制menu弹出的位置-->        <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>

        <!--新增一个item，用于更改menu菜单的文字颜色和大小-->        <item name="android:textColor">#000ddd</item>        <item name="android:textSize">10dp</item>    </style>    <style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">        <item name="overlapAnchor">false</item>  <!--把该属性改为false即可使menu位置位于toolbar之下-->    </style>

然后重新设置到toolBar的布局中
       app:popupTheme="@style/ToolbarPopupTheme"

五  不在toolbar里添加view动态更改toolBar的标题

      在mainActivity的oncreate的方法里  设置title    toolbar.setTitle("title");   //给toolBar设置标题内容    总会被清单application的label覆盖

      解决办法：

    

 /**     *  解决在OnCreat里给toolBar设置标题被清单的label覆盖     */    @Override    public void onPostCreate(Bundle savedInstanceState) {        super.onPostCreate(savedInstanceState);        //Toolbar 必须在onCreate()之后设置标题文本，否则默认标签将覆盖我们的设置        if (toolbar != null) {            toolbar.setTitle("零钱");   //给toolBar设置标题内容            toolbar.setSubtitle("微信安全支付");//给toolbar设置子标题        }    }