滑动改变标题栏的颜色

最近发现不少app中有这样的效果，滑动界面时，标题栏颜色渐变。分析了一下，感觉挺简单的，写了个小demo练手。

最终效果图

从上图效果来作分析，首先，RecyclerView滑动，标题栏背景由透明转换为深红色，滑动的距离是标题栏的高度，超过此高度标题栏背景色固定不变

JAVA

package cn.pan.slidesample;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends FragmentActivity {

private ArrayList dataList;
private RecyclerView mRecyclerView;
private int mDistanceY;
private Toolbar mToolbar;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        loadData();
        initView();
    }

private List loadData() {
        dataList = new ArrayList();
for (int i = 0; i < 20; i++) {
            dataList.add("item" + i);
        }
return dataList;
    }

private void initView() {

        mToolbar = (Toolbar) findViewById(R.id.toolbar);
if (mRecyclerView == null) {
            mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        }
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        mRecyclerView.setAdapter(new DataAdapter(this, dataList));
        mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
//滑动的距离
                mDistanceY += dy;
//toolbar的高度
int toolbarHeight = mToolbar.getBottom();

//当滑动的距离 <= toolbar高度的时候，改变Toolbar背景色的透明度，达到渐变的效果
if (mDistanceY <= toolbarHeight) {
float scale = (float) mDistanceY / toolbarHeight;
float alpha = scale * 255;
                    mToolbar.setBackgroundColor(Color.argb((int) alpha, 128, 0, 0));
                } else {
//上述虽然判断了滑动距离与toolbar高度相等的情况，但是实际测试时发现，标题栏的背景色
//很少能达到完全不透明的情况，所以这里又判断了滑动距离大于toolbar高度的情况，
//将标题栏的颜色设置为完全不透明状态
                    mToolbar.setBackgroundResource(R.color.colorTitle);
                }

            }
        });
    }


}

NOTE: 代码实现的关键是监听了RecyclerView的滑动距离，addOnScrollListener该方法回调返回每次滑动的距离，我们在回调方法onScrolled()中做逻辑的处理。代码中的注释已经写的很清楚了。注意：这里的数据类型千万别搞错了。

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="cn.pan.slidesample.MainActivity">


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

<TextView
 android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="@color/colorPrimary"
android:text="@string/app_name" />

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

<android.support.v7.widget.RecyclerView
 android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</LinearLayout>

扩展：

经常使用美团外卖的小伙伴应该发现了，这个效果跟美团的有点类似。美团的标题栏是滑动时，把整个标题栏的透明度做了修改（包括里面的文字内容，上述只是修改了背景色），直到透明度完全为0的时候，重新显示了一个新的view。

这个原理是一样的，根据滑动的距离界限，设置标题的透明度View.setalpha(),然后setVisiable()就行了，小伙伴门可以去尝试一下