ImageViewer
關(guān)于
圖片瀏覽器，支持圖片手勢縮放、拖拽等操作，自定義View的模式顯示，自定義圖片加載方式，可自定義索引UI與加載進(jìn)度UI，更加靈活，易于擴(kuò)展，同時也適用于RecyclerView、ListView的橫向和縱向列表模式，最低支持版本為Android 3.0及以上...
項(xiàng)目演示
簡單示例
仿朋友圈效果
橫向列表
豎向列表
功能
- 圖片的基本縮放、滑動
- 微信朋友圈圖片放大預(yù)覽
- 微信朋友圈圖片拖拽效果
- 今日頭條圖片拖拽效果
- 自定義圖片加加載
- 圖片加載進(jìn)度條
- 可自定義圖片索引與圖片加載進(jìn)度UI
傳送門
推薦
- AutoGridView 宮格控件，QQ空間九宮格、普通宮格模式、點(diǎn)擊添加照片...
自定義屬性 [1]
| 屬性名 | 描述 | |
|---|---|---|
| ivr_showIndex | 是否顯示圖片位置 | |
| ivr_playEnterAnim | 是否開啟進(jìn)場動畫 | |
| ivr_playExitAnim | 是否開啟退場動畫 | |
| ivr_duration | 進(jìn)場與退場動畫的執(zhí)行時間 | |
| ivr_draggable | 是否允許圖片拖拽 | |
| ivr_dragMode | 拖拽模式（simple：今日頭條效果 | agile：微信朋友圈效果） |
事件監(jiān)聽器 [2]
| 方法名 | 描述 |
|---|---|
| setOnItemClickListener(OnItemClickListener listener) | item 的單擊事件 |
| setOnItemLongListener(OnItemLongPressListener listener) | item 的長按事件 |
| setOnItemChangedListener(OnItemChangedListener listener) | item 的切換事件 |
| setOnDragStatusListener(OnDragStatusListener listener) | 監(jiān)聽圖片拖拽狀態(tài)事件 |
| setOnBrowseStatusListener(OnBrowseStatusListener listener) | 監(jiān)聽圖片瀏覽器狀態(tài)事件 |
自定義UI[3]
- 自定義索引UI
框架中內(nèi)置默認(rèn)索引視圖DefaultIndexUI，如要替換索引樣式，可繼承抽象類IndexUI,并在使用watch(...)方法前,調(diào)用下列方法加載自定義的indexUI
loadIndexUI(@NonNull IndexUI indexUI)
- 自定義加載進(jìn)度UI
框架中內(nèi)置默認(rèn)加載視圖DefaultProgressUI，如要替換加載樣式，可繼承抽象類ProgressUI,并在使用watch(...)方法前,調(diào)用下列方法加載自定義的progressUI
loadProgressUI(@NonNull ProgressUI progressUI)
添加依賴[4]
- Gradle
Step 1:
allprojects {
repositories {
...
// 如果添加依賴時，報(bào)找不到項(xiàng)目時（則項(xiàng)目正在審核），可以添加此句maven地址，如果找到項(xiàng)目，可不必添加
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" />
代碼中設(shè)置 ImageViewer
一共提供兩種配置ImageViewer的方法：
- 方法一：
imageViewer.overlayStatusBar(false) // ImageViewer 是否會占據(jù) StatusBar 的空間
.imageData(list) // 圖片數(shù)據(jù)
.bindViewGroup(gridview) // 目標(biāo) viewGroup，例如類似朋友圈中的九宮格控件
.imageLoader(new PhotoLoader()) // 設(shè)置圖片加載方式
.playEnterAnim(true) // 是否開啟進(jìn)場動畫，默認(rèn)為true
.playExitAnim(true) // 是否開啟退場動畫，默認(rèn)為true
.duration(true) // 設(shè)置進(jìn)退場動畫時間，默認(rèn)300
.showIndex(true) // 是否顯示圖片索引，默認(rèn)為true
.loadIndexUI(indexUI) // 自定義索引樣式，內(nèi)置默認(rèn)樣式
.loadProgressUI(progressUI) // 自定義圖片加載進(jìn)度樣式，內(nèi)置默認(rèn)樣式
.watch(position); // 開啟瀏覽
此方法是用imageData()配合bindViewGroup()方法，來在內(nèi)部構(gòu)建自動構(gòu)建item的信息模型ViewData，適用于目標(biāo)ViewGroup類似于朋友圈九宮格控件這類場景，目標(biāo)ViewGroup如果是ListView這種可重復(fù)利用item的控件，則不可用。
- 方法二：
imageViewer.overlayStatusBar(false) // ImageViewer 是否會占據(jù) StatusBar 的空間
.viewData(vdList) // 數(shù)據(jù)源
.imageLoader(new PhotoLoader()) // 設(shè)置圖片加載方式
.playEnterAnim(true) // 是否開啟進(jìn)場動畫，默認(rèn)為true
.playExitAnim(true) // 是否開啟退場動畫，默認(rèn)為true
.duration(true) // 設(shè)置進(jìn)退場動畫時間，默認(rèn)300
.showIndex(true) // 是否顯示圖片索引，默認(rèn)為true
.loadIndexUI(indexUI) // 自定義索引樣式，內(nèi)置默認(rèn)樣式
.loadProgressUI(progressUI) // 自定義圖片加載進(jìn)度樣式，內(nèi)置默認(rèn)樣式
.watch(position);
此方法直接使用viewData()設(shè)置框架所需要的數(shù)據(jù)源
超巨圖解決方案[6]
因?yàn)榭梢宰远x圖片加載方法，在加載圖片前可以先壓縮圖片
-
項(xiàng)目內(nèi)部目前使用的圖片縮放控件為PhotoView，可以將PhotoView用以下控件代替：
- 使用 SubsamplingScaleImageView 代替 PhotoView（推薦）
- 或者使用 BigImageView 代替 PhotoView
github傳送門
https://github.com/albert-lii/ImageViewer
