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

利用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* */@Overridepublic RecyclerView.LayoutParams generateDefaultLayoutParams() {return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);}/*onLayoutChildren()方法负责item的布局，必须实现* */@Overridepublic 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,0int 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，在滑动动画结束之后调用。

  @Overridepublic boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {return false;}// 在swipe 运动动画结束的时候调用@Overridepublic void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {Object object = mDatas.remove(viewHolder.getLayoutPosition());mDatas.add(0,object);
//        mAdapter.notifyDataSetChanged();mAdapter.notifyItemMoved(viewHolder.getLayoutPosition(), 0);}@Overridepublic 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){ // 控制的是最下层的Itemview.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

onChildDraw方法用来实现卡片向前移动的效果（最前面的图片消失后，后面的照片要依次往前移动）。通过计算distance和maxDistance的比例来决定向前移动的幅度。

利用RecyclerView实现仿陌陌滑动浏览图片相关推荐

Swift - 使用CollectionView实现图片Gallery画廊效果（左右滑动浏览图片）
1,效果图 (1)图片从左至右横向排列(只有一行),通过手指拖动可以前后浏览图片. (2)视图滚动时,每张图片根据其与屏幕中心距离的不同,显示尺寸也会相应地变化.越靠近屏幕中心尺寸就越大,远离屏幕中心 ...
iOS 滑动浏览图片捏合缩小放大音量线控
iPhone的成功很大一部分得益于它多点触摸的强大功能,乔布斯让人们认识到手机其实是可以不用按键和手写笔直接操作的,这不愧为一项伟大的设计.今天我们就针对iOS的触摸事件(手势操作).运动事件.远程控 ...
PhotoSwipe 滑动浏览图片插件使用方法
转载] [JS插件] PhotoSwipe 图片浏览插件使用方法一.介绍 PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone.iPad.黑莓6+,以及桌面浏览器.底层实现 ...
Android页面左右滑动浏览图片（Gallery示例）
自从滑动功能出来后人们都习惯手滑来滑去,现在我做了一个简单例子,实现页面之间的左右滑动.实现的方法有很多,我这里用的是Gallery加载适配器的方法. 有图有真像: 第一界面,内容差不多,只是前面的编 ...
android 自定义裁剪陌陌,Android之View篇6————仿陌陌卡片左右滑动选择布局
Android之View篇6----仿陌陌卡片左右滑动选择控件一.目录 Android之View篇6----仿陌陌卡片左右滑动选择控件一.目录二.效果图三.业务需求梳理四.思路分析 1. 新 ...
ViewDragHelper （三）- 打造仿陌陌视频播放页（深入篇）
本篇为该系列的第三篇,将通过一个实际的业务需求来讲述ViewDragHelper的实际运用. 目录 ViewDragHelper 的介绍以及初步使用请阅读这篇: ViewDragHelper (一)- ...
uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播
优直播uni-liveShow是基于vue+uni-app+vuex+nvue+swiper等技术开发仿制抖音|火山小视频/陌陌直播实战项目,支持编译到三端(H5.小程序.App端) 且兼容效果一致. ...
社交类app开发（仿陌陌客户端+服务器端）
一.开发所需要的技术手机端需要Android/iOS开发人员,服务器端需要php/数据库开发人员, 如果再做网页版的话,WEB开发也是要的. 即时通讯 GPS地图群聊差不多对 http so ...
android仿陌陌tab,Vue|Nuxt.js仿探探卡片式左右拖拽|vue仿Tinder
开场技术宅男对探探/陌陌并不陌生,一款专注于陌生人的社交App.里面的左右滑动翻牌子效果更是让人眼前一亮,似乎有一种古时君王选妃子的感觉.让人玩的爱不释手. 一睹风采哈哈,效果还行吧.下面就简单的讲 ...

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

利用RecyclerView实现仿陌陌滑动浏览图片相关推荐

最新文章

热门文章