Android常见的上滑渐变显示标题栏

前言*

~(￣0￣)/， 最近发现很多的APP都有标题渐变的效果，于是就想着写一篇文章记录记录。

废话少说，直接上动图 ，看看市面上常见的上滑渐变的标题栏。

小米商场和淘宝电影

分析

---

相信大家也有过这种需求.其实这很简单。我们可以通过这个 控件.setAlpha(percent);方法去达到上图的效果。

不过可能会出现兼容问题。所以最好使用 ViewCompat.setAlpha(view,value); 方法。

简单的来说 ViewCompat主要解决兼容性的。ViewCompat会根据版本判断然后调用不同的方法。

我们可以用SeekBar来模拟我们下场景。

---

原理

正所谓授人鱼不如授人以渔。 直接上动图

布局就不贴上了。相信大家闭着眼也能写。

通过上面的动图，原理也明白了吧。 参数的范围的 0-1。

---

实例-CoordinatorLayou+AppBarLayout 。

先上效果图。

---

先贴上用到的API。

//标题栏渐变ViewCompat.setAlpha(view,value);///背景图和圆形头像的放大和缩小ViewCompat.setScaleX(mImageView,value);ViewCompat.setScaleY(mImageView,value);//通过使用上面的API和一些监听就可以达到上图的效果。ヽ(*。>Д<)o゜

思路

//设置AppBarLayout的滑动监听。 通过滑动的距离计算出缩小，放大 和透明度。child.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {            @Override    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {                //计算出百分比                float percent = Float.valueOf(Math.abs(verticalOffset)) / Float.valueOf(appBarLayout.getTotalScrollRange());                //设置透明度和要头像缩小的范围                ViewCompat.setAlpha(mViewGroup,percent);                ViewCompat.setScaleX(mCircleImageView, 1 - percent);                ViewCompat.setScaleY(mCircleImageView, 1 - percent);            }        });

---

授人鱼不如授人以渔。

其他的代码就不贴上来了

接下来靠大家自己去实践才会更清楚哦。正所谓 如马克思所说： 实践才是检验真理的唯一标准。啧啧。【完】