简介
- 对图片的加载和查看做了一个简单的封装，其目的是为了提高复用性，让主类变的更简洁，只需“三行代码”即可实现图片的加载预览以及查看。
showImagesAndEnlargement = new ShowImagesAndEnlargement(this , imageUrls , imageGroup);
//加载到指定预览的View上
showImagesAndEnlargement.showImages();
//点击预览图片进行放大查看，PhotoView可对图片放大缩小
//这行代码是放在指定预览View的监听上
showImagesAndEnlargement.showDialogImages();
原理
- 1.首先用Glide将图片加载到指定View,用于开始的预览。它可以从多个源加载图片，如：网路，本地，Uri等，并且采用三级缓存策略。
- 2.自定义Dialog，尺寸设置全屏(利用Display的getMetricsgetMetrics(DisplayMetrics outMetrics)方法来获取屏幕尺寸）。
- 3.新建一个Layout，添加ViewPager，其目的是为了实现多张图片情况下的左右滑动。
- 4.动态创建PhotoView，layoutParams的宽高设置为MATCH_PARENT。它可对图片能进行一个放大和缩小。
注：PhotoView的数量是根据url的数量来决定的，以及再次用Glide将图片加载到PhotoView上，总共是进行了两次加载（指定View和PhotoView）。注意不能等到点击图片后才给PhotoView上加载图片，一定要提前加载，不然会出现图片加载的一个等待过程，以及去掉Glide中的placeholder占位图，因为不管你有没有提前加载它都会出现。（以上这段话不理解没事er，可以先略过）
- 5.利用适配器将PhotoView放到ViewPager中。
- 6.最后一步就是将Viewpager Set到Dialog当中
添加依赖
//图片加载库
implementation 'com.github.bumptech.glide:glide:4.10.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.0.0'
//图片查看库
implementation 'com.github.chrisbanes:PhotoView:2.3.0'
加载图片的Utils
- 这只是一个图片的加载工具类（附属类），没有去和查看图片集成到一块，你可以根据自己的需求做以改动。这个类包含两个方法，一个是加载到指定预览的View上，一个是加载到PhotoView上，其实可以用一个方法来实现，就是把接收View的集合改成泛型，但是这样显示不清晰合理，并且太麻烦，所以就没有用泛型来接。
package com.example.attendance.util;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.widget.ImageView;
import com.bumptech.glide.Glide;
import com.bumptech.glide.RequestBuilder;
import com.bumptech.glide.request.RequestOptions;
import com.example.attendance.R;
import com.github.chrisbanes.photoview.PhotoView;
import java.util.List;
/**
* @ClassName LoadImageUtils
* @Description 图片加载工具
* @Author YiYaKim
* @Date 2020/3/3 18:02
* @Version 1.0
*/
public class LoadImageUtils {
/**
* @Description 加载多张图片
* @param imageGroup imageView
* @param imageUrls url
*/
@SuppressLint("CheckResult")
public static void multipleLoadImageView(Context context , List<ImageView> imageGroup , List<String> imageUrls){
RequestOptions options = new RequestOptions();
options.centerCrop()
.placeholder(R.drawable.default_avatar)
.error(R.drawable.image_error)
.fallback(R.drawable.image_error)
.fitCenter();
RequestBuilder<Drawable> requestBuilder =
Glide.with(context)
.asDrawable()
.apply(options)
;
for(int i = 0 ; i < imageUrls.size() ; i++){
ImageView view = imageGroup.get(i);
requestBuilder.clone()
.load(imageUrls.get(i))
.into(view);
}
}
@SuppressLint("CheckResult")
public static void multipleLoadPhotoView(Context context , List<PhotoView> imageGroup , List<String> imageUrls){
RequestOptions options = new RequestOptions();
options.centerCrop()
.error(R.drawable.image_error)
.fallback(R.drawable.image_error)
.fitCenter(); //图片填充
RequestBuilder<Drawable> requestBuilder =
Glide.with(context)
.asDrawable().apply(options);
for(int i = 0 ; i < imageUrls.size() ; i++){
PhotoView view = imageGroup.get(i);
requestBuilder.clone()
.load(imageUrls.get(i))
.into(view);
}
}
}
自定义Dialog
- 主要做了Dialog显示大小的设置，以及将ViewPager Set到Dialog上去。里面还加了一个Title，就是为了显示图片的个数，可以根据自己需求来决定。（ViewPager是我自定义的{@link ShowImagesViewPager}，你可以自行替换）
package com.example.attendance.photoview;
import android.annotation.SuppressLint;
import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.viewpager.widget.ViewPager;
import com.example.attendance.R;
import com.example.attendance.common.Constants;
import com.github.chrisbanes.photoview.PhotoView;
import java.util.ArrayList;
import java.util.List;
/**
* @ClassName ShowImagesDialog
* @Description 嵌套了viewpager的图片浏览
* @Author YiYaKim
* @Date 2020/3/3 18:22
* @Version 1.0
*/
public class ShowImagesDialog extends Dialog {
private View mView ;
private Context mContext;
private ShowImagesViewPager mViewPager;
private TextView mIndexText;
private List<PhotoView> photoViews;
private List<String> mTitles;
private List<View> mViews;
private ShowImagesAdapter mAdapter;
public ShowImagesDialog(@NonNull Context context, List<PhotoView> photoViews) {
super(context, R.style.transparentBgDialog);
this.mContext = context;
this.photoViews = photoViews;
initView();
initData();
}
private void initView() {
mView = View.inflate(mContext, R.layout.dialog_images_brower, null);
mViewPager = mView.findViewById(R.id.vp_images);
mIndexText = mView.findViewById(R.id.tv_image_index);
mTitles = new ArrayList<>();
mViews = new ArrayList<>();
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(mView);
Window window = getWindow();
WindowManager.LayoutParams wl = window.getAttributes();
wl.x = 0;
wl.y = 0;
wl.height = Constants.EXACT_SCREEN_HEIGHT ;
wl.width = Constants.EXACT_SCREEN_WIDTH ;
wl.gravity = Gravity.CENTER;
window.setAttributes(wl);
}
@SuppressLint("SetTextI18n")
private void initData() {
for (int i = 0; i < photoViews.size(); i++) {
mViews.add(photoViews.get(i));
mTitles.add(i + "");
}
mAdapter = new ShowImagesAdapter(mViews, mTitles);
mViewPager.setAdapter(mAdapter);
mIndexText.setText(1 + "/" + photoViews.size());
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
mIndexText.setText(position + 1 + "/" + photoViews.size());
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
public void setCurrentViewPage(int item){
mViewPager.setCurrentItem(item);
}
}
适配器
package com.example.attendance.photoview;
import android.view.View;
import android.view.ViewGroup;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;
import java.util.List;
/**
* @ClassName ShowImagesAdapter
* @Description TODO
* @Author YiYaKim
* @Date 2020/3/3 18:30
* @Version 1.0
*/
public class ShowImagesAdapter extends PagerAdapter {
private List<View> views;
private List<String> titles;
public ShowImagesAdapter(List<View> views, List<String> titles) {
this.views = views;
this.titles = titles;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public int getCount() {
return views.size();
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView(views.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
((ViewPager) container).addView(views.get(position));
return views.get(position);
}
@Override
public CharSequence getPageTitle(int position) {
return titles == null ? "" : titles.get(position);
}
}
核心类
- 该类融合了加载和查看，在主类使用该类调用相关方法即可实现图片的加载和查看。
package com.example.attendance.util;
import android.content.Context;
import android.view.ViewGroup;
import android.widget.ImageView;
import com.example.attendance.photoview.ShowImagesDialog;
import com.github.chrisbanes.photoview.OnPhotoTapListener;
import com.github.chrisbanes.photoview.PhotoView;
import java.util.ArrayList;
import java.util.List;
/**
* @ClassName ShowImagesAndEnlargement
* @Description 显示照片和放大查看以及缩放 {@link com.bumptech.glide.Glide} {@link PhotoView}
* @Author YiYaKim
* @Date 2020/3/4 15:20
* @Version 1.0
*/
public class ShowImagesAndEnlargement {
private Context context;
private List<ImageView> imageGroup;
private ShowImagesDialog showImagesDialog;
private List<PhotoView> imagesDialogs = new ArrayList<>();
//不管是多张还是一张，加载图片根据的是imageUrls的数量不是根据imageGroup,因为View是去匹配URL的数量
private List<String> imageUrls;
public ShowImagesAndEnlargement(Context context , List<String> imageUrls , List<ImageView> imageGroup){
this.context = context;
this.imageUrls = imageUrls;
this.imageGroup = imageGroup;
}
/**
* 显示照片 {@link com.bumptech.glide.Glide}
*/
public void showImages() {
LoadImageUtils.multipleLoadImageView(context , imageGroup , imageUrls);
enlargement(imageUrls);
showImagesDialog = new ShowImagesDialog(context , imagesDialogs);
}
/**
* 为Dialog做准备，提前把图片加载到PhotoView上 {@link PhotoView}
* @param imageUrls 图片的url
*/
private void enlargement(List<String> imageUrls) {
for (int i = 0; i < imageUrls.size(); i++) {
PhotoView photoView = new PhotoView(context);
ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
photoView.setLayoutParams(layoutParams);
photoView.setOnPhotoTapListener(new OnPhotoTapListener() {
@Override
public void onPhotoTap(ImageView view, float x, float y) {
//因为showImagesDialog是全局变量，并且在点击的时候已经有了实例
if(showImagesDialog != null){
showImagesDialog.dismiss();
}
}
});
imagesDialogs.add(photoView);
}
//将图片加载到PhotoView上
LoadImageUtils.multipleLoadPhotoView(context , imagesDialogs, imageUrls);
}
/**
* 显示PhotoView
*/
public void showDialogImages(){
showImagesDialog.show();
}
/**
* 显示指定页面
* @param item 某一页面
*/
public void setCurrentViewPage(int item){
showImagesDialog.setCurrentViewPage(item);
}
}
- End~~~结束啦！！！
以前都是从简书上来搬运别人的代码，自己从来在简书上没写过，这次就本着取之于民用之于民的道理终于自己写一次啦！这样利己又利人何乐而不为呢，因为在写的时候也是对自己所掌握知识的一个巩固，并且孔子说过，教人是最好的学习方法。其实分享对我来说也是一种快乐，陶醉于其中，哈哈哈哈~~~~~~
对了，有不足或者错误的地方还望各位小伙伴指出，共同探讨哦！！！
网友评论