图片浏览器

news/2024/10/17 18:18:51/

ImageViewer

项目地址:albert-lii/ImageViewer 

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

更多:作者   提 Bug   官网   

标签:

ImageViewer

 ![apisvg] 正在上传…重新上传取消

关于

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

功能

  • 图片的基本缩放、滑动
  • 微信朋友圈图片放大预览
  • 微信朋友圈图片拖拽效果
  • 今日头条图片拖拽效果
  • 自定义图片加加载
  • 图片加载进度条
  • 可自定义图片索引与图片加载进度 UI

传送门

  • 自定义属性
  • 事件监听器
  • 自定义 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.ImageViewerandroid: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*/@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {boolean b = imageViewer.onKeyDown(keyCode, event);if (b) {return b;}return super.onKeyDown(keyCode, event);}

超巨图解决方案

  1. 因为可以自定义图片加载方法,在加载图片前可以先压缩图片
  2. 项目内部目前使用的图片缩放控件为 PhotoView,可以将 PhotoView 用以下控件代替:

    • 使用 SubsamplingScaleImageView 代替 PhotoView(推荐)
    • 或者使用 BigImageView 代替 PhotoView

赞赏

如果你感觉 ImageViewer 帮助到了你,可以点右上角 "Star" 支持一下哦!:blush:

微信公众号

有兴趣的同学可以关注微信公众号「Code 满满」或者笔者的个人博客「李益的小站」

其他平台

  • 简书:李益 99
  • CSDN:李益 99

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.

 


http://www.ppmy.cn/news/150197.html

相关文章

一个简单的图片浏览

1、图源API 在问度娘之后发现了几个可用的API&#xff0c;主要来自下面几个博主的分享 在线随机美图API接口服务 可以获取随机图片的API收集 随机图片API接口 最终自己测试使用的是下面三个网址&#xff1a; https://uploadbeta.com/api/pictures/random //必应推荐 https://im…

ImageView组件的应用:图片浏览器

随时随地阅读更多技术实战干货&#xff0c;获取项目源码、学习资料&#xff0c;请关注源代码社区公众号(ydmsq666) 本实例用来练习ImageView组件的使用&#xff0c;实现一个图片浏览器&#xff0c;该图片浏览器可以改变所查看的图片的透明度&#xff0c;切换图片&#xff0c;而…

鲁大师2022年Q1季报公布,九号获得最智能电动车品牌

近日&#xff0c;鲁大师2022年Q1季报发布了智能电动车品牌排行榜&#xff0c;其中&#xff0c;备受瞩目的九号电动车品牌以627分的绝对优势夺得鲁大师2022年Q1季度最智能电动车品牌。 据专业人士了解&#xff0c;鲁大师智慧实验室的目标是建立以硬件产品数据采集为主要内容的数…

高德API JS 高德地图获取多个坐标点的中心点

高德API JS 高德地图获取多个坐标点的中心点 一、需求 我需要在地图上展示多个地点&#xff0c;并且展示的同时&#xff0c;地图缩放到合适的大小&#xff0c;要求刚好能显示全部点位&#xff0c;并且边缘留有一部分间隔。 做成如图所示这样。 二、需要用到的 AMap 类库 经…

鲁大师电动车智能化测评报告第九期

鲁大师第九期智能化电动车测评排行榜数据来源于鲁大师智慧实验室&#xff0c;测评的车型均为市面上主流品牌的主流车型&#xff0c;截止目前&#xff0c;鲁大师智能化电动车测评的车型高达40余种&#xff0c;且还在不断增加和丰富中。 一 测评依据 鲁大师电动车智能化测评体系包…

LNMP搭建过程详解,验证搭建论坛

LNMP搭建过程详解&#xff0c;验证搭建论坛 一、安装Nginx服务1、安装依赖包2、创建运行用户3、编译安装4、优化路径5、添加Nginx 系统服务 二、安装MySQL服务1、安装Mysql环境依赖包2、创建运行用户3、编译安装4、修改mysql配置文件5、更改mysql安装目录和配置文件的属主属组6…

服务运营 |摘要: Healthcare Management Science 近期论文汇总

推文作者&#xff1a;李舒湉 罗毓灵 编者按 Healthcare Management Science 近期论文汇总 Healthcare Management Science 论文精选&#xff08;三月下&#xff09; 1Monitoring policy in the context of preventive treatment of cardiovascular disease https://link.sprin…

液晶面板价格暴跌,电视便宜到笑,千元手机价格可买大屏电视

很久没关注电视了&#xff0c;最近一看电视的报价&#xff0c;发现电视价格已经低得让人发指&#xff0c;70英寸的液晶电视价格已低至1799元&#xff0c;比一部性能稍好一些的手机还要便宜&#xff0c;可见电视多么便宜。 售价1799元的70英寸液晶电视是大品牌的智能电视&#x…