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。然后进行透明度的计算即可。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/haoyuegongzi/article/details/85053509
相关文章
- 下面我们来看一篇关于Android子控件超出父控件的范围显示出来方法,希望这篇文章能够帮助到各位朋友,有碰到此问题的朋友可以进来看看哦。 <RelativeLayout xmlns:an...2016-10-02
Android开发中findViewById()函数用法与简化
findViewById方法在android开发中是获取页面控件的值了,有没有发现我们一个页面控件多了会反复研究写findViewById呢,下面我们一起来看它的简化方法。 Android中Fin...2016-09-20- 如果我们的项目需要做来电及短信的功能,那么我们就得在Android模拟器开发这些功能,本来就来告诉我们如何在Android模拟器上模拟来电及来短信的功能。 在Android模拟...2016-09-20
- 夜神android模拟器如何设置代理呢?对于这个问题其实操作起来是非常的简单,下面小编来为各位详细介绍夜神android模拟器设置代理的方法,希望例子能够帮助到各位。 app...2016-09-20
- 为了增强android应用的用户体验,我们可以在一些Button按钮上自定义动态的设置一些样式,比如交互时改变字体、颜色、背景图等。 今天来看一个通过重写Button来动态实...2016-09-20
- 如果我们要在Android应用APP中加载html5页面,我们可以使用WebView,本文我们分享两个WebView加载html5页面实例应用。 实例一:WebView加载html5实现炫酷引导页面大多...2016-09-20
- 深入理解Android中View和ViewGroup从组成架构上看,似乎ViewGroup在View之上,View需要继承ViewGroup,但实际上不是这样的。View是基类,ViewGroup是它的子类。本教程我们深...2016-09-20
- 这篇文章主要介绍了uniapp微信小程序:key失效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-20
- 下面我们来看一篇关于Android自定义WebView网络视频播放控件开发例子,这个文章写得非常的不错下面给各位共享一下吧。 因为业务需要,以下代码均以Youtube网站在线视...2016-10-02
- 这篇文章主要介绍了VSCode 配置uni-app的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
- java开发的Android应用,性能一直是一个大问题,,或许是Java语言本身比较消耗内存。本文我们来谈谈Android 性能优化之MemoryFile文件读写。 Android匿名共享内存对外A...2016-09-20
- TextView默认是横着显示了,今天我们一起来看看Android设置TextView竖着显示如何来实现吧,今天我们就一起来看看操作细节,具体的如下所示。 在开发Android程序的时候,...2016-10-02
android.os.BinderProxy cannot be cast to com解决办法
本文章来给大家介绍关于android.os.BinderProxy cannot be cast to com解决办法,希望此文章对各位有帮助呀。 Android在绑定服务的时候出现java.lang.ClassCastExc...2016-09-20- 这篇文章主要为大家详细介绍了jQuery实现下拉菜单滑动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-09
- 这篇文章主要介绍了Android 实现钉钉自动打卡功能的步骤,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下...2021-03-15
- 下面我们来看一篇关于Android 开发之布局细节对比:RTL模式 ,希望这篇文章对各位同学会带来帮助,具体的细节如下介绍。 前言 讲真,好久没写博客了,2016都过了一半了,赶紧...2016-10-02
- 这篇文章主要介绍了uni-app从安装到卸载的入门教程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-15
- 首先如果要在程序中使用sdcard进行存储,我们必须要在AndroidManifset.xml文件进行下面的权限设置: 在AndroidManifest.xml中加入访问SDCard的权限如下: <!--...2016-09-20
- 本文主要介绍了手把手教你uniapp和小程序分包,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-02
- 下面来给各位简单的介绍一下关于Android开发之PhoneGap打包及错误解决办法,希望碰到此类问题的同学可进入参考一下哦。 在我安装、配置好PhoneGap项目的所有依赖...2016-09-20