天天看点

实现淘宝和QQ ToolBar透明渐变效果

哎,好久都没写博客了,最近有点懒惰了,今天端午节,在学校也是无聊的蛋疼啊,正好今天玩玩一些在其他app中常见的一些功能。

来看看效果图吧!

实现淘宝和QQ ToolBar透明渐变效果

之前是在简书上面看了一篇实现的这种功能,他是重写coordinatorlayout的behavior类来达到效果,也确实理解到了coordinatorlayout的强大之处啊,但是自己跟着他的效果走的时候 ,感觉好像不是太理想的样子。

今天我来自己 写个

来看看我的效果图:

实现淘宝和QQ ToolBar透明渐变效果

哇塞,好牛逼的样子,额,其实也就那么回事。

来讲讲思路吧

实现淘宝和QQ ToolBar透明渐变效果

草稿画。。。。这个应该看的懂吧,就是一些控件的分布

实现淘宝和QQ ToolBar透明渐变效果

自己用画图软件画的,自己看的都心醉心醉的。

从图中我们应该就能了解到,其实这些好像就那么回事,拿到高度,然后设置透明度就行了,其实,是这个样子的

首先,我们要知道设置view的透明度的代码

参数设置的是透明度的变化值为0~255,颜色数嘛是吧。

然后看看获取变化距离区间的代码

这样,我们就拿到距离的代码了,现在两样都齐全了,怎样才能将他们关联起来呢,我们想想,当前滚动的scrollview的y值去减去这个headheight,这个相差值只允许他在headheight的高度去变化,如果scrollview滑动的距离超出这个高度的话,那么我们直接设置alpha为255直接显示变透明,如果这个scrollview滑动的到顶部时,我们直接设置alpha为0为透明,我们首先拿到这个变化的距离,然后去除以这个headheight高度拿到这个百分比,然后去乘上255拿到同等比例中的透明度的值,记得这个数值都得是float类型,高度也是,要是int的话这样相除的话就变成0了。

拿到这个透明度后就可以设置进去了,思路就是这么简单,现在来贴下代码。

主要呢还是重写scrollview,将需要变化的布局传递给他,然后重写scrollview的onscrollchanged方法,里面的参数看看应该明白了,那是当前scrollview的坐标距离顶部的top距离和左边left距离,和之前分析的一样,只不过getscrolly()的值变成了t而已,方法中的高度都给传给你了,那就更简单了。

来说说做的时候的误区和不解。

①、之前来改变这个透明度的时候我是重写了ontouchevent方法,手指在滑动的时候来获取距离差来设置透明度,这样做确实是能做出来,但是在手指离开屏幕,scrollview还在滑动的时候,就不走move方法,这个比例值也就不再变化了,到达顶部的时候透明度都没有什么变化,所以,不能从这里入手,我上面说那位简书哥们给的方法,我体验的就是这样的,所以不是太好。

②、 mslop=viewconfiguration.get(context).getscaleddoubletapslop();

这个值好坑爹啊,之前看大神们写说是触动滑动事件最好是超过这个距离再来触发,我就用了这个,发现不对,log出来一下mslop是300px,总共这个头部才没多少,所以就不用他了,直接自己定义为10px就差不多了,设这个主要是为了到达这个值的时候直接设置为全透明了,免得还要使劲滑到0才设置透明度的话,那样体验就不好了,给个缓冲值会更好点。

③、喜欢给距离设置dp的我也是醉了,200dp被我log出来是600,要好好注意点了,虽然这个没什么,不影响代码,但是还是要注意的。

继续阅读