Android 开发 Fresco框架点击小图显示全屏大图实现 ZoomableDraweeView

2022-11-13 15:31:42

目标需求

　　实现一张小图片,被点击后变成一个在整个屏幕上显示的大图片.类似于微信朋友圈的图片.

实现流程

　　1.Fresco基本初始化

　　2.下载并且导入ZoomableDraweeView 它是实现大图的关键view

　　3.创建activity,在布局文件里加入ZoomableDraweeView设置为全屏幕占满.(如果你需要多图翻页浏览功能,请另外添加ViewPager在放入ZoomableDraweeView)

　　4.在activity配置需要加载的图片

需要访问的网址:

　　Fresco的github: https://github.com/facebook/fresco

　　Zoomable包路径: https://github.com/facebook/fresco/tree/master/samples/zoomable

Fresco基本初始化

　　这个流程我就不废话了,如果这个还没了解过它,请移步 https://www.cnblogs.com/guanxinjing/p/10364380.html

下载并且导入ZoomableDraweeView

　　接下来是关键点Zoomable是Fresco Demo工程里自带的图片缩放库,但是它并不在依赖包里.所以你依赖了Fresco也无法找到这个View.所以我们需要手动找到这个包并且导入它.

　　1.第一步找到它:

　　在官方文档里只有一个小地方标注了它的存在,在这个官方文档网址:https://www.fresco-cn.org/docs/sample-code.html 当然, 也可以直接访问到指定目录看到ZoomableDraweeView: https://github.com/facebook/fresco/tree/master/samples/zoomable

　　就是这个缩放库,没有任何详细解释

　　2.第二步下载整个Fresco demo工程

　　在github里将这个工程下载下来,这个不需要多说啥了

　　3.第三步导入gestures包

　　ZoomableDraweeView的缩放实现还需要这个demo工程里的一个手势处理包就是这个gestures包,它的路径如下图所示:

　　找到它,将这个java文件放到你的工程里

　　4.第四步导入Zoomable

　　路径如下:

　　将这个包里的所有文件放到你的工程里,并且将一些报错依赖路径重新指向正确依赖路径

创建activity,在布局文件里加入ZoomableDraweeView设置为全屏幕占满

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".work.share.ZoomableActivity">

    <com.yt.kangaroo.widgets.zoomable.ZoomableDraweeView

        android:id="@+id/zoomable"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

在activity配置需要加载的图片

 @Override

    public void initView() {

        mZoomableDraweeView = (ZoomableDraweeView)findViewById(R.id.zoomable);

        mZoomableDraweeView.setIsLongpressEnabled(false);//长按

//        mZoomableDraweeView.setAllowTouchInterceptionWhileZoomed(true);//是否允许缩放时左右切换(如果设置为true，则父视图可以在视图缩放时截获触摸事件)

        mZoomableDraweeView.setTapListener(new DoubleTapGestureListener(mZoomableDraweeView));//双击击放大或缩小

        DraweeController controller = Fresco.newDraweeControllerBuilder()//创建Fresco的图片下载配置

                .setUri("https://s1.52poke.wiki/wiki/thumb/7/73/002Ivysaur.png/300px-002Ivysaur.png")

                .build();

        mZoomableDraweeView.setController(controller);//将下载配置导入

    }

其他api

mZoomableDraweeView.setZoomingEnabled(false);//设置是否缩放

如果你需要实现单击功能

　　这个 ZoomableDraweeView已经将触摸交给双击监听处理类DoubleTapGestureListener了,所以你无法使用setOnClickListener();方法实现ZoomableDraweeView的单击监听

mZoomableDraweeView.setTapListener(new DoubleTapGestureListener(mZoomableDraweeView));//双击击放大或缩小

　　这行代码就已经表示了,作者自己实现了一个DoubleTapGestureListener(双击监听类,作者主要用来双击放大缩小图片),然后设置给TapListener,所以这个时候单击已经被拦截了.所以目前只有2个方法

　　1.在ZoomableDraweeView里实现onTouchEvent判断单击事件,这样处理太费时费力,且一不小心就会破坏原有的其他触摸手势功能

　　2.我们也重写DoubleTapGestureListener这个类,在作者原有的DoubleTapGestureListener里面添加我们的单击事件然后接口出去.

所以我们使用第二种方法来实现单击事件,做法如下:

　　在DoubleTapGestureListener里重写一下,增加重写onSingleTapConfirmed方法(要注意只有onSingleTapConfirmed方法是单击确定后的回调):

