图片浏览器
Posted Wei_Leng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片浏览器相关的知识，希望对你有一定的参考价值。
ImageViewer
简介： :crystal_ball:图片浏览器，支持图片手势缩放、拖拽等操作，自定义 View的模式显示，自定义图片加载方式，更加灵活，易于扩展，同时也适用于 RecyclerView、ListView 的横向和纵向列表模式，最低支持版本为 android 3.0 及以上...
标签：
ImageViewer
![apisvg] 正在上传…重新上传取消
关于
图片浏览器，支持图片手势缩放、拖拽等操作，自定义 View的模式显示，自定义图片加载方式，可自定义索引 UI、ProgressView，更加灵活，易于扩展，同时也适用于 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 ```Java 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
```Java
<dependency>
<groupId>indi.liyi.view</groupId>
<artifactId>image-viewer</artifactId>
<version>3.0.1</version>
<type>pom</type>
</dependency>
使用方法
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()设置框架所需要的数据源
Tip：关于点击系统返回键取消图片浏览
如果需要实现点击返回系统返回键关闭浏览,请在 Activity 中加入以下代码
/**
* 监听返回键
*
* @param keyCode
* @param event
* @return
*/
@Override
public boolean onKeyDown(int keyCode, KeyEvent event)
boolean b = imageViewer.onKeyDown(keyCode, event);
if (b)
return b;
return super.onKeyDown(keyCode, event);
超巨图解决方案
- 因为可以自定义图片加载方法，在加载图片前可以先压缩图片
-
项目内部目前使用的图片缩放控件为 PhotoView，可以将 PhotoView 用以下控件代替：
- 使用 SubsamplingScaleImageView 代替 PhotoView（推荐）
- 或者使用 BigImageView 代替 PhotoView
赞赏
如果你感觉 ImageViewer 帮助到了你，可以点右上角 "Star" 支持一下哦！:blush:
微信公众号
有兴趣的同学可以关注微信公众号「Code 满满」或者笔者的个人博客「李益的小站」
其他平台
LICENSE
Copyright 2017 liyi
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
以上是关于图片浏览器的主要内容，如果未能解决你的问题，请参考以下文章