ToolBar简介以及使用详解

ToolBar简介以及使用详解

通过本篇博客大家可以了解到：
1.ToolBar是什么
2.ToolBar常用属性
3.ToolBar如何使用
1.ToolBar简介
Toolbar supports a more focused feature set than ActionBar. From start to end, a toolbarmay contain a combination of the following optional elements:
A navigation button
A branded logo image
A title and subtitle

toolbar 是 android 5.0 引入的一个新控件，可以理解为是ActionBar的升级版，大大扩展了Actionbar，使用更灵活，不像actionbar那么固定，Toolbar更像是一般的View元素，可以被放置在view树体系的任意位置，可以应用动画，可以跟着scrollView滚动，可以与布局中的其他view交互。

我们先来看一下效果：

2.使用步骤：
设置项目需求风格 (style)
界面实现 (layout)
代码实现交互 (java)

1.首先在styles.xml中添加如下style，主要是“Theme.AppCompat.Light.NoActionBar”这是屏蔽ActionBar，
colorPrimary表示ToolBar的背景色
colorPrimaryDark表示状态栏的颜色
navigationBarColor表示底部导航栏的颜色

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="colorPrimary">@color/accent_material_dark</item>
        <item name="colorPrimaryDark">@color/accent_material_light</item>
        <item name="android:windowBackground">@color/dim_foreground_material_dark</item>
        <item name="navigationBarColor">@color/accent_material_light</item>
    </style>

2.在布局文件中加入ToolBar控件

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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.toobartest.MainActivity">

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

</android.support.constraint.ConstraintLayout>

3.在代码中做处理：

package com.example.toobartest;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //声明ToolBar控件
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        //设置logo图片
        toolbar.setLogo(R.mipmap.ic_launcher);
        //设置标题
        toolbar.setTitle("My Title");
        //设置副标题
        toolbar.setSubtitle("Sub title");
        //设置导航图标
        toolbar.setNavigationIcon(R.drawable.ab_android);
        //设置支持ToolBar
        setSupportActionBar(toolbar);
        //给menu设置item点击事件            toolbar.setOnMenuItemClickListener(onMenuItemClickListener);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //这是加载menu的代码
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
    //这是对menu中item的监听
    Toolbar.OnMenuItemClickListener onMenuItemClickListener = new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            switch (item.getItemId()) {
                case R.id.action_edit :

                    break;
                case R.id.action_share :

                    break;
                case R.id.action_settings :

                    break;
            }
            return false;
        }
    };
}

其中menu_main.xml是你手动创建的，在res目录下创建menu目录，在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:icon="@drawable/ab_edit"
        android:orderInCategory="80"
        android:title="@string/action_edit"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_share"
        android:icon="@drawable/ab_share"
        android:orderInCategory="90"
        android:title="@string/action_edit"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never" />
</menu>

注释：如果你想自定义menu中item图标的位置，其实可以不用加载menu的方式，因为ToolBar继承的是ViewGroup，所以你可以直接在它内部包裹图标，从而自定义位置：

像这样：

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