/**

 * Tap gesture listener for double tap to zoom / unzoom and double-tap-and-drag to zoom.

 *

 * @see ZoomableDraweeView#setTapListener(GestureDetector.SimpleOnGestureListener)

 */

public class DoubleTapGestureListener extends GestureDetector.SimpleOnGestureListener {

  private static final int DURATION_MS = 300;

  private static final int DOUBLE_TAP_SCROLL_THRESHOLD = 20;

  private final ZoomableDraweeView mDraweeView;

  private final PointF mDoubleTapViewPoint = new PointF();

  private final PointF mDoubleTapImagePoint = new PointF();

  private float mDoubleTapScale = 1;

  private boolean mDoubleTapScroll = false;

  private OnSingleClickListener mListener;

  public DoubleTapGestureListener(ZoomableDraweeView zoomableDraweeView) {

    mDraweeView = zoomableDraweeView;

  }

  /**

   * 重写这个方法实现单击监听

   * @param e

   * @return

   */

  @Override

  public boolean onSingleTapConfirmed(MotionEvent e) {

    if (mListener != null){

      mListener.onSingleClick();

    }

    return true;

  }

  @Override

  public boolean onDoubleTapEvent(MotionEvent e) {

    AbstractAnimatedZoomableController zc =

        (AbstractAnimatedZoomableController) mDraweeView.getZoomableController();

    PointF vp = new PointF(e.getX(), e.getY());

    PointF ip = zc.mapViewToImage(vp);

    switch (e.getActionMasked()) {

      case MotionEvent.ACTION_DOWN:

        mDoubleTapViewPoint.set(vp);

        mDoubleTapImagePoint.set(ip);

        mDoubleTapScale = zc.getScaleFactor();

        break;

      case MotionEvent.ACTION_MOVE:

        mDoubleTapScroll = mDoubleTapScroll || shouldStartDoubleTapScroll(vp);

        if (mDoubleTapScroll) {

          float scale = calcScale(vp);

          zc.zoomToPoint(scale, mDoubleTapImagePoint, mDoubleTapViewPoint);

        }

        break;

      case MotionEvent.ACTION_UP:

        if (mDoubleTapScroll) {

          float scale = calcScale(vp);

          zc.zoomToPoint(scale, mDoubleTapImagePoint, mDoubleTapViewPoint);

        } else {

          final float maxScale = zc.getMaxScaleFactor();

          final float minScale = zc.getMinScaleFactor();

          if (zc.getScaleFactor() < (maxScale + minScale) / 2) {

            zc.zoomToPoint(

                maxScale,

                ip,

                vp,

                DefaultZoomableController.LIMIT_ALL,

                DURATION_MS,

                null);

          } else {

            zc.zoomToPoint(

                minScale,

                ip,

                vp,

                DefaultZoomableController.LIMIT_ALL,

                DURATION_MS,

                null);

          }

        }

        mDoubleTapScroll = false;

        break;

    }

    return true;

  }

  private boolean shouldStartDoubleTapScroll(PointF viewPoint) {

    double dist = Math.hypot(

        viewPoint.x - mDoubleTapViewPoint.x,

        viewPoint.y - mDoubleTapViewPoint.y);

    return dist > DOUBLE_TAP_SCROLL_THRESHOLD;

  }

  private float calcScale(PointF currentViewPoint) {

    float dy = (currentViewPoint.y - mDoubleTapViewPoint.y);

    float t = 1 + Math.abs(dy) * 0.001f;

    return (dy < 0) ? mDoubleTapScale / t : mDoubleTapScale * t;

  }

  public void setOnSingleClick(OnSingleClickListener listener){

    this.mListener = listener;

  }

  /**

   * 实现单击接口

   */

  public interface OnSingleClickListener{

    void onSingleClick();

  }

}

activity里实现单击回调:

DoubleTapGestureListener doubleTapGestureListener = new DoubleTapGestureListener(mZoomableDraweeView);

        doubleTapGestureListener.setOnSingleClick(new DoubleTapGestureListener.OnSingleClickListener() { //实现双击监听里的单击功能监听(双击作者这个View已经实现处理了)

            @Override

            public void onSingleClick() {

                finish();

            }

        });

嵌套ViewPager

下面的demo不是完整的,图片计数没做,但是功能已经实现了

