图片查看器ImageViewer：轻松实现微信朋友圈、今日头条、横向列表、纵向列表等图片浏览效果

ImageViewer

关于

图片浏览器，支持图片手势缩放、拖拽等操作，自定义View的模式显示，自定义图片加载方式，可自定义索引UI与加载进度UI，更加灵活，易于扩展，同时也适用于RecyclerView、ListView的横向和纵向列表模式，最低支持版本为Android 3.0及以上...

项目演示

简单示例

仿朋友圈效果

横向列表

竖向列表

功能

• 图片的基本缩放、滑动
• 微信朋友圈图片放大预览
• 微信朋友圈图片拖拽效果
• 今日头条图片拖拽效果
• 自定义图片加加载
• 图片加载进度条
• 可自定义图片索引与图片加载进度UI

传送门

• 自定义属性
• 事件监听器
• 自定义UI
• 添加依赖
• 使用方法
• 超巨图加载解决方案

推荐

• AutoGridView 宫格控件，QQ空间九宫格、普通宫格模式、点击添加照片...

自定义属性 ^[1]

属性名	描述
ivr_showIndex	是否显示图片位置
ivr_playEnterAnim	是否开启进场动画
ivr_playExitAnim	是否开启退场动画
ivr_duration	进场与退场动画的执行时间
ivr_draggable	是否允许图片拖拽
ivr_dragMode	拖拽模式（simple：今日头条效果	agile：微信朋友圈效果）

事件监听器 ^[2]

方法名	描述
setOnItemClickListener(OnItemClickListener listener)	item 的单击事件
setOnItemLongListener(OnItemLongPressListener listener)	item 的长按事件
setOnItemChangedListener(OnItemChangedListener listener)	item 的切换事件
setOnDragStatusListener(OnDragStatusListener listener)	监听图片拖拽状态事件
setOnBrowseStatusListener(OnBrowseStatusListener listener)	监听图片浏览器状态事件

自定义UI^[3]

• 自定义索引UI

框架中内置默认索引视图DefaultIndexUI，如要替换索引样式，可继承抽象类IndexUI,并在使用watch(...)方法前,调用下列方法加载自定义的indexUI

loadIndexUI(@NonNull IndexUI indexUI)

• 自定义加载进度UI

框架中内置默认加载视图DefaultProgressUI，如要替换加载样式，可继承抽象类ProgressUI,并在使用watch(...)方法前,调用下列方法加载自定义的progressUI

loadProgressUI(@NonNull ProgressUI progressUI)

添加依赖^[4]

• Gradle

   Step 1:

   allprojects {
       repositories {
           ...
           // 如果添加依赖时，报找不到项目时（则项目正在审核），可以添加此句maven地址，如果找到项目，可不必添加
           maven { url "https://dl.bintray.com/albertlii/android-maven/" }
       }
    }
    
    
   Step 2:
   
   dependencies {
      compile 'indi.liyi.view:image-viewer:3.0.1'
   }

• Maven

   
      indi.liyi.view
      image-viewer
      3.0.1
      pom
   

使用方法^[5]

XML 中添加 ImageViewer

代码中设置 ImageViewer

一共提供两种配置ImageViewer的方法：

• 方法一：

imageViewer.overlayStatusBar(false) // ImageViewer 是否会占据 StatusBar 的空间
           .imageData(list) // 图片数据
           .bindViewGroup(gridview) // 目标 viewGroup，例如类似朋友圈中的九宫格控件
           .imageLoader(new PhotoLoader()) // 设置图片加载方式
           .playEnterAnim(true) // 是否开启进场动画，默认为true
           .playExitAnim(true) // 是否开启退场动画，默认为true
           .duration(true) // 设置进退场动画时间，默认300
           .showIndex(true) // 是否显示图片索引，默认为true
           .loadIndexUI(indexUI) // 自定义索引样式，内置默认样式
           .loadProgressUI(progressUI) // 自定义图片加载进度样式，内置默认样式
           .watch(position); // 开启浏览

此方法是用imageData()配合bindViewGroup()方法，来在内部构建自动构建item的信息模型ViewData，适用于目标ViewGroup类似于朋友圈九宫格控件这类场景，目标ViewGroup如果是ListView这种可重复利用item的控件，则不可用。

• 方法二：

   imageViewer.overlayStatusBar(false) // ImageViewer 是否会占据 StatusBar 的空间
              .viewData(vdList) // 数据源
              .imageLoader(new PhotoLoader()) // 设置图片加载方式
              .playEnterAnim(true) // 是否开启进场动画，默认为true
              .playExitAnim(true) // 是否开启退场动画，默认为true
              .duration(true) // 设置进退场动画时间，默认300
              .showIndex(true) // 是否显示图片索引，默认为true
              .loadIndexUI(indexUI) // 自定义索引样式，内置默认样式
              .loadProgressUI(progressUI) // 自定义图片加载进度样式，内置默认样式
              .watch(position);

此方法直接使用viewData()设置框架所需要的数据源

超巨图解决方案^[6]

1. 因为可以自定义图片加载方法，在加载图片前可以先压缩图片

2. 项目内部目前使用的图片缩放控件为PhotoView，可以将PhotoView用以下控件代替：

   • 使用 SubsamplingScaleImageView 代替 PhotoView（推荐）
   • 或者使用 BigImageView 代替 PhotoView

github传送门

https://github.com/albert-lii/ImageViewer

---

1. 自定义属性 ↩

2. 事件监听器 ↩

3. 事件监听器 ↩

4. 添加依赖 ↩

5. 使用方法 ↩

6. 超巨图解决方案 ↩