逐渐消失的Item！ —— RecyclerView隐藏与渐变的实现

在项目中需要实现item的渐变隐藏，一开始想复杂了，兜兜转转一圈才发现可以用最简单的方式实现。

效果如下：

需要源码的同学，转到github下载

一、方式

1.基本思路

这种简单的渐变隐藏效果，可以使用蒙层的思路去完成。也就是如图，我们可以在RecyclerView上添加一个透明度渐变的图层，这样随着透明度的减少，RecyclerView就渐变隐藏了。

2.蒙层的建立

透明渐变的图层需要用到LayerDrawable和ShapeDrawable，对应标签是<layer-list>和<shape>，通过在res/drawable文件夹下建立.xml文件进行定义。

<layer-list>通过设置item来进行不同drawable复合，而<shape>中的<gradient>用于设置渐变，<solid>用于设置纯色。

3.颜色数值的解析

在#FFFFFF这种六位颜色数值的表示中，前两位代表透明度，后四位才代表具体的颜色。前两位为#FF代表完全不透明，#00代表完全透明。

比如淡紫色为#E6E6FA，是示例的背景色，那么蒙层只需要从#00E6E6FA到#FFE6E6FA就可以实现透明到不透明的渐变。

二、代码解析

省略RecyclerView的创建代码，直接看布局文件。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"....android:layout_width="match_parent"android:layout_height="match_parent"><android.support.v7.widget.RecyclerViewandroid:background="@color/colorbackground"android:id="@+id/recycleview"android:layout_width="match_parent"android:layout_height="match_parent"/><ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/layer_list_mask"/></android.support.constraint.ConstraintLayout>

很简单的布局，我们只是在RecyclerView上，添加了一个同等大小的ImageView作为蒙层。

我们来看蒙层的代码，也就是上面的@drawble/layer_list_mask.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"><!--透明渐变蒙层--><itemandroid:bottom="100dp"android:top="350dp"><shape android:shape="rectangle"><!--设置渐变--><gradientandroid:angle="-90"android:startColor="#00E6E6FA"android:endColor="#FFE6E6FA"/></shape></item><!--底部蒙层非透明--><itemandroid:height="100dp"android:gravity="bottom"><shape android:shape="rectangle"><!--设置纯颜色进行遮挡--><solid android:color="#FFE6E6FA" /></shape></item>
</layer-list>

笔者用<layer-list>标签让两个shape复合，而逐渐不透明的渐变从顶部350dp开始，距离底部100dp的地方结束。最后，底部的100dp部分用纯色，就会遮挡住这一部分了。

你可以调整或者按着自己的思路来建立蒙层，达到期望的效果。

希望这篇文章可以有所帮助。