利用RecyclerView实现仿陌陌滑动浏览图片

来源:互联网 发布:excel 下拉数据递增 编辑:程序博客网 时间:2024/06/08 04:55

利用RecyclerView实现仿陌陌滑动浏览图片,效果如下

图片效果真是太差了..主要是看这个效果..没有什么好的gif制作软件。

下面是正题。

我们利用自定义LayoutManager来实现这种类似卡片重叠的效果。以下是SwipeViewLayoutManager中的核心代码。关键地方都有注释。

onLayoutChildren()方法负责摆放item,通过计算item的排列顺序,按顺序缩小item大小,并按递归顺序依次往下移,实现层层叠叠的效果。


/** * Created by liujiayu on 2017/6/29. */public class SwipeViewLayoutManager extends LayoutManager {    /*    * 在linearlayoutManager中generateDefaultLayoutParams()方法默认返回WRAP_CONTENT    * 在这里我们也返回WRAP_CONTENT    * */    @Override    public RecyclerView.LayoutParams generateDefaultLayoutParams() {        return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,                ViewGroup.LayoutParams.WRAP_CONTENT);    }    /*    onLayoutChildren()方法负责item的布局,必须实现    * */    @Override    public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {//        super.onLayoutChildren(recycler, state);        //detachAndScrapAttachedViews方法是RecyclerVIew的缓存机制        detachAndScrapAttachedViews(recycler);        int itemCount = getItemCount();        int initPosition;        if (itemCount < ViewConfig.MAX_SHOW_COUNT) {//当照片数不够最多显示数时,全部初始化            initPosition = 0;        } else {            initPosition = itemCount - ViewConfig.MAX_SHOW_COUNT;        }        for (int positon = initPosition; positon < itemCount; positon++) {            View view = recycler.getViewForPosition(positon);            addView(view);            measureChild(view, 0, 0);//绘制View,坐标0,0            int widthSpace = getWidth() - getDecoratedMeasuredWidth(view);//getDecoratedMeasuredWidth方法会计算分割线的宽度            int heightSpace = getHeight() - getDecoratedMeasuredHeight(view);//            //左上右下            layoutDecorated(view, widthSpace / 2, heightSpace / 2, getDecoratedMeasuredWidth(view) + widthSpace / 2, getDecoratedMeasuredHeight(view) + heightSpace / 2);//让item居中显示            int lv = itemCount - positon - 1;//缩放等级            if (lv > 0) {  //越靠前View显示的越大                view.setScaleX(1 - ViewConfig.SCALE_GAP * lv);                view.setScaleY(1 - ViewConfig.SCALE_GAP * lv);                if (lv < ViewConfig.MAX_SHOW_COUNT - 1) {//判断是不是已经显示出来的最后一张,如果不是就将view向下偏移                    view.setTranslationY(ViewConfig.TRANS_Y_GAP * lv);                } else {                    view.setTranslationY(ViewConfig.TRANS_Y_GAP * (lv - 1));                }            }        }    }
然后利用ItemTouchHelper来实现拖拽效果,以前用RecyclerView实现滑动删除也需要重写该方法,以下是自定义SwipeCardCallback中的核心代码。
onSwiped方法负责删除item,在滑动动画结束之后调用。
onChildDraw方法用来实现卡片向前移动的效果(最前面的图片消失后,后面的照片要依次往前移动)。通过计算distance和maxDistance的比例来决定向前移动的幅度。 
  @Override    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {        return false;    }    // 在swipe 运动动画结束的时候调用    @Override    public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {        Object object = mDatas.remove(viewHolder.getLayoutPosition());        mDatas.add(0,object);//        mAdapter.notifyDataSetChanged();        mAdapter.notifyItemMoved(viewHolder.getLayoutPosition(), 0);    }    @Override    public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {//        double maxDistance = recyclerView.getWidth() ;        double maxDistance = recyclerView.getWidth() * 0.5f;        double distance = Math.sqrt(dX* dX + dY * dY);        double fraction = distance / maxDistance;        if (fraction > 1) {            fraction = 1;        }        int itemCount = recyclerView.getChildCount();        for (int i = 0; i < itemCount; i ++) {            View view = recyclerView.getChildAt(i);            int level = itemCount - i - 1;            if (level >= 0) {                if (level < CardConfig.MAX_SHOW_COUNT -1) {                    view.setTranslationY((float) (CardConfig.TRANS_Y_GAP *level - fraction * CardConfig.TRANS_Y_GAP));                    view.setScaleX((float) (1 - CardConfig.SCALE_GAP * level + fraction *CardConfig.SCALE_GAP));                    view.setScaleY((float) (1 - CardConfig.SCALE_GAP * level + fraction *CardConfig.SCALE_GAP));//                    view.setAlpha((float) (1 - 0.1 * level + fraction *CardConfig.SCALE_GAP));                } else if (level == CardConfig.MAX_SHOW_COUNT -1){ // 控制的是最下层的Item                    view.setTranslationY((float) (CardConfig.TRANS_Y_GAP *(level -1)));                    view.setScaleX((float) (1 - CardConfig.SCALE_GAP * (level- 1)));                    view.setScaleY((float) (1 - CardConfig.SCALE_GAP * (level -1)));                }            }        }        super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);    }

以上就是利用RecyclerView实现滑动浏览图片的全部核心代码。代码比较简单,不太会用csdn,写的很随意,哈哈哈,另附下载地址:http://download.csdn.net/detail/liujiayut800/9884160

 
阅读全文
1 0
原创粉丝点击