RecyclerView + 九宫格图片 + ViewPager + PhotoView 实现列表图片点击放大并能缩放思路

2019年5月26日 135次阅读 来源: _龙衣

首发地址：dongxi520.com

需求：在内容列表中点击图片列表显示大图并且可以双击放大缩小下文主要介绍思路，不一定是最好的，时间来不及能先实现效果就OK

列表

可选的有 ListView 和 RecyclerView，这里主要就是列表数据的填充和展示

  • 使用 ListView 在 getView() 中获取数据并设置数据，然后通过 ListView 的 setOnClickListener 去完成点击事件
  • 使用 RecyclerView 在 ViewHolder 中获取控件，在 onBindView 中去设置数据，在 recyclerView 的 adapter 中添加点击事件的接口完成点击事件

图片列表

可选的有 GitHub 开源库，自己撸

  • 自己撸，思路：一张图片+九张图片（三张一排）的布局；通过判断返回的图片list去填充，如果返回1，则显示一张图片，九张图片的就隐藏；返回0则全部不显示。返回大于1，则通过双层for循环去给九张图中的每一个imageview去设置图片（里面是一个算法）。
  • 开源库 Github 搜索九宫格就有，按照start 最多排序去选择

大图

可选的有 GitHub 开源库，自己撸

  • 开源库：Github 搜索点击查看大图
  • 自己撸：启动新的activity去展示，用Dialog去全屏显示。用activity展示，可以将图片的list以及点击的position传递给activity，list主要是想在activity用Viewpager去滑动展示图片，position是为了viewpager展示的时候是当前点击的图片位置。

双击放大缩小

可选的有 GitHub 开源库，自己撸

  • 自己撸：….脑子不够用了，还是用开源库吧
  • PhotoView：项目有点久，因为现在项目中有这个库，所以先用这个库来实现，具体用法去Github搜索。
  • //将图片装载到数组中
     mImageViews = new PhotoView[mImagesList.size()]; 
     
     // 将传递过来的list列表给PhotoView去展示
     for(int i=0; i< mImagesList.size(); i++){
         PhotoView view = new PhotoView(XXXActivity.this);
         view.isEnabled() ;   // 支持缩放
         view.setScaleType(ImageView.ScaleType.FIT_CENTER);   // 图片裁剪的类别
         mImageViews[i] = view;
         Glide.with(this).load(mImagesList.get(i)).into(view);
     }
    原文作者：_龙衣
    原文地址: https://www.jianshu.com/p/9a8118a1f094
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