ImageView 扩展

ImageView 扩展

ImageView 是一个免费的图片查看器扩展，提供了强大的图片显示和缩放功能。该扩展支持捏合缩放、双击缩放、动画缩放等多种手势操作，并提供了多种图片缩放类型供选择。

包名：com.dreamers.ImageViewer

版本：1

发布日期：2022年10月7日

作者：Power人类

文件大小：43.8 KB

下载链接

扩展文件：

com.dreamers.ImageViewer.aix

示例文件：

ImageView.aia

效果图：

功能概述

扩展特性

捏合缩放：支持双指捏合手势进行图片缩放
双击缩放：双击图片可进行缩放操作
动画缩放：缩放操作带有平滑的动画效果
多种缩放类型：提供多种图片缩放和显示模式
异步加载：图片异步加载，不影响应用性能
简单易用：通过简单的积木块即可控制图片显示

截图

扩展界面

截图1

截图2

截图3

截图4

缩放类型设置

缩放类型

可用缩放类型

积木示例

使用示例

设置积木

使用积木

函数

SetView 设置视图(组件)

设置图片显示的视图组件。

组件：组件类型，要显示图片的视图组件

SetImage 设置图片(图片路径)

设置要显示的图片路径。

图片路径：文本类型，图片文件的路径或URL

SetScaleType 设置缩放类型(缩放类型)

设置图片的缩放类型。

缩放类型：数字类型，可选的缩放类型值

ZoomTo 缩放到(缩放比例,动画时长)

将图片缩放到指定比例，支持动画效果。

缩放比例：数字类型，目标缩放比例
动画时长：数字类型，动画持续时间（毫秒）

ResetZoom 重置缩放()

将图片缩放重置为初始状态。

FitToScreen 适应屏幕()

将图片缩放到适应屏幕大小。

CenterImage 居中图片()

将图片居中显示。

属性

ScaleType 缩放类型

获取或设置图片的缩放类型。

类型：数字类型
默认值：0

ZoomLevel 缩放级别

获取当前的缩放级别。

类型：数字类型
只读：是

IsZoomable 可缩放

获取或设置是否允许缩放操作。

类型：布尔类型
默认值：true

缩放类型说明

扩展支持以下缩放类型：

MATRIX (0)：使用矩阵进行缩放
FIT_XY (1)：拉伸图片以填充视图
FIT_START (2)：从顶部开始适应
FIT_CENTER (3)：居中适应
FIT_END (4)：从底部开始适应
CENTER (5)：居中显示
CENTER_CROP (6)：居中裁剪
CENTER_INSIDE (7)：居中内部适应

应用场景

1. 图片浏览器

创建支持缩放的图片浏览器：

当 Screen1.初始化
    调用 ImageView1.SetView 组件为 Image1
    调用 ImageView1.SetImage 图片路径为 "file:///sdcard/photo.jpg"
    调用 ImageView1.SetScaleType 缩放类型为 3  // FIT_CENTER

2. 产品展示

电商应用中的产品图片展示：

当 图片列表.项目点击 索引
    调用 ImageView1.SetImage 图片路径为 产品图片列表[索引]
    调用 ImageView1.FitToScreen 适应屏幕

3. 地图查看

查看大尺寸地图图片：

当 Button1.点击
    调用 ImageView1.SetImage 图片路径为 "map.jpg"
    调用 ImageView1.SetScaleType 缩放类型为 6  // CENTER_CROP

4. 图片编辑器

图片编辑应用中的查看功能：

当 缩放滑块.位置改变
    调用 ImageView1.ZoomTo 缩放到缩放滑块.位置 动画时长为300

5. 相册应用

相册应用的图片查看：

当 相册网格.项目点击 索引
    调用 ImageView1.SetImage 图片路径为 相册路径列表[索引]
    如果 双击缩放开启 则
        显示通知 "支持双击缩放"

使用说明

基本设置步骤

添加扩展：将 ImageView 扩展添加到项目中
设置视图：使用 SetView 方法设置要显示图片的组件
设置图片：使用 SetImage 方法设置图片路径
配置缩放：使用 SetScaleType 设置缩放类型
测试功能：在设备上测试缩放和手势功能

重要提示

异步加载：扩展使用异步加载图片，但当前版本不支持缓存
路径设置：可以使用本地文件路径或网络URL
组件兼容性：建议使用 Image 或 Arrangement 组件作为视图
性能考虑：大尺寸图片可能影响加载性能

性能优化建议

图片优化：使用合适尺寸和格式的图片
路径管理：合理管理图片路径，避免频繁切换
内存管理：及时释放不需要的图片资源
用户体验：提供加载提示和错误处理

技术说明

手势识别

捏合手势：检测双指距离变化进行缩放
双击手势：检测快速双击进行缩放切换
动画效果：使用属性动画实现平滑的缩放过渡

图片加载

异步处理：图片加载在后台线程进行
错误处理：支持加载失败的处理
内存管理：合理管理图片内存使用

常见问题

Q: 如何设置初始缩放比例？

A: 可以在图片加载完成后调用 ZoomTo 方法设置初始缩放。

Q: 支持哪些图片格式？

A: 支持常见的图片格式，如 JPG、PNG、GIF 等。

Q: 如何处理图片加载失败？

A: 可以在相应的错误处理事件中显示提示信息或使用默认图片。

Q: 缩放操作会影响性能吗？

A: 扩展经过优化，合理的缩放操作不会明显影响性能。

Q: 可以同时使用多个 ImageView 实例吗？

A: 可以，每个实例独立工作，可以显示不同的图片。

版本信息

当前版本：1
发布日期：2022年10月7日
兼容性：Kodular、App Inventor 2
权限要求：读取外部存储（如需访问本地图片）

技术备注

注意：扩展使用异步加载图片，但当前版本不支持缓存功能。缓存问题需要等待 DevYB 对其扩展进行适当修改后才能解决。

版权信息

本文档基于 Kodular Community 论坛帖子整理，原作者为 Power人类。

原始链接：https://community.kodular.io/t/image-viewer-pinch-to-zoom-double-tap-to-zoom-animated-zoom/126671

文档翻译和整理：AI2中文网

最后更新：2024年12月9日

ImageView 扩展：图片查看器扩展，支持缩放、双击缩放和动画缩放