-
因为需求,对于轮播图进行一个点击预览的功能,看了好多的文章,都没有弄出来,还是多亏了昊昊猿博主
点击查看原文 终于把它搞定啦。 -
这里的话是使用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 {@Overridepublic 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>() {@Overridepublic void onResourceReady(@NonNull Bitmap resource, @Nullable Transition<? super Bitmap> transition) {mySimpleTarget.onResourceReady();imageView.setImageBitmap(resource);}});}@Overridepublic 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>() {@Overridepublic boolean onLoadFailed(@Nullable GlideException e, Object model, Target<GifDrawable> target, boolean isFirstResource) {mySimpleTarget.onResourceReady();return false;}@Overridepublic boolean onResourceReady(GifDrawable resource, Object model, Target<GifDrawable> target, DataSource dataSource, boolean isFirstResource) {mySimpleTarget.onLoadFailed(null);return false;}}).into(imageView);}@Overridepublic void onStop(@NonNull Fragment context) {Glide.with(context).onStop();}@Overridepublic void clearMemory(@NonNull Context c) {Glide.get(c).clearMemory();}
}
3.初始化并使用
首先,我是在onCreate里放入下面这段代码进行初始化的
ZoomMediaLoader.getInstance().init(new ImagePreviewLoader());
然后就是使用啦,我这里是轮播图(意思就是点击轮播图的第几张进行图片预览)
因为轮播图我是使用ViewPager2来弄的,所以我只需在viewPager2的点击监听事件中使用就可以了,代码如下:
goodBannerAdapter.setOnRecyclerItemClickListener(new GoodBannerAdapter.OnRecyclerItemClickListener() {@Overridepublic 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;}@Overridepublic String getUrl() {return url;}@Overridepublic Rect getBounds() {return mBounds;}@Nullable@Overridepublic String getVideoUrl() {return videoUrl;}public String getUser() {return user;}@Overridepublic int describeContents() {return 0;}@Overridepublic 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>() {@Overridepublic ImageViewInfo createFromParcel(Parcel source) {return new ImageViewInfo(source);}@Overridepublic ImageViewInfo[] newArray(int size) {return new ImageViewInfo[size];}};