ImageViewer

关于

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

项目演示

简单示例

仿朋友圈效果

横向列表

竖向列表

功能

图片的基本缩放、滑动

微信朋友圈图片放大预览

微信朋友圈图片拖拽效果

今日头条图片拖拽效果

自定义图片加加载

图片加载进度条

可自定义图片索引与图片加载进度UI

传送门

推荐

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

自定义属性

属性名

描述

ivr_showIndex

是否显示图片位置

ivr_playEnterAnim

是否开启进场动画

ivr_playExitAnim

是否开启退场动画

ivr_duration

进场与退场动画的执行时间

ivr_draggable

是否允许图片拖拽

ivr_dragMode

拖拽模式(simple：今日头条效果

agile：微信朋友圈效果)

事件监听器

方法名

描述

setOnItemClickListener(OnItemClickListener listener)

item 的单击事件

setOnItemLongListener(OnItemLongPressListener listener)

item 的长按事件

setOnItemChangedListener(OnItemChangedListener listener)

item 的切换事件

setOnDragStatusListener(OnDragStatusListener listener)

监听图片拖拽状态事件

setOnBrowseStatusListener(OnBrowseStatusListener listener)

监听图片浏览器状态事件

自定义UI

自定义索引UI

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

loadIndexUI(@NonNull IndexUI indexUI)

自定义加载进度UI

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

loadProgressUI(@NonNull ProgressUI progressUI)

添加依赖

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

使用方法

XML 中添加 ImageViewer

android:id="@+id/imageViewer"

android:layout_width="match_parent"

android:layout_height="match_parent" />

代码中设置 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()设置框架所需要的数据源

超巨图解决方案

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

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

github传送门

自定义属性 ↩

事件监听器 ↩

事件监听器 ↩

添加依赖 ↩

使用方法 ↩

超巨图解决方案 ↩