ImageViewer
关于
图片浏览器，支持图片手势缩放、拖拽等操作，自定义View的模式显示，自定义图片加载方式，可自定义索引UI与加载进度UI，更加灵活，易于扩展，同时也适用于RecyclerView、ListView的横向和纵向列表模式，最低支持版本为Android 3.0及以上...
项目演示
简单示例
仿朋友圈效果
横向列表
竖向列表
功能
- 图片的基本缩放、滑动
- 微信朋友圈图片放大预览
- 微信朋友圈图片拖拽效果
- 今日头条图片拖拽效果
- 自定义图片加加载
- 图片加载进度条
- 可自定义图片索引与图片加载进度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
<dependency>
<groupId>indi.liyi.view</groupId>
<artifactId>image-viewer</artifactId>
<version>3.0.1</version>
<type>pom</type>
</dependency>
使用方法[5]
XML 中添加 ImageViewer
<indi.liyi.viewer.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()设置框架所需要的数据源
超巨图解决方案[6]
-
因为可以自定义图片加载方法，在加载图片前可以先压缩图片
-
项目内部目前使用的图片缩放控件为PhotoView，可以将PhotoView用以下控件代替：
- 使用 SubsamplingScaleImageView 代替 PhotoView（推荐）
- 或者使用 BigImageView 代替 PhotoView
github传送门
https://github.com/albert-lii/ImageViewer
网友评论