圖片查看器ImageViewer：輕鬆實現微信朋友圈、今日頭條、橫向列表、縱向列表等圖片瀏覽效果

ImageViewer

關於

圖片預覽器，支持圖片手勢縮放、拖拽等操作，自定義View的模式顯示，自定義圖片加載方式，更加靈活，易於擴展，同時也適用於RecyclerView、ListView的橫向和縱向列表模式，最低支持版本爲Android 3.0及以上…

功能

• 圖片的基本縮放、滑動
• 微信朋友圈圖片放大預覽
• 微信朋友圈圖片拖拽效果
• 今日頭條圖片拖拽效果
• 自定義圖片加加載
• 圖片加載進度條
• 可自定義圖片索引與圖片加載進度UI

傳送門

• 自定義屬性
• 事件監聽器
• 自定義UI
• 添加依賴
• 使用方法
• 超巨圖加載解決方案

推薦

• AutoGridView 宮格控件，QQ空間九宮格、普通宮格模式、點擊添加照片…

項目演示

添加依賴

   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>

使用方法

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()設置框架所需要的數據源

超巨圖解決方案

1. 因爲可以自定義圖片加載方法，在加載圖片前可以先壓縮圖片

2. 項目內部目前使用的圖片縮放控件爲PhotoView，可以將PhotoView用以下控件代替：

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

github傳送門

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