Android之5.x Toolbar的使用

主要知识点：

1、Toolbar的简介；

2、Toolbar的使用;

在5.x之前的版本，我们都是习惯使用actionbar来进行页面标题栏的设置，或者是自己定义一个title控件来设置，但是个人并没有怎么用到，因为感觉还是不太好用，有不少的效果都很难实现。在5.x之后，Google提供了一个替代的方案，Toolbar，就是它了。

第一步：因为Google使用的是支持包来进行更新，需要在build.gradle文件下加入如下代码：

compile 'com.android.support:appcompat-v7:25.1.0'

第二步：然后自定义一个样式：

<style name="AppThemeToolbar" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!--导航栏底色-->
        <item name="colorPrimary">@color/accent_material_dark</item>
        <!--状态栏底色-->
        <item name="colorPrimaryDark">@color/accent_material_light</item>
        <!--导航栏上的标题颜色-->
        <item name="android:textColorPrimary">@android:color/black</item>
        <!--Activity窗口的颜色-->
        <item name="android:windowBackground">@color/material_blue_grey_800</item>
        <!--按钮选中或者点击获得焦点后的颜色-->
        <item name="colorAccent">#00ff00</item>
        <!--和 colorAccent相反，正常状态下按钮的颜色-->
        <item name="colorControlNormal">#ff0000</item>
        <!--Button按钮正常状态颜色-->
        <item name="colorButtonNormal">@color/accent_material_light</item>
        <!--EditText 输入框中字体的颜色-->
        <item name="editTextColor">@android:color/white</item>
    </style>

第三步：然后在需要的activity中应用样式

android:theme="@style/AppThemeToolbar"

第四步：在布局文件里面加入此控件，我这里使用的是新建工程时，IDE自动帮我们创建的一个首页布局。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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"
    android:fitsSystemWindows="true"
    tools:context="com.yaojt.HomeActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">

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

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_home"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

再布局文件看到的是这样的样子

第五步：在activity中获取toolbar控件，并且设置相关属性，在下面的代码中都有相应的解释了。

@Override
    protected void onCreate(Bundle savedInstanceState) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            super.onCreate(savedInstanceState);
        }
        setContentView(R.layout.activity_home);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        /* 想要通过toolbar.setTitle(“主标题”);设置Toolbar的标题，你必须在调用它之前调用如下代码 */
        if (getSupportActionBar() != null) getSupportActionBar().setDisplayShowTitleEnabled(false);
        /** 主标题 */
        toolbar.setTitle("title");
        /* 副标题 */
        toolbar.setSubtitle("subTitle");
        /* 设置logo */
        toolbar.setLogo(R.drawable.__leak_canary_icon);
        /* 导航按钮 */
        toolbar.setNavigationIcon(R.drawable.__leak_canary_notification);
        /* 设置描述 */
        toolbar.setNavigationContentDescription("navDes");
        toolbar.setCollapsible(false);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

    }

第六步：运行起来后，是这个样子的，是沉浸式的样式，我们在布局中加入这个属性

android:background="?attr/colorPrimary"

当然，toolbar也支持自定义样式，下面就是自定义的样式布局

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tb_titleP"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="back" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_gravity="center_vertical"
            android:text="页面标题"
            android:textSize="18sp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:background="@drawable/abc_ic_menu_share_mtrl_alpha" />

    </RelativeLayout>

</android.support.v7.widget.Toolbar>

在IDE上看到的是这样子的

不知道大家注意到没，我特意将鼠标放到RelativeLayout   父布局中，可以看到里头并没有做任何的距离控制，为什么RelativeLayout   会和左边有一个距离呢？

这个是默认的，距离是16dp，估计是Google为了更加美观而加入的。我们也可以在代码中进行设置，代码如下：

Toolbar toolbar = (Toolbar) findViewById(R.id.tb_titleP);
        /* 默认toolbar在和左边/右边是有一个距离，16dp，下面代码，可以设置左右边距的距离
         * 单位默认是int */
        toolbar.setContentInsetsAbsolute(20, 20);

但是一般来说，我们还是保持一点的距离，这样才更加好看。因为用户体验是很重要的，即使是你的功能做的很好，用户体验却很差，用户不卸载掉你的APP才怪呢，气人。

共勉！