RecyclerView 首个Item顶部渐变效果

抖音“新鲜”Tab页上有个效果比较有意思，当Item滑到顶部的时候，item上的文字信息会有一个渐变的隐藏效果，如下图

这个效果实现起来不是特别难，但是有一些细节地方需要我们考虑一下，下面我就把我实现的方式分享一下，先来一张效果图

实现方式

• 使用RecyclerView.OnScrollListener监听RecyclerView的滚动
• 在onScrolled(RecyclerView recyclerView, int dx, int dy)方法中获取第一个Item
• 获取第一个Item的滑动出屏幕的百分比
• 根据计算获取当前文字区域的Alpha值

代码如下：

RecyclerView.OnScrollListener mScrollListener = new RecyclerView.OnScrollListener() {
        @Override
        public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
            super.onScrollStateChanged(recyclerView, newState);
        }

        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            super.onScrolled(recyclerView, dx, dy);
            RecyclerView.LayoutManager manager = recyclerView.getLayoutManager();
            //这里我使用的是GridLayoutManager,并且RecyclerView只有两列
            if(manager instanceof GridLayoutManager){
                GridLayoutManager gridLayoutManager = (GridLayoutManager) manager;
                int firstVisiblePos = gridLayoutManager.findFirstVisibleItemPosition();
                setViewAplha(gridLayoutManager.findViewByPosition(firstVisiblePos));
                setViewAplha(gridLayoutManager.findViewByPosition(firstVisiblePos+1));

                int firstCompletelyVisible = gridLayoutManager.findFirstCompletelyVisibleItemPosition();
                ItemView view1 = (ItemView) gridLayoutManager.findViewByPosition(firstCompletelyVisible);
                ItemView view2 = (ItemView) gridLayoutManager.findViewByPosition(firstCompletelyVisible + 1);
                if(view1 != null){
                    view1.setAlpha(1);
                }
                if(view2 != null){
                    view2.setAlpha(1);
                }
            }
        }
    };


    float beginPercent = 0.2f;
    float endValue = 2;

    private void setViewAplha(View view){
        if (view == null || !(view instanceof ItemView))
            return;
        float p = UIUtils.px2dip(Math.abs((int) view.getY())) * 1.0f / UIUtils.px2dip(view.getHeight()) * 1.0f;
        float curPercent = Float.compare(p - beginPercent, 0.0f) < 0 ? 0.0f : p - beginPercent;
        curPercent = Float.compare(1, curPercent * endValue) < 0 ? 1 : curPercent * endValue;
        view.setAlpha(1 - curPercent);
    }

这里的ItemView是自定义的每一个内容区域的View，布局比较简单 只有一个TextView 代码如下

private static class ItemView extends LinearLayout{
        TextView textView;
        Context mContext;
        public ItemView(Context context) {
            super(context);
            mContext = context;
            init();
        }

        private void init(){
            View root = LayoutInflater.from(mContext).inflate(R.layout.layout_test_item,this);
            textView = (TextView) root.findViewById(R.id.item_text);
        }

        public void setText(String text){
            textView.setText(text);
        }

        public void setAlpha(float alpha){
            textView.setAlpha(alpha);
        }
    }

需要考虑的细节问题

• Adapter Holder的复用
  我们都知道RecyclerView.Adapter会对Holder进行复用来节约内存的开销，如果假设一屏有十个item，当我们滑动到第十一个Item时会复用第一个Item的Holder，所以在onBindViewHolder方法中我们需要把文字区域的Alpha值设置为不透明，adaper的代码如下：

RecyclerView.Adapter adapter = new RecyclerView.Adapter() {
        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            ItemView itemView = new ItemView(parent.getContext());
            ViewHolder holder = new ViewHolder(itemView);
            return holder;
        }
        @Override
        public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
            ViewHolder holder1 = (ViewHolder) holder;
            holder1.itemView.setText("我是Item"+position);
            //需要把item设置不透明，否则可能会因为复用导致item刚显示就是看不见的
            holder1.itemView.setAlpha(1);
        }

        @Override
        public int getItemCount() {
            return 40;
        }
        class ViewHolder extends RecyclerView.ViewHolder{
            ItemView itemView;
            public ViewHolder(View itemView) {
                super(itemView);
                this.itemView = (ItemView) itemView;
            }
        }
    };

• 快速滑动的问题
  RecyclerView 滑动时会有如下三种状态

 /**
     * The RecyclerView is not currently scrolling.
     * @see #getScrollState()
     */
    public static final int SCROLL_STATE_IDLE = 0;

    /**
     * The RecyclerView is currently being dragged by outside input such as user touch input.
     * @see #getScrollState()
     */
    public static final int SCROLL_STATE_DRAGGING = 1;

    /**
     * The RecyclerView is currently animating to a final position while not under
     * outside control.
     * @see #getScrollState()
     */
    public static final int SCROLL_STATE_SETTLING = 2;

