图片查看器ImageViewer:轻松实现微信朋友圈、今日头条、横向列表、纵向列表等图片浏览效果

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/liyi1009365545/article/details/78135394

ImageViewer

关于

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

功能

  • 图片的基本缩放、滑动
  • 微信朋友圈图片放大预览
  • 微信朋友圈图片拖拽效果
  • 今日头条图片拖拽效果
  • 自定义图片加加载
  • 图片加载进度条
  • 可自定义图片索引与图片加载进度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用以下控件代替:

github传送门

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

展开阅读全文

没有更多推荐了,返回首页