一个仿微信朋友圈的图片查看框架 - PhotoViewer

PhotoViewer

该图片查看器是模仿微信朋友圈查看图片编写

allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}
	
复制代码
dependencies {
	        implementation 'com.github.wanglu1209:PhotoViewer:lastRelease'
	}
	
复制代码

使用

PhotoViewer
          .setData(图片链接List<String>)
          .setCurrentPage(现在是哪页)
          .setImgContainer(lv/rv/gv)
          .setShowImageViewInterface(object : PhotoViewer.ShowImageViewInterface {
              override fun show(iv: ImageView, url: String) {
               
                // 设置自己加载图片的框架来加载图片
                  Glide.with(iv.context).load(url).into(iv)
              }
          })
          .start(this)
复制代码

代码中,photoview文件夹为chrisbanes大神的PhotoView,做了一些修改来达到效果

有兴趣的可以查看github源码,顺便点个star Thanks♪(・ω・)ノ

github地址

更新日志

0.31

增加了弹出动画!

0.30

重构了view移动的代码,再次重新更改了退出动画,现在贼鸡儿流畅!!!

0.21

点按退出增加动画效果了,再次更新了退出的位置,效果更好

0.20

重构了代码,简化了调用链,更改了弹出方式(以前为activity,现在改为在当前Activity中增加一个layout),所以退出更顺滑,也不会出现两个activity之间退出的问题

0.18

修改了滑动时更改透明度的值,没有那么快变透明

0.17

修改了退出时缩放的代码,缩放大小更加精准

0.16

修复了只有一个图片时的问题

0.15

增加了指示器

0.14

简化了调用链 修复了退出动画

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你可以使用 `vue-photo-sphere-viewer` 库来集成 `photo-sphere-viewer` 到 Vue.js 4 中,然后在组件中使用这个库的 API 来实现图片切换。具体步骤如下: 1. 安装 `vue-photo-sphere-viewer` 库: ```bash npm install vue-photo-sphere-viewer --save ``` 2. 在组件中引入 `vue-photo-sphere-viewer` 库: ```javascript import PhotoSphereViewer from 'vue-photo-sphere-viewer'; import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'; ``` 3. 在模板中使用 `PhotoSphereViewer` 组件,并绑定图片路径和其他属性: ```html <template> <div> <photo-sphere-viewer :panoramaUrl="panoramaUrl" :defaultLongitud="defaultLongitud" :defaultLatitud="defaultLatitud" :defaultZoom="defaultZoom" :size="size" :minZoom="minZoom" :maxZoom="maxZoom" @ready="onReady" ></photo-sphere-viewer> </div> </template> ``` 其中,`panoramaUrl` 是图片路径,`defaultLongitud`、`defaultLatitud` 和 `defaultZoom` 是初始位置和缩放级别,`size` 是全景图像素大小,`minZoom` 和 `maxZoom` 是缩放级别的最小值和最大值。 4. 在组件的 `methods` 中定义 `onReady` 方法来获取 `PhotoSphereViewer` 实例,并调用 `setPanorama` 方法来切换图片: ```javascript methods: { onReady(viewer) { this.viewer = viewer; }, switchImage(imagePath) { this.viewer.setPanorama(imagePath); }, } ``` 然后你可以在组件的其他方法中调用 `switchImage` 方法来切换图片。 ```javascript this.switchImage('/path/to/another/image.jpg'); ``` 注意,这里的 `vue-photo-sphere-viewer` 库只是 `photo-sphere-viewer` 的 Vue.js 封装,你还需要在项目中引入 `photo-sphere-viewer` 库本身。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值