activity_zoomable_pager.xml

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:fitsSystemWindows="true"

    tools:context=".work.share.ZoomableActivity">

    <androidx.viewpager.widget.ViewPager

        android:id="@+id/view_pager"

        android:layout_width="match_parent"

        android:layout_height="match_parent">

    </androidx.viewpager.widget.ViewPager>

    <TextView

        android:id="@+id/image_count"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="15dp"

        android:text="数量"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

package com.yt.kangaroo.work.share.zoomable_pager;

import android.content.Intent;

import android.graphics.drawable.Animatable;

import android.os.Bundle;

import android.view.View;

import android.widget.ProgressBar;

import android.widget.TextView;

import android.widget.Toast;

import androidx.annotation.Nullable;

import androidx.viewpager.widget.ViewPager;

import com.facebook.drawee.backends.pipeline.Fresco;

import com.facebook.drawee.controller.ControllerListener;

import com.facebook.drawee.interfaces.DraweeController;

import com.facebook.imagepipeline.request.ImageRequest;

import com.yt.kangaroo.R;

import com.yt.kangaroo.app.AppEventBusMsg;

import com.yt.kangaroo.app.BaseActivity;

import com.yt.kangaroo.net.teacherNet.TClircleListBase;

import com.yt.kangaroo.utils.L;

import com.yt.kangaroo.utils.ThumbnailUtil;

import com.yt.kangaroo.widgets.zoomable.DoubleTapGestureListener;

import com.yt.kangaroo.widgets.zoomable.ZoomableDraweeView;

import org.greenrobot.eventbus.EventBus;

import org.greenrobot.eventbus.Subscribe;

import org.greenrobot.eventbus.ThreadMode;

import java.util.ArrayList;

import java.util.List;

/**

 *@content:左右滑页大图片显示Activity

 *@time:2019-6-21

 *@build:

 */

public class ZoomablePagerActivity extends BaseActivity {

    public static final String T_CLIRCLE_IMAGE_KEY = "TClircleImage";

    private List<TClircleListBase.FriendsPublish.Pic> mTPicList;

    private ViewPager mViewPager;

    private TextView mImageCount;

    private ZoomablePagerAdapter mAdapter;

    private long mBackDelay = 0;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        initListener();

        EventBus.getDefault().register(this);

        mBackDelay = System.currentTimeMillis();

    }

    @Override

    public int getLayout() {

        return R.layout.activity_zoomable_pager;

    }

    @Override

    public void initView() {

        mViewPager = findViewById(R.id.view_pager);

        mImageCount = findViewById(R.id.image_count);

        mAdapter = new ZoomablePagerAdapter();

        mViewPager.setAdapter(mAdapter);

    }

    private void initListener(){

        mAdapter.setOnSingleClick(new ZoomablePagerAdapter.OnSingleClickListener() {

            @Override

            public void onSingleClick() {

                if (System.currentTimeMillis() - mBackDelay > 1*1000){ //退出延迟,太快的返回进出Activity会导致EventBus发送数据出现问题

                    EventBus.getDefault().unregister(this);

                    finish();

                }

            }

        });

    }

    @Subscribe(threadMode = ThreadMode.MAIN, sticky = true)

    public void onUiThread(AppEventBusMsg msg){

        L.e("接到数据onUiThread");

        if (msg.getKey().equals(T_CLIRCLE_IMAGE_KEY)){

            L.e("接到数据T_CLIRCLE_IMAGE_KEY");

            mTPicList = msg.getObjectList();

            List<String> urlList = new ArrayList<>();

            for (TClircleListBase.FriendsPublish.Pic pic : mTPicList){

                urlList.add(pic.getPicUrl());

            }

            L.e("urlList 长度="+urlList.size());

            mAdapter.refreshData(urlList);

        }

        EventBus.getDefault().removeStickyEvent(msg);

    }

    @Override

    protected void onDestroy() {

        super.onDestroy();

        EventBus.getDefault().unregister(this);

    }

}

zoomable_pager_item.xml

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    xmlns:app="http://schemas.android.com/apk/res-auto">

    <com.yt.kangaroo.widgets.zoomable.ZoomableDraweeView

        android:id="@+id/zoomable"

        android:layout_width="0dp"

        android:layout_height="0dp"

        android:background="@color/colorBlack1"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintBottom_toBottomOf="parent" />

    <ProgressBar

        android:id="@+id/progress"

        android:layout_width="40dp"

        android:layout_height="40dp"

        android:visibility="visible"

        android:indeterminateDrawable="@anim/ic_wait"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

