Android Toolbar的使用

ToolBar简介

ToolBar是Android 5.0推出的一个新的导航控件用于取代之前的ActionBar，由于其高度的可定制性、灵活性、具有Material Design风格等优点，越来越多的应用也用上了ToolBar，比如常用的知乎软件其顶部导航栏正是使用ToolBar。官方考虑到仍有一部分用户的手机版本号低于5.0，所以，ToolBar也放进了support v7包内，使得低版本的系统也能使用上ToolBar。

ToolBar的基本使用

1. 在build.gradle文件中引入com.android.support:appcompat-v7，如果使用ADT开发则需要引入support-v7包
2. 修改主题，在values中的style配置Theme.AppCompat.Light.NoActionBar
3. 写布局，把Toolbar当作一个普通的容器来使用
4. 你的Activity需要继承AppcompatActivity
5. 使用Toolbar替换ActionBar
   setSupportActionBar(toolbar)

下面我们来一步一步实现Toolbar的使用

设置主题

    <!-- Base application theme. -->
    <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>

其中ColorPrimary颜色为Toolbar的背景颜色

布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

</RelativeLayout>

Toolbar的高度取系统参数中的actionBarSize，背景颜色取colorPrimary

在Activity中初始化

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

设置Toolbar的相关属性

• 设置Toolbar标题

app:title="@string/app_name"

• 设置Toolbar子标题

app:subtitle="jason"

• 设置Toolbar logo图标以及导航图标

app:logo="@mipmap/ic_launcher_round"
app:navigationIcon="@mipmap/ic_launcher"

设置Toolbar标题以及子标题的字体

app:titleTextColor="@color/colorText"
app:subtitleTextColor="@color/colorText"

看一下效果

可以在图中看到Toolbar右侧有一个搜索图标以及菜单图标，这些是由menu来决定的

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_search"
        android:icon="@mipmap/ic_search"
        android:orderInCategory="100"
        android:title="查找"
        app:showAsAction="always" />
    <item
        android:id="@+id/action_share"
        android:icon="@android:drawable/ic_menu_share"
        android:orderInCategory="101"
        android:title="分享"
        app:showAsAction="never" />
    <item
        android:id="@+id/action_new"
        android:icon="@android:drawable/ic_menu_add"
        android:orderInCategory="102"
        android:title="添加"
        app:showAsAction="never" />

</menu>

app:showAsAction可以设置不同的值来达到不同的显示效果，

• always，表示显示在Toolbar上
• never，表示不显示在Toolbar上

• ifRoom，表示如果Toolbar有空间可以展示则显示在Toolbar上

  下面我们来实现这样一个动画需求：
  

当滚动条向下滑动的同时，Toolbar需要不断的改变透明度，最后消失。
我们来分析一下：首先需要实现这样一个UI，Toolbar需要在最上层，而ScrollView又需要完全展示，则需要给ScrollView设置一个paddingTop；Toolbar跟随ScrollView的滚动距离来改变透明度，那么我们需要监听ScrollView的滚动来获取滚动距离才能达到Toolbar透明变化的效果；

public class XYScrollView extends ScrollView {

    private AlphaChangeListener mAlphaChangeListener;

    public XYScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void setAlphaChangeListener(AlphaChangeListener alphaChangeListener){
        mAlphaChangeListener = alphaChangeListener;
    }

    public interface AlphaChangeListener{
        void onAlphaChange(float alpha);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if(mAlphaChangeListener != null){
            int scrollY = getScrollY();
            int screen_height = getContext().getResources().getDisplayMetrics().heightPixels;
            if(scrollY<=screen_height/3f){//0~1f,而透明度应该是1~0f
                mAlphaChangeListener.onAlphaChange(1-scrollY/(screen_height/3f));//alpha=滑出去的高度/(screen_height/3f)
            }
        }
    }
}

XYScrollView scrollView = (XYScrollView) findViewById(R.id.scrollview);
        scrollView.setAlphaChangeListener(new XYScrollView.AlphaChangeListener() {
            @Override
            public void onAlphaChange(float alpha) {
                toolbar.setAlpha(alpha);
            }
        });

但是最后又有另外一个问题，在Toolbar完全透明时，ScrollView因为设置了PaddingTop会出现下图这种被遮挡的情况

那么这种情况需要如何处理呢？我们就需要用到android:clipToPadding这个属性了，来看一下这个属性是什么含义：clipToPadding就是说控件的绘制区域是否在padding里面的，我们设置ScrollView的属性为：android:clipToPadding=“false”，问题完美解决。