利用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
- 利用RecyclerView实现仿陌陌滑动浏览图片
- 左右滑动浏览图片
- iOS中UIScrollView嵌套UIImageView实现图片滑动浏览、缩放
- Android点击WebView中的图片实现缩放及滑动浏览
- 利用自定义的 RecyclerView 实现相册的滑动功能
- RecyclerView如何实现滑动过程中暂停图片加载
- 实现图片水平滑动1(利用HorizontalScrollView)
- 利用视觉差实现图片滑动
- Android利用ViewPager实现图片浏览,解决内存问题
- 利用RecyclerView和自定义Image Loader实现本地图片加载
- 【Android】一个浏览图片的Android库的实现,可以移动、缩放图片以及滑动切换
- Android使用RecyclerView和Picasso实现大规模浏览网络图片(附带缓存技术)
- UIScrollView实现图片浏览
- 手风琴图片浏览实现
- Android RecyclerView 实现快速滑动
- recyclerview 实现卡片滑动效果
- RecyclerView实现拖动和滑动
- Android手机图片居中滑动浏览HorizontalScrollView
- 牛客网-剑指offer
- ElasticSearch5.4.3 环境搭建 2017 (2-集群搭建)
- 谈谈程序员面试之刷题
- struts2中jsp页面传值到action方式总结
- docx文档表格抽取(word)
- 利用RecyclerView实现仿陌陌滑动浏览图片
- RK3399 添加默认分辨率
- toLua入门学习笔记(一):update函数在toLua内的实现
- HDU6029 Graph Theory
- equals和==的区别
- 6.labview利用FOR循环求和sum
- Ubuntu下J2EE环境搭建
- 使用Python进行分布式系统协调 (ZooKeeper,Consul, etcd )
- 岭回归与lasso详解