小菜鸟学习历程之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>