小菜鸟学习历程之ToolBar

一、使用步骤

1、给activity设置主题，设置取消ActionBar，否则会报错：

Caused by: java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.

所以可以给acivity设置主题，取消ActionBar

<activity android:name=".ToolBarActivity"            android:theme="@style/MyToolBarTheme"/>

取消actinBar有两种方式，style.xml文件如下：

<style name="MyToolBarTheme" parent="Theme.AppCompat.Light.DarkActionBar">    <!-- Customize your theme here. -->    <item name="colorPrimary">@color/colorPrimary</item>    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>    <item name="colorAccent">@color/colorAccent</item>    <item name="windowActionBar">false</item>    <item name="windowNoTitle">true</item></style>

或者

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

2、在activity的布局文件里面引入toolbar

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.toolbardemo.MainActivity">    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="50dp"        android:background="@color/colorPrimary"        app:title="MyToolBar"> <!--此处要用app:    用android:  没有效果，不能修改标题-->    </android.support.v7.widget.Toolbar>    <TextView        android:layout_width="match_parent"        android:layout_height="100dp"        android:layout_below="@+id/toolbar"        android:text="Hello World!"        android:gravity="center"        android:textSize="18sp"        android:textColor="#fff"        android:background="#2698e0"/></RelativeLayout>

3、在res文件夹下面创建menu目录，在menu下面创建menu文件，用作toolbar的布局

<?xml version="1.0" encoding="utf-8"?><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/menu_open"        android:icon="@drawable/open"        android:title="@string/filter"        app:showAsAction="ifRoom" />    <item        android:id="@+id/menu_about"        android:title="@string/about"        app:showAsAction="never" /></menu>

4、在activity里面重写onCreateOptionsMenu 方法，给toolbar设置布局

//给toolbar设置布局    @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.main,menu);        return true;    }

*注：第三、四步 不是必须的，可以不设置menu*

5、在activity里面用setSupportActionBar(toolbar) 使用toolbar

package com.toolbardemo;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.Menu;public class ToolBarActivity extends AppCompatActivity {    Toolbar toolbar;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_toolbar);        toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        getSupportActionBar().setDisplayHomeAsUpEnabled(true);//显示左侧按钮    }    //给toolbar设置布局    @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.main,menu);        return true;    }}

运行效果入下：

6、给menu设置点击事件，有两种方式
（1）、给toolbar设置点击事件

toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {            @Override            public boolean onMenuItemClick(MenuItem item) {                switch (item.getItemId()){                    case R.id.menu_open:                        Log.i("GUIYU","切换");                        break;                    case R.id.menu_about:                        Log.i("GUIYU","关于");                        break;                }                return true;            }        });

（2）、重写onOptionsItemSelected方法

@Override    public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()){            case R.id.menu_open:                Log.i("GUIYU","切换");                break;            case R.id.menu_about:                Log.i("GUIYU","关于");                break;        }        return true;    }

7、给左侧按钮设置点击事件，同样有两种方式
（1）、给toolbar设置点击事件

toolbar.setNavigationOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Log.i("GUIYU","返回");            }        });

（2）、重写onOptionsItemSelected方法

@Override    public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()){            case android.R.id.home:  //左侧按钮系统默认id                Log.i("GUIYU","左侧");                break;            case R.id.menu_open:                Log.i("GUIYU","切换");                break;            case R.id.menu_about:                Log.i("GUIYU","关于");                break;        }        return true;    }

二、样式修改

1、修改toolbar字体和图标的颜色，现在是黑色，可以变成白色
只要设置activity的 样式的parent 为parent=”Theme.AppCompat.NoActionBar”即可，即去掉了Light，这样修改之后activity背景会变成黑色

2、默认Overflow 弹出框会覆盖toolbar，可以给toolbar设置样式，让Overflow 在toolbar下面显示
未修改前样式：

下面给toolbar设置样式

<!--设置OverflowMenu 样式-->    <style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark">        <item name="overlapAnchor">false</item>    </style>

toolbar引入样式

<android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="50dp"        android:background="@color/colorPrimary"        android:theme="@style/ToolbarPopupTheme"        app:title="MyToolBar"> <!--此处要用app:    用android:  没有效果，不能修改标题--> </android.support.v7.widget.Toolbar>

修改样式之后，Overflow就跑到toolbar下面去了

3、修改Overflow 的样式，同样修改toolbar的样式，改变Overflow 的背景色和字体颜色

<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark">        <item name="android:colorBackground">@android:color/holo_red_dark</item>        <item name="android:textColor">@android:color/white</item>        <item name="overlapAnchor">false</item>    </style>

4、menu.xml文件中的app:showAsAction=”ifRoom”属性，属性共有三个：ifRoom，always，never

always：总是显示在界面上
never：不显示在界面上，只让出现在右边的三个点中
ifRoom：如果有位置才显示，不然就出现在右边的三个点中

（1）、都设置成never

<?xml version="1.0" encoding="utf-8"?><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/menu_open"        android:icon="@drawable/open"        android:title="@string/filter"        app:showAsAction="never" />    <item        android:id="@+id/menu_about"        android:title="@string/about"        app:showAsAction="never" /></menu>

运行之后样式为：两个按钮都跑到后面三个点里面去了

（2）、都改成ifRoom，两个按钮都显示，并且三个点没了

（3）、都改成always ，跟ifRoom一样

5、修改左侧按钮图标
只需要在布局文件的 toolbar里面加上一句

app:navigationIcon="@drawable/ic_launcher"

6、修改右侧menu图标，修改toolbar的样式

    <style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark">        <item name="android:colorBackground">@android:color/holo_red_dark</item>        <item name="android:textColor">@android:color/white</item>        <item name="overlapAnchor">false</item>        <item name="actionOverflowButtonStyle">@style/OverlowButtonStyle</item>    </style>    <!--修改右侧menu图标-->    <style name="OverlowButtonStyle" parent="@android:style/Widget.ActionButton.Overflow">        <item name="android:src">@drawable/ic_launcher</item>    </style>

7、修改title字体大小和颜色

<android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="50dp"        android:background="@color/colorPrimary"        android:theme="@style/ToolbarPopupTheme"        app:navigationIcon="@drawable/ic_launcher"        app:title="MyToolBar"        app:titleTextColor="#f00"  //字体颜色        app:titleTextAppearance="@style/Toolbar.TitleText" //字体大小        > <!--此处要用app:    用android:  没有效果，不能修改标题-->    </android.support.v7.widget.Toolbar>

 <!--修改toolbar title字体大小-->    <style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">        <item name="android:textSize">10sp</item>    </style>

8、修改menu字体颜色和大小

<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark">        <item name="android:colorBackground">@android:color/holo_red_dark</item>        <item name="android:textColor">@android:color/white</item>        <item name="overlapAnchor">false</item>        <item name="actionOverflowButtonStyle">@style/OverlowButtonStyle</item>        <item name="android:actionMenuTextAppearance">@style/MenuTextStyle</item>        <item name="android:actionMenuTextColor">#0f0</item>    </style>    <!--修改toolbar title字体大小-->    <style name="MenuTextStyle">        <item name="android:textSize">30sp</item>    </style>