RecyclerView实现探探卡片滑动功能及优化

---

title: RecyclerView实现探探卡片滑动功能
date: 2018-10-07 10:35:56
tags: RecyclerView

---

代码实现

博客地址：https://blog.csdn.net/qq_39085422/article/details/78612132
我只掌握了RecyclerView基础用法，所以参考别人博客的代码实现。
我使用CardView代替RoundImageView实现圆角效果。

遇到的问题

1.CardView阴影显示不完全

Card_View_border.jpg

原因：将CardView作为最外层布局，可能是两个CardView重叠时，边界会融合到一起。
解决方法：在外层再套一层布局，比如LinearLayout之类的。
解决后效果图：

Card_View.jpg

在文末会贴出我的布局代码。

2.左右滑，滑出时卡顿(未解决)

原因：adapter.notifyDataSetChanged();
卡片滑出后需要删除对应的数据，对数据源进行remove()操作，之后通知adapter,这个时候会发生卡顿

3.向上下滑动时，动画衔接的不好

原因：临界值计算公式不合理，只计算了在X轴的偏移量
解决：CardItemTouchHelperCallback类中的onChildDraw()里，
解决前代码：

float ratio = dX / getThreshold(recyclerView, viewHolder);

解决后代码：

float distance = (float)Math.sqrt(dX*dX+dY*dY);
float ratio = distance / getThreshold(recyclerView, viewHolder);

变化：增加了distance变量，计算位移两点间的直线距离。

4.用Gilde加载网络图片时，会闪烁，使用本地图片时不会

图片闪烁.jpg

原因：Gilde进行加载网络图片时，会保留缓存，使用时加载完整图片，所以分辨率不同，会闪烁。
解决：
思路是类似于做一层缓存，先把图片加载好放在一个List里面，使用时直接从数组里取出来，这样子就模拟了本地图片加载。
具体实现如下：
在adaputer中声明两个数组

//图片的URL
private List imgUrlList = new ArrayList<>();
//缓存数组
private List glideDrawableList = new ArrayList<>();

//glideDrawableList的访问方法，imgUrlList通过构造函数传入，不需要get,set
    public List getGlideDrawableList() {
        return glideDrawableList;
    }

    public void setGlideDrawableList(List glideDrawableList) {
        this.glideDrawableList = glideDrawableList;
    }

之后创建一个updateGlideDrawableList()方法，用于请求网络图片，CardConfig.DEFAULT_SHOW_ITEM是显示的卡片数量，CardConfig.DEFAULT_CACHE_ITEM是而外的缓存数量，为了防止用户滑动太快，网络请求速度跟不上。

public void updateGlideDrawableList(){
    //每次最多循环的次数i<卡片显示数量+额外缓存数量
    for (int i = mCardShowInfoBeanList.size(); i < CardConfig.DEFAULT_SHOW_ITEM+CardConfig.DEFAULT_CACHE_ITEM; i++){
        //防止list为空
        if(imgUrlList.size() <= 0){
           return;
        }
        //依次去除所有的url
        String url = imgUrlList.remove(0);
        //使用Gilde请求网络图片
        Glide.with(mContext)
                    .load(url)
                    //Gilde将图片剪裁成336,326
                    .into(new SimpleTarget(336, 326) {
                        @Override
                        public void onResourceReady(GlideDrawable resource, GlideAnimation glideAnimation) {
                            //将图片资源放入缓存数组
                            glideDrawableList.add(resource);
                            //通知adapter数据已经更新，刷新显示。
                            AdapterCardSwipeLive.this.notifyDataSetChanged();
                        }
                    });
    }
}

之后只要在imgUrlList传入之后，onBindViewHolder()之前使用该方法就好了，这里我选择在构造函数里调用:

public Adapter(Context context, List imgUrlList){
        this.imgUrlList = imgUrlList;
        this.mContext = context;
        //我选择今早的调用此方法，减少用户的等待时间
        updateGlideDrawableList();
    }

到这里，核心代码就已经写完了，接下来只需要将之前使ItemTouchHelperCallback中操作imgUrlList的地方进行一些修改，替换成glideDrawableList就可以了:

//替换前
T remove = adaputer.getList().remove(layoutPosition);
adapter.notifyDataSetChanged();

//替换后
T remove = ((List) adapterCardSwipeLive.getmCardShowInfoBeanList()).remove(layoutPosition);
//调用这个方法以补充被remove掉的GlideDrawable
updateGlideDrawableList();
adapter.notifyDataSetChanged();

这样子就完成了，使用时，传进adaputer来的只有imgUrlList，然后adapter向外只提供一个glideDrawableList，外面也只能对glideDrawableList进行增删改查。同时每删除glideDrawableList中的一个元素，再通过updateGlideDrawableList()添加回来，就能实现尽可能少的缓存。这里只是提供一个思路，代码不一定能毫无错误的运行出来，需要自己进行适配。

拓展

如果你搜索卡片层叠效果，你会发现更多更详细的内容

总结：

折腾了好久也无法像探探那样流畅，只能朝四个方向滑出，而不能360°滑出，
流畅度效果也有不少差距。
应该是实现思路的不同，我是基于recyclerView实现的，比较简单，另一种基于ListView实现的比较复杂，但效果很好。可见自己水平还有待提高。

相关代码：

item_card_slide.xml