Android 基于 Fresco 实现类 PhotoView 效果

 

目录

1.需求分析

2. 实现效果及使用步骤

3 进一步拓展

4.最后

---

1.需求分析

需求：

基于 Fresco 实现类似 PhotoView 触控缩放图片效果

问题：

触控缩放图片功能常用 PhotoView 实现，PhotoView 是通过继承重写 ImageView 实现此功能。所以当项目使用的图片加载库为 Fresco 时，就会因 Fresco 的强入侵性（同样是通过自定义 ImageView 实现其库功能）产生冲突。

解决思路：

1.继承重写 PhotoView 配合 Fresco（ ImagePipeline ）加载图片

2.继承重写 SimpleDraweeView 结合 PhotoView 实现

最后定板：

因为上述两种方法都需要在引入 Fresco 库的基础上再引入 PhotoView 库，增加了代码量和工作量，而研究时发现 Fresco 官方 Demo 有示例图片缩放功能，所以最后决定采用官方 Demo 提供的 zoomable library 实现。

 

2. 实现效果及使用步骤

实现效果

 

2.1 导入 Fresco 库，并初始化

导入

dependencies {
    ......

    //Fresco 图片加载库
    api 'com.facebook.fresco:fresco:2.0.0'
}

 初始化

        Fresco.initialize(this.applicationContext)

2.2 复制 zoomable 与 gestures 库中的类到项目中

需要复制的类

2.3  XML 中引用

2.4 填充图片

        val imageUrl = "https://www.helloimg.com/images/2020/05/18/splash_bgb5d0ea1e3c8a4cc8.jpg"
        val controller: DraweeController = Fresco.newDraweeControllerBuilder()
            .setUri(imageUrl)
            .build()
        iv_picture.setControllers(controller, null)
        //启用双击放大/缩小
        iv_picture.setTapListener(object : DoubleTapGestureListener(iv_picture) {})

 Fresco 的 ZoomableDraweeView 基本使用到此结束。

 

3 进一步拓展

• 调整缩放倍数与 PhotoView 一致

• View 重新可见时屏蔽重置缩放倍数

• 实现单击事件的监听

• 使用便捷性优化

3.1 调整缩放倍数与 PhotoView 一致

使用发现 ZoomableDraweeView 的放大倍数与 PhotoView 不一致，一开始以为 ZoomableDraweeView 是固定了缩放倍数，而 PhotoView 是根据图片实际宽高与屏幕大小来设置缩放倍数，才引起的不一致。研究源码发现两者皆是固定了缩放倍数，只不过 ZoomableDraweeView 固定的倍数为 2.0f 而PhotoView 固定的倍数为 3.0f。

所以通过调整 DefaultZoomableController 类中 mMaxScaleFactor 变量为 3.0f 即可。（点击跳转查看代码示例）

3.2  View 重新可见时屏蔽重置缩放倍数

 使用发现当 ZoomableDraweeView 重新可见时，会调用其 onRelease 方法使得缩放倍数被重置并重绘当前 View ，造成切换 Activity 、 Fragment 或 APP 回到前台时图片被恢复到默认倍数的现象。

  所以通过设置 mIsSaveScale 标识，控制是否执行 onRelease 方法内容即可。（点击跳转查看代码示例）

3.3 实现单击事件的监听

因为 ZoomableDraweeView 重写了 onTouchEvent 通过 ZoomableController 与 GestureListenerWrapper 共同处理触摸事件，使得 setOnClickListener 方法无效了。

通过在 DoubleTapGestureListener 中重写 onSingleTapConfirmed 并设置回调监听，便可以拿到单击事件的回调。（点击跳转查看代码示例）

3.4 使用便捷性优化

自定义 MyZoomableImageView 继承 ZoomableDraweeView 

• 提供 setImageUrl ( String imageUrl ) 方法填充显示网络图片

• 提供 setImageRes( @DrawableRes int resId ) 方法填充显示本地资源

• 默认实现双击放大/缩小效果

• 重写覆盖实现 setOnClickListener ( @Nullable final View.OnClickListener onClickListener ) 方法使其有效

（点击跳转查看代码示例）

3.5 拓展后使用示例

1.复制相关类到项目中（点击跳转）

 2. xml 引用

3.填充图片及属性设置 

        val isUrl = intent.getBooleanExtra(EXTRA_KEY_IS_URL, false)

        if (isUrl) {
            //加载网络图片
            iv_picture.setImageUrl("https://www.helloimg.com/images/2020/05/18/splash_bgb5d0ea1e3c8a4cc8.jpg")
        } else {
            //加载本地资源图片
            iv_picture.setImageRes(R.mipmap.splash_bg)
        }

        //保存缩放状态 -- 当前 view 重新可见时不重置缩放倍数
        iv_picture.setSaveScale(true)

        //点击事件
        iv_picture.setOnClickListener {
            Toast.makeText(this, "点击", Toast.LENGTH_SHORT).show()
        }

 

4.最后

• 建议复制作者已经整理好的 zoomable (点击跳转) 库到项目中直接使用以减少工作量
• 基于 Fresco 的 zoomable library 源码，作者改动过的地方类头都有 change 注释，类中都有 add ziwen 注释
• 源码及 Demo 地址：https://github.com/ziwenL/ZoomableDraweeView
• 如有更好的见解或建议，欢迎留言