简介

• 对图片的加载和查看做了一个简单的封装，其目的是为了提高复用性，让主类变的更简洁，只需“三行代码”即可实现图片的加载预览以及查看。

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~~~结束啦！！！
  以前都是从简书上来搬运别人的代码，自己从来在简书上没写过，这次就本着取之于民用之于民的道理终于自己写一次啦！这样利己又利人何乐而不为呢，因为在写的时候也是对自己所掌握知识的一个巩固，并且孔子说过，教人是最好的学习方法。其实分享对我来说也是一种快乐，陶醉于其中，哈哈哈哈~~~~~~
  对了，有不足或者错误的地方还望各位小伙伴指出，共同探讨哦！！！