Android图片浏览模式以及图片保存的实现

在访问微信朋友圈的时候，点击里面的图片可以进行多图浏览，手势缩放，以及图片保存的功能，正好项目里也有这样一个需求，并且顺利完成了，现在拿出来和大家分享一下。

图片浏览模式的实现大体流程如下：

第一步：弹出popupWindow
第二步：popupWindow中创建保存按钮和viewpager对象
第三步：为viewpager添加视图
第四步：图片支持缩放
第五步：获取图片并保存

第一步：

首先在点击图片时会弹出popupWindow，当然要得到图片位置和图片列表数据，这个图片列表数据里的对象可以是bitmap，图片地址，byte字节等；

    PopupWindow popupWindow;
    /**记录viewpager滑动到的位置*/
    private int currentPosition;
    protected List<RelativeLayout> imageList = new ArrayList<>();
     /**
     * 弹出展示图片框
     */
    private void showImagePopup(List<String> list, int position) {
        currentPosition = position;
        imageList.clear();
      /**
       * popupWindow对象充满屏幕
       */
        popupWindow = new PopupWindow(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        /**手机版本较低时popupWindow会充满整个屏幕，包括状态栏*/
        if(Build.VERSION.SDK_INT <= Build.VERSION_CODES.KITKAT){
            popupWindow.setHeight(DipUtils.getScreenHeight(this) - StatusBarCompat.getStatusBarHeight(this));
        }
        View contentView = LayoutInflater.from(this).inflate(R.layout.popup_window_big_image, null);
        TextView save = (TextView) contentView.findViewById(R.id.tv_save);
        final ViewPager viewPager = (ViewPager) contentView.findViewById(R.id.popup_vp);

        /**为viewpager创建适配*/
        setViewPagerAdapter(viewPager, list);
        /**position为当前正在被点击的图片的位置，展示正被点击的图片*/
        viewPager.setCurrentItem(position);
        viewPager.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (popupWindow != null && popupWindow.isShowing()) {
                    popupWindow.dismiss();
                }
            }
        });
        save.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showProgressDialog("正在保存...");
                saveImage();
            }
        });
        /**如果想要点击back键时弹框消失，这两个属性必须使用并同时使用*/
        popupWindow.setBackgroundDrawable(new ColorDrawable());
        popupWindow.setFocusable(true);
        popupWindow.setContentView(contentView);
        popupWindow.setOutsideTouchable(true);

        popupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {
            @Override
            public void onDismiss() {

            }
        });
        /**设置入场出场动画，可以不设置*/
        popupWindow.setAnimationStyle(R.style.PopupImageScale);
        /**popupWindow底部展示，参数一可以传入当前界面初始化了的任意的一个view对象*/
        popupWindow.showAtLocation(mToolBar, Gravity.BOTTOM, 0, 0);
    }

popupWindow的contentView布局文件代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/text_color"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_save"
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:layout_alignParentRight="true"
        android:paddingLeft="16dp"
        android:paddingRight="26dp"
        android:text="保存"
        android:gravity="center"
        android:textSize="16sp"
        android:textColor="@color/white"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/popup_vp"
        android:layout_below="@id/tv_save"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

以上是创建popupWindow的步骤，基本操作啦~，这些想必大家都会，并且还可以把代码写的更简洁。

第二步：

创建完popupWindow之后，要对viewpager进行视图填充，在完成这一步时，因为只是简单的图片视图，所以就没有重新写新的布局文件，具体代码如下：

     /**
     * 设置点击放大图片适配器
     */
    private void setViewPagerAdapter(ViewPager viewPager, List<String> list) {
        for (int i = 0; i < list.size(); i++) {
            imageList.add(getView(list.get(i)));
        }
        viewPager.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return imageList.size();
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;

            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(imageList.get(position));
                return imageList.get(position);
            }

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(imageList.get(position));
            }
        });
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                currentPosition = position;
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

在viewpager中添加view对象或者是fragment，但是添加fragment会报错，在这里提一下，popupWindow中不能添加fragment对象，网上的解决方法是将popupWindow换成DialogFragment，大家可以根据兴趣自行研究。

第三步：

为viewpager天剑视图，代码如下：

 /**
     * 获取图片及图片布局
     */
    private RelativeLayout getView(String s) {
    /**由于图片要居中显示，所以选择父布局为相对布局，为什么要为图片外面嵌套一层父布局，下面会进行讲解*/
        final RelativeLayout view = new RelativeLayout(this);
        ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams
                (ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        view.setLayoutParams(layoutParams);
        /**PhotoView是ImageView的子类*/
        PhotoView imageView = new PhotoView(this);
        RelativeLayout.LayoutParams layoutParams1 = new RelativeLayout.LayoutParams
                (ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        /**设置布局规则*/        
        layoutParams1.addRule(RelativeLayout.CENTER_IN_PARENT);
        imageView.setLayoutParams(layoutParams1);
        view.addView(imageView);
        Glide.with(this).load(s).into(imageView);
        view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (popupWindow != null && popupWindow.isShowing())
                    popupWindow.dismiss();
            }
        });
        return view;
    }

上面的代码中为图片添加父布局，是为了让图片自适应宽高，然后为图片设置规则，为居中显示，当然还可以设置其他属性，如果没有这一层父布局嵌套，那么图片会充满屏幕；

第四步：

图片缩放功能的实现，可以使用上面用到的PhotoView， GitHub地址点这里，这是一个安全的开源控件，我使用的版本是2.1.3，已经有一万二的star了，使用起来也很简单。

第五步：

保存图片：
我们所做的项目中加载图片一般会用到图片加载框架，Glide或者Picasso，后台返回给我们的图片数据一般是一个图片地址，使用glide加载完成后可以通过如下方法获取到图片对象：

Glide.with(this).load(s).asBitmap().into(new ImageViewTarget<Bitmap>(imageView) {
            @Override
            protected void setResource(Bitmap resource) {

            }
        });

resource即是bitmap对象，但是获取到图片后要讲其保存起来，然后再在保存的时候取出来，这样就显得很繁琐，所以使用另外一种更加简单的方法来保存图片，不需要保存对象，也不需要去重新取值。

    /**
     * 保存图片到本地
     */
    private void saveImage() {
        if (imageList != null && imageList.size() != 0 && currentPosition < imageList.size()) {
            RelativeLayout view = imageList.get(currentPosition);
            ImageView iv = (ImageView) view.getChildAt(0);
            iv.setDrawingCacheEnabled(true);
            Bitmap bitmap = iv.getDrawingCache();
            if (BitmapUtil.saveImageToGallery(this, bitmap)) {
                hideProgressDialog();
                showToast("保存成功");
            } else {
                hideProgressDialog();
                showToast("保存失败");
            }
            iv.setDrawingCacheEnabled(false);
        } else {
            hideProgressDialog();
        }

    }

通过图片本身来进行保存，在获取对象之前要打开：
iv.setDrawingCacheEnabled(true);
在完成之后关闭：
iv.setDrawingCacheEnabled(false);

到这里，图片浏览模式和图片保存就完成了，如果有疑问，请给我留言，如果那里写的有问题，也请给我留言。