package com.yt.kangaroo.work.share.zoomable_pager;

import android.graphics.drawable.Animatable;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ProgressBar;

import android.widget.Toast;

import androidx.annotation.NonNull;

import androidx.annotation.Nullable;

import androidx.viewpager.widget.PagerAdapter;

import com.facebook.drawee.backends.pipeline.Fresco;

import com.facebook.drawee.controller.ControllerListener;

import com.facebook.drawee.interfaces.DraweeController;

import com.facebook.imagepipeline.request.ImageRequest;

import com.yt.kangaroo.R;

import com.yt.kangaroo.utils.L;

import com.yt.kangaroo.utils.ThumbnailUtil;

import com.yt.kangaroo.widgets.zoomable.DoubleTapGestureListener;

import com.yt.kangaroo.widgets.zoomable.ZoomableDraweeView;

import java.util.ArrayList;

import java.util.List;

/**

 *@content:左右滑页大图片显示适配器

 *@time:2019-6-21

 *@build:zhouqiang

 */

public class ZoomablePagerAdapter extends PagerAdapter {

    private List<String> mImageUrlList = new ArrayList<>();

    private OnSingleClickListener mOnSingleClickListener;

    public void refreshData(List<String> imageUrl){

        L.e("触发refresh");

        mImageUrlList.clear();

        mImageUrlList.addAll(imageUrl);

        notifyDataSetChanged();

    }

    @Override

    public int getCount() {

        L.e("触发getCount="+mImageUrlList.size());

        return mImageUrlList.size();

    }

    @Override

    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {

        return view == object;

    }

    @NonNull

    @Override

    public Object instantiateItem(@NonNull final ViewGroup container, int position) {

        L.e("触发instantiateItem");

        View view = LayoutInflater.from(container.getContext()).inflate(R.layout.zoomable_pager_item, container, false);

        ZoomableDraweeView zoomableDraweeView = view.findViewById(R.id.zoomable);

        final ProgressBar progressBar = view.findViewById(R.id.progress);

        zoomableDraweeView.setIsLongpressEnabled(false);//长按

        DoubleTapGestureListener doubleTapGestureListener = new DoubleTapGestureListener(zoomableDraweeView);

        doubleTapGestureListener.setOnSingleClick(new DoubleTapGestureListener.OnSingleClickListener() { //实现双击监听里的单击功能监听(双击作者这个View已经实现处理了)

            @Override

            public void onSingleClick() {

                if (mOnSingleClickListener != null){

                    mOnSingleClickListener.onSingleClick();

                }

            }

        });

        zoomableDraweeView.setTapListener(doubleTapGestureListener);//双击击放大或缩小

        ControllerListener controllerListener = new ControllerListener() {

            @Override

            public void onSubmit(String id, Object callerContext) {

                //开始提交

                progressBar.setVisibility(View.VISIBLE);

            }

            @Override

            public void onFinalImageSet(String id, @Nullable Object imageInfo, @Nullable Animatable animatable) {

                //完成

                progressBar.setVisibility(View.GONE);

            }

            @Override

            public void onIntermediateImageSet(String id, @Nullable Object imageInfo) {

                //中间图像集

            }

            @Override

            public void onIntermediateImageFailed(String id, Throwable throwable) {

                //中间图像上失败

            }

            @Override

            public void onFailure(String id, Throwable throwable) {

                //失败

                Toast.makeText(container.getContext(),"网络异常,图片加载失败",Toast.LENGTH_LONG).show();

            }

            @Override

            public void onRelease(String id) {

                //释放

            }

        };

        DraweeController controller = Fresco.newDraweeControllerBuilder()//创建Fresco的图片下载配置

                .setControllerListener(controllerListener)

                .setLowResImageRequest(ImageRequest.fromUri(ThumbnailUtil.handlerImageUrl(mImageUrlList.get(position))))

                .setImageRequest(ImageRequest.fromUri(mImageUrlList.get(position)))

                .setOldController(zoomableDraweeView.getController())

                .build();

        zoomableDraweeView.setController(controller);//将下载配置导入

        container.addView(view);//注意别忘记添加

        return view;

    }

    @Override

    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {

        container.removeView((View)object);

    }

    public void setOnSingleClick(OnSingleClickListener listener){

        mOnSingleClickListener = listener;

    }

    public interface OnSingleClickListener{

        void onSingleClick();

    }

}

码农公寓