Android中点击图片进行图片预览功能的实现（ImagePreview图片预览工具库）

Posted 2021-05-23 kaolagirl

• 因为需求，对于轮播图进行一个点击预览的功能，看了好多的文章，都没有弄出来，还是多亏了昊昊猿博主
  点击查看原文 终于把它搞定啦。

• 这里的话是使用ImagePreview，一个非常好用的图片预览工具库（还可以实现双击放大等功能），它不需要我们创建任何布局，只需要简单的初始化，放入数据，就可以实现图片预览（多图），话不多说，先上效果图：
  

接下来，就去讲讲如何实现的吧

1.导入依赖包

implementation 'com.github.bumptech.glide:glide:4.9.0'  //图片加载库
implementation 'com.ycjiang:ImagePreview:2.3.5' //图片预览工具库
annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'

2.新建一个 ImagePreViewLoader 类继承于 IZoomMediaLoader，代码如下：

public class ImagePreviewLoader implements IZoomMediaLoader {

    @Override
    public void displayImage(@NonNull Fragment context, @NonNull String path, ImageView imageView, @NonNull MySimpleTarget mySimpleTarget) {
        Glide.with(context)
                .asBitmap()
                .load(path)
                .apply(new RequestOptions().fitCenter())
                .into(new SimpleTarget<Bitmap>() {
                    @Override
                    public void onResourceReady(@NonNull Bitmap resource, @Nullable Transition<? super Bitmap> transition) {
                        mySimpleTarget.onResourceReady();
                        imageView.setImageBitmap(resource);

                    }
                });
    }

    @Override
    public void displayGifImage(@NonNull Fragment context, @NonNull String path, ImageView imageView, @NonNull MySimpleTarget mySimpleTarget) {
        Glide.with(context)
                .asGif()
                .load(path)
                //可以解决gif比较几种时 ，加载过慢  //DiskCacheStrategy.NONE
                .apply(new RequestOptions().diskCacheStrategy(DiskCacheStrategy.RESOURCE).dontAnimate())
               //去掉显示动画
                .listener(new RequestListener<GifDrawable>() {
                    @Override
                    public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<GifDrawable> target, boolean isFirstResource) {
                        mySimpleTarget.onResourceReady();
                        return false;
                    }
                    @Override
                    public boolean onResourceReady(GifDrawable resource, Object model, Target<GifDrawable> target, DataSource dataSource, boolean isFirstResource) {
                       mySimpleTarget.onLoadFailed(null);
                        return false;
                    }
                })
                .into(imageView);
    }

    @Override
    public void onStop(@NonNull Fragment context) {
        Glide.with(context).onStop();

    }

    @Override
    public void clearMemory(@NonNull Context c) {
        Glide.get(c).clearMemory();
    }
}

3.初始化并使用

首先，我是在onCreate里放入下面这段代码进行初始化的

 ZoomMediaLoader.getInstance().init(new ImagePreviewLoader());

然后就是使用啦，我这里是轮播图（意思就是点击轮播图的第几张进行图片预览）

因为轮播图我是使用ViewPager2来弄的，所以我只需在viewPager2的点击监听事件中使用就可以了，代码如下：

 goodBannerAdapter.setOnRecyclerItemClickListener(new GoodBannerAdapter.OnRecyclerItemClickListener() {
            @Override
            public void OnRecyclerItemClick(int position) {
                mimgLists = new ArrayList<>();
                for(int i=0;i<imgLists.size();i++){
                    String url = imgLists.get(i);
                    mimgLists.add(new ImageViewInfo(url));
                }
                //图片预览（关键
                GPreviewBuilder.from(GoodDetail.this)
                        .setData(mimgLists)  //数据
                        .setCurrentIndex(position)  //图片下标
                        .setSingleFling(true)  //是否在黑屏区域点击返回
                        .setDrag(false)  //是否禁用图片拖拽返回
                        .setType(GPreviewBuilder.IndicatorType.Number)  //指示器类型
                        .start();  //启动
                banner_vp.setCurrentItem(position);
             }
        });

这里就可以实现预览效果啦。
但是，看到这里，可能就会有人疑问，数据从哪来，还有那个 imgLists, mimgLists又是什么，接下来就给大家详细说下：

 private ArrayList<String> imgLists;  //后台获取到的图片列表
 private List<ImageViewInfo> mimgLists;  //预览的图片列表

//mimgLists的数据是通过遍历imgLists，然后add进来的
 for(int i=0;i<imgLists.size();i++){
        String url = imgLists.get(i);
        mimgLists.add(new ImageViewInfo(url));
  }

因为 GPreviewBuilder 的setData( List<T imgList )里面放的数据类型是T继承于 IThumbViewInfo,而我从后台获取到的数据是ArrayList <String imgList的数据类型是String，所以这里我就去定义一个ImageViewInfo类继承于 IThumbViewInfo，代码如下：

public class ImageViewInfo implements IThumbViewInfo {
    //图片地址
    private String url;
    // 记录坐标
    private Rect mBounds;
    private String user = "用户字段";
    private String videoUrl;

    public ImageViewInfo(String url){
        this.url = url;
    }


    public void setUrl(String url) {
        this.url = url;
    }

    public void setUser(String user) {
        this.user = user;
    }

    public void setmBounds(Rect mBounds) {
        this.mBounds = mBounds;
    }

    public void setVideoUrl(String videoUrl) {
        this.videoUrl = videoUrl;
    }


    @Override
    public String getUrl() {
        return url;
    }

    @Override
    public Rect getBounds() {
        return mBounds;
    }

    @Nullable
    @Override
    public String getVideoUrl() {
        return videoUrl;
    }

    public String getUser() {
        return user;
    }

    @Override
    public int describeContents() {
        return 0;
    }

    @Override
    public void writeToParcel(Parcel dest, int flags) {
        dest.writeString(this.url);
    }

    protected ImageViewInfo(Parcel in){
        this.url = in.readString();
    }

    public static Creator<ImageViewInfo> CREATOR = new Creator<ImageViewInfo>() {
        @Override
        public ImageViewInfo createFromParcel(Parcel source) {
            return new ImageViewInfo(source);
        }

        @Override
        public ImageViewInfo[] newArray(int size) {
            return new ImageViewInfo[size];
        }
    };