Android App页面滑动标题栏颜色渐变详解

Xandy ·
更新时间:2024-09-21
· 107 次阅读

通常,我们会被要求实现类似支付宝首页的特效:随着界面的滑动,标题栏的背景透明度渐变。

在实际开发中,常见的滑动有列表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。然后进行透明度的计算即可。



标题栏 app Android

需要 登录 后方可回复, 如果你还没有账号请 注册新账号