美文网首页AndroidViewAndroid 技术开发
使用RecyclerView滑动时设置标题栏渐变或隐藏效果

使用RecyclerView滑动时设置标题栏渐变或隐藏效果

作者: 八怪不姓丑 | 来源:发表于2017-01-19 14:36 被阅读2476次

    上次自己做了个简单的RecyclerView+SwipeRefrashLayou滑动demo,做完后又给加了个隐藏的效果。
    需要学习RecyclerView的请查看我上篇博客http://www.jianshu.com/p/68777233c6db
    demo源码在:https://github.com/wapchief/android-CollectionDemo

    看一下效果图。

    wapchief.gif

    这样设计有利于发挥手机屏幕的利用空间,如果首页内容较多的时候,不影响体验。
    所有的操作都是在RecyclerView监听方法的onScrolled方法里实现。
    直接看该方法的官方介绍:

            /**
             * Callback method to be invoked when the RecyclerView has been scrolled. This will be
             * called after the scroll has completed.
             * <p>
             * This callback will also be called if visible item range changes after a layout
             * calculation. In that case, dx and dy will be 0.
             *
             * @param recyclerView The RecyclerView which scrolled.
             * @param dx The amount of horizontal scroll.
             * @param dy The amount of vertical scroll.
             */
            public void onScrolled(RecyclerView recyclerView, int dx, int dy){}
        }
    

    意思是说放Recyclerview发生滚动的时候,该方法一直被调用。所有因滚动所产生的状态改变都在这里实现。
    所以因滚动产生的视图状态改变也在这个方法内。
    上篇文章,在该方法内实现滚动到底部自动加载的方法,思路是一个页面内item的个数,当加载完后,就执行再加载一条数据。


    现在我们要获取滑动的距离
    怎么做?
    onScrolled提供了一个dx,dy的方法。
    但是该方法只能判定一次性滑动的距离,dx是横向,dy是纵向。
    而且默认停滞状态距离是0,如果要向上返回滑动,那么就会变成负数。也就是每一次滑动,只要停滞,距离都会重新计算。
    所以我们只能重新定义一个方法,用来计算整体滑动的距离

       public int getScollYDistance() {
            int position = layoutManager.findFirstVisibleItemPosition();
            View firstVisiableChildView = layoutManager.findViewByPosition(position);
            int itemHeight = firstVisiableChildView.getHeight();
            return (position) * itemHeight - firstVisiableChildView.getTop();
        }
    

    LinearLayoutManager提供了获取第一条item可见位置的方法。
    然后通过findviewby实例化。
    然后再用getHeight获取item的高度。
    最后计算得出实际的child。

    获取了child之后,我们就可以在onScolled方法根据距离进行操作

    if (getScollYDistance() <= 0) {
                //静止并处于最顶端状态
                tvTitle.setBackgroundColor(black_transparent);
                tvTitle.setTextColor(white);
                tvTitle.setVisibility(View.VISIBLE);
            } else if (getScollYDistance() > 0 && getScollYDistance() <= 400) {//滑动在0-400距离的时候
                if (getScollYDistance() <= 200) {//处于滑动到中间的时候
                    tvTitle.setTextColor(blue);
                } else {//滑出到200以外
    //                tvTitle.setBackgroundColor(Color.argb((int) 255, 254, 184, 6));
                    tvTitle.setTextColor(white);
                }
                float scale = (float) getScollYDistance() / 400;
                float alpha = (255 * scale);
                // 只是layout背景透明(仿知乎滑动效果)
                tvTitle.setBackgroundColor(Color.argb((int) alpha, 254, 184, 6));
            } else {
                tvTitle.setVisibility(View.GONE);
            }
    

    这里的数值是以像素px为单位。在这里可以根据距离在指定的位置设置想要的效果。
    其中

                float scale = (float) getScollYDistance() / 400;
                float alpha = (255 * scale);
                // 只是layout背景透明(仿知乎滑动效果)
                tvTitle.setBackgroundColor(Color.argb((int) alpha, 254, 184, 6));
    

    就是设置从全部到透明的方法。或者是反过来。


    具体需要什么效果自己diy吧。项目我发到了github,欢迎star
    https://github.com/wapchief/android-CollectionDemo
    新手上路欢迎指导!

    相关文章

      网友评论

      • 风无羽:太闪了,过渡不自然
      • 期待_bee:这样有问题,快速滑动和缓慢滑动的效果不一样,快速向上滑动,标题渐变颜色不能完全变成最终的颜色,会出现半透明的情况,不知道作者遇到没
        b27343c41842:@callhh 也遇到这个问题了,各位有解决么?
        callhh:确实存在这个问题。recycleView的滑动监听bug?感觉都没有NestedScrollView的滑动监听好用。。。最后你们解决这个bug了么?
        八怪不姓丑:@期待_bee 没有哦,你也可以看看这个效果https://github.com/wapchief/imitationLOL
      • QAQDF2连:(position) * itemHeight ,这个计算是的是所有item类型一样的高度吧。如果item高度不一样,不能这样计算吧

      本文标题:使用RecyclerView滑动时设置标题栏渐变或隐藏效果

      本文链接:https://www.haomeiwen.com/subject/llxibttx.html