Android App页面滑动标题栏颜色渐变详解
作者：任缥缈
通常，我们会被要求实现类似支付宝首页的特效：随着界面的滑动，标题栏的背景透明度渐变。
在实际开发中，常见的滑动有列表RecyclerView(ListView)滑动，NestedScrollView(ScrollView)嵌套滑动等等。
本文主要从上述两方面来探讨滑动效果。
一、RecyclerView滑动标题栏渐变
废话不多说，直接撸代码：
布局文件如下：
<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="wrap_content" android:orientation="vertical" android:background="@color/white" tools:context=".scroll_toolbar.ScrollToolBarActivity"> <!-- title标题栏--> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/white"> <ImageView android:id="@+id/ivBack" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="@dimen/qb_px_20" android:gravity="center_vertical" android:src="@drawable/theme_toolbar_btn_back_fg_normal0" android:textColor="#ffffff" /> <TextView android:id="@+id/tvName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#666666" android:textSize="16sp" android:padding="@dimen/qb_px_20" android:text="RecyclerView控制titleBar渐变"/> </android.support.v7.widget.Toolbar> <android.support.v7.widget.RecyclerView android:id="@+id/rvZhangjie" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_marginLeft="@dimen/qb_px_50" android:layout_marginRight="@dimen/qb_px_50" android:layout_marginTop="@dimen/qb_px_20" android:background="@color/back_ground"/> </LinearLayout>
Java代码如下：
private void toolBarColor(){
Toolbar toolbar = findViewById(R.id.toolbar);
ImageView ivBack = findViewById(R.id.ivBack);
TextView tvName = findViewById(R.id.tvName);
RecyclerView rvZhangjie = findViewById(R.id.rvZhangjie);
List<String> stringList = dealData();
ScrollAdapter scrollAdapter = new ScrollAdapter(this, stringList);
LinearLayoutManager manager = new LinearLayoutManager(this);
manager.setOrientation(LinearLayoutManager.VERTICAL);
rvZhangjie.setLayoutManager(manager);
rvZhangjie.setAdapter(scrollAdapter);
rvZhangjie.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
//toolbar的高度
toolbarHeight = toolbar.getBottom();
//滑动的距离
mDistanceY += dy;
//当滑动的距离 <= toolbar高度的时候，改变Toolbar背景色的透明度，达到渐变的效果
if (mDistanceY <= toolbarHeight) {
float scale = (float) mDistanceY / toolbarHeight;
float alpha = scale * 255;
toolbar.setBackgroundColor(Color.argb((int) alpha, 255, 0, 0));
} else {
//上述虽然判断了滑动距离与toolbar高度相等的情况，但是实际测试时发现，标题栏的背景色
//很少能达到完全不透明的情况，所以这里又判断了滑动距离大于toolbar高度的情况，
//将标题栏的颜色设置为完全不透明状态
toolbar.setBackgroundResource(R.color.colorPrimary);
}
}
});
}上面代码中的 dealData()方法很简单就是想一个String型List里面添加数据，没什么难度。
关键点在于给rvZhangjie.addOnScrollListener()也就是给RecyclerView设置滑动监听，并复写onScrolled()方法。该方法里面3个参数：
第一个RecyclerView recyclerView，这个很明显就是目标RecyclerView；
第二个int dx，表示RecyclerView在水平X方向的相对滑动量；
第三个int dy，表示RecyclerView在垂直Y方向的相对滑动量；
我们可以通过累加计算RecyclerView滑动的距离相对于指定距离的百分比，来计算透明度的变化量：
mDistanceY += dy; float scale = (float) mDistanceY / toolbarHeight; float alpha = scale * 255;
最后再将alpha透明度值设置给ToolBar：
toolbar.setBackgroundColor(Color.argb((int) alpha, 255, 0, 0));
二、NestedScrollView滑动标题栏渐变
其实NestedScrollView滑动渐变和RecyclerView的滑动渐变原理是一样的，本质上都是监听View滑动的距离，通过距离换算成透明度值。只不过二者的滑动偏移量稍有点不同。
代码细节我就不贴出来了，就说说关键的对NestedScrollView的监听和偏移量的处理：
nsvScroolBack.setOnScrollChangeListener(new View.OnScrollChangeListener() {
@Override
public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
//scrollY > oldScrollY:向上滑动
//scrollY < oldScrollY:向下滑动
// scrollY:滚动过的距离。
toolbarHeight = toolbar.getBottom() * 1.5f;
if (scrollY <= toolbarHeight){
float scale = (float)scrollY / toolbarHeight;
float alpha =scale * 255;
toolbar.setBackgroundColor(Color.argb((int) alpha, 255, 0, 0));
}else {
toolbar.setBackgroundColor(Color.BLUE);
}
}
});通过上面的代码，很容易发现NestedScrollView滑动渐变和RecyclerView的滑动渐变就一回事。代码实现上差别很细微。不同的是RecyclerView的滑动渐变哪里，我们要通过对dy的累加来获得RecyclerView在垂直方向的滑动偏移量。而在NestedScrollView的滑动渐变里面，NestedScrollView在x或者y方向的滑动偏移量，系统已经帮我们计算出来了：scrollX或者scrollY。然后进行透明度的计算即可。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。