当我们快速滑动时可能会由于滑动速度过快，导致在下次回调时可能已经是下一个item元素，例如，在当前onScrolled方法回调时，findFirstVisibleItemPosition可能是item4，然后我们计算出文字区域的Alpha是0.6，因为滑动过快，下次回调onScrolled方法时，findFirstVisibleItemPosition可能就变成了item6，Alpha值是0.8，因为我们缺少了item4的完整状态，就导致了当快速滑动停止时，可能item6是正确的透明度，但是我们希望item4是完全不透明的，但是实际却是0.6
为了解决这个问题，我尝试了几种方法，像监听滑动状态啊、判断onScrolled中的dy参数啊，后来我发现我有点给想的麻烦了，其实不管滑动速度多快，每个item在滑动到第一个完全可展示的位置时，是一定会被我们知道的，比如虽然我们不能拿到item4从完全透明到完全不透明的所有状态，但是当item6是第一个item时，item4一定是第一可以完全展示的item(我的RecyclerView有两列)，所以我们就可以通过这个点来下手，通过LayoutManager的findFirstCompletelyVisibleItemPosition来找到第一个完全可见的Item位置，具体体现就是刚才RecyclerView.OnScrollListener 里面的代码

           int firstCompletelyVisible = gridLayoutManager.findFirstCompletelyVisibleItemPosition();
           ItemView view1 = (ItemView) gridLayoutManager.findViewByPosition(firstCompletelyVisible);
           ItemView view2 = (ItemView) gridLayoutManager.findViewByPosition(firstCompletelyVisible + 1);
            if(view1 != null){
                view1.setAlpha(1);
            }
            if(view2 != null){
                view2.setAlpha(1);
            }

• Alpha值的计算
  这里还有一个要考虑的问题，就是Alpha的取值问题，仔细看抖音中的效果，并不是item刚开始滑动就开始改变透明度，而是大概Item滑出屏幕1/5左右开始，这里就需要我们做一点点小小的计算，当然我的计算方法可能有点low，计算方法就是刚才的setViewAplha里面所做的，在这在粘贴一下

    float beginPercent = 0.2f;
    float endValue = 2;

    private void setViewAplha(View view){
        if (view == null || !(view instanceof ItemView))
            return;
        float p = UIUtils.px2dip(Math.abs((int) view.getY())) * 1.0f / UIUtils.px2dip(view.getHeight()) * 1.0f;
        float curPercent = Float.compare(p - beginPercent, 0.0f) < 0 ? 0.0f : p - beginPercent;
        curPercent = Float.compare(1, curPercent * endValue) < 0 ? 1 : curPercent * endValue;
        view.setAlpha(1 - curPercent);
    }

这个beginPercent变量表示我想要在Item滑出屏幕多少时，才开始改变Alpha值，这里我定义成了0.2也就是1/5，然后在第一次计算curPercent时

  float p = UIUtils.px2dip(Math.abs((int) view.getY())) * 1.0f / UIUtils.px2dip(view.getHeight()) * 1.0f;
  float curPercent = Float.compare(p - beginPercent, 0.0f) < 0 ? 0.0f : p - beginPercent;

可见如果当p<0.2时，我的curPercent会等于0，后续在做什么计算都不会改变文字区域的Alpha值
现在已经可以设置从item滑动到多少才开始出现渐变的效果了，那么下一步我们就应该定义当item滑动到什么位置时文字区域完全透明也就是Alpha值等于0，这时候endValue的作用就来了，我们可以通过给curPercent乘一个值来让它达到指定位置时可以变成1，然后1-curPercent=0

curPercent = Float.compare(1, curPercent * endValue) < 0 ? 1 : curPercent * endValue;

这里我的endValue=2，可以在item滑出屏幕70%时，文字区域完全透明，我的计算方法如下表格

所以如果我想让Item滑动到70%时完全透明，我只要设置endValue是2既可，因为此时curPercent是0.7-0.2=0.5 然后乘2刚好等于1，之前一直都会小于1，这样的话，我们可以随意设定滑动渐变从哪开始到哪结束，比如我现在希望item滑出屏幕30%开始 同样在item滑出屏幕70%完全透明那么根据下面这个表格

我们可以计算出 endValue=3( (0.7-0.3)* endValue =1.2 )即可保证在滑动到70%时 完全的透明

ok 到这我们就可以完美表现出这种渐变的效果了，这是我第一次写简书，写的还有点小激动呢。欢迎所有读过的人 批评指正～