Android实现recycleView中点击图片查看图片（类似相册显示）

首先，先展示一下做完之后的样子吧。

 

大概思路是外面显示使用的是recycleView，然后点击之后进入一个popupWindow，popopWindow中嵌套着一个viewPager，然后在viewPager中实现了类似于朋友圈的那种效果，点击图片隐藏标题栏，再次点击隐藏。实现思路是在viewPager的适配器中调用popupWindow中的方法，实现显示或者隐藏标题栏。

 

有了大概的思路，就开始愉快的敲代码了。我使用的recycleView使用的是一个第三方的适配器。下面是引用地址。

//适配器
    implementation 'com.zhy:base-rvadapter:3.0.3'

这个适配器很好用，直接调用就可以，下面直接放调用代码吧。

/**
     * 设置适配器
     */
    private fun setAdapter(mListSgqm: ArrayList) {
        adapter = object : CommonAdapter(this, R.layout.adapter_safeissued_onefragment, mListSgqm) {
            override fun convert(holder: ViewHolder?, t: String?, position: Int) {
                val imageView = holder?.getView(R.id.adapter_workchedk_iv)

                if (imageView != null && t != null) {
                    //imageView.setImageBitmap(ImageUtils.scale(BitmapFactory.decodeResource(resources, 0), 120, 120))
                    val options = RequestOptions()
                            .override(240, 240)
                    Glide.with(this@CollectionRecordsViewActivity).load(t).apply(options).into(imageView)
                    imageView.setOnClickListener {
                        /*PopupReviewImage.getInstance().show(this@AcceptanceApprovalActivity,imageView,messageList, position)*/
                        ImagesLook.getInstance().show(this@CollectionRecordsViewActivity, imageView, mListSgqm,position)
                        ToastUtils.showShort(mListSgqm[position])
                    }
                }
            }
        }

    }

里面的Glide就不多说了。开发安卓的应该都对它非常了解。需要传入的值很简单，第一个是context，这是必须的；第二个是一个View，直接传入你点击的view即可；第三个是你的图片的地址集合；第四个是你点的第几张图片（即下标）。今天要说的就是里面的ImagesLook。其实里面代码并不难，就是一个popupwindow。简单使用了单例模式。下面是代码：

public class ImagesLook {
    private TextView popupTvPageNum;
    private PopupWindow popupWindow;
    private TextView txtRight;
    private int position;
    private ArrayList mList;
    private View rootVew;
    private LinearLayout popupLl;
    private ViewPager popupViewPager;
    private ImagesLookPagerAdapter adapter;

    public static ImagesLook getInstance() {
        return ImagesLook.MenuUtilHolder.INSTANCE;
    }

    /**
     * 弹起 popupWindow
     * 通过路径显示
     *
     * @param context context
     * @param parent  parent
     */
    public void show(Context context, View parent, final ArrayList mList, final int position) {
        this.mList = mList;
        this.position = position;
        _createView(context);
        if (popupWindow != null && !popupWindow.isShowing()) {
            popupWindow.showAtLocation(parent, Gravity.BOTTOM, 0, 0);
        }
    }

    /**
     * 创建 popupWindow 内容
     *
     * @param context context
     */
    @SuppressLint("InflateParams")
    private void _createView(final Context context) {
        rootVew = LayoutInflater.from(context).inflate(R.layout.layout_popup_image, null);
        popupWindow = new PopupWindow(rootVew,
                LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.MATCH_PARENT);
        //设置为失去焦点 方便监听返回键的监听
        popupWindow.setFocusable(false);
        popupWindow.setClippingEnabled(false);
        // 如果想要popupWindow 遮挡住状态栏可以加上这句代码
        //popupWindow.setClippingEnabled(false);
        popupWindow.setBackgroundDrawable(new BitmapDrawable());
        popupWindow.setOutsideTouchable(false);
        popupWindow.setFocusable(true);
        initLayout(context);
    }

    /**
     * 初始化 view
     */
    @SuppressLint("SetTextI18n")
    private void initLayout(Context context) {
        popupViewPager = rootVew.findViewById(R.id.popupViewPager);
        popupTvPageNum = rootVew.findViewById(R.id.popupTvPageNum);
        popupLl = rootVew.findViewById(R.id.popupLl);
        txtRight = rootVew.findViewById(R.id.txtRight);
        ImageView imgBack = rootVew.findViewById(R.id.imgBack);
        TextView txtTitle = rootVew.findViewById(R.id.txtTitle);
        txtTitle.setText("查看图片");

        adapter = new ImagesLookPagerAdapter(context, mList, position);

        popupViewPager.setAdapter(adapter);

        int page = position + 1;
        popupTvPageNum.setText(page + "/" + mList.size());
        popupViewPager.setCurrentItem(position);

        popupViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @SuppressLint("SetTextI18n")
            @Override
            public void onPageSelected(int i) {
                int page = i + 1;
                popupTvPageNum.setText(page + "/" + mList.size());
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
        imgBack.setVisibility(View.VISIBLE);
        imgBack.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                close();
            }
        });

    }

    /**
     * 关闭popupWindow
     */

    private void close() {
        if (popupWindow != null && popupWindow.isShowing()) {
            popupWindow.dismiss();
            popupWindow = null;
        }
    }

    /**
     * 显示右上角删除按钮
     */
    public ArrayList showDelete(boolean isShow) {
        final ArrayList integers = new ArrayList<>();
        if (isShow) {
            txtRight.setVisibility(View.VISIBLE);
            txtRight.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mList.remove(popupViewPager.getCurrentItem());
                    adapter.notifyDataSetChanged();
                    popupViewPager.setAdapter(adapter);
                    integers.add(popupViewPager.getCurrentItem());
                }
            });
        } else {
            txtRight.setVisibility(View.GONE);
        }
        return integers;
    }


    /**
     * 显示标题栏
     */
    public void showActionbar() {
        popupLl.setVisibility(View.VISIBLE);
    }

    /**
     * 关闭标题栏
     */
    public void closeActionbar() {
        popupLl.setVisibility(View.GONE);
    }

    private static class MenuUtilHolder {
        @SuppressLint("StaticFieldLeak")
        static ImagesLook INSTANCE = new ImagesLook();
    }

}

show方法中接收activity中调用的数据。得到之后直接显示在viewPager中。

上面代码中有两个公共的方法，是让viewPager的适配器来调用的。

这里面的ImagesLookPagerAdapter就是上面所说的viewPager的适配器。就是用来显示大图的。下面是适配器的代码。

public class ImagesLookPagerAdapter extends PagerAdapter {
    private Context context;
    private ArrayList mList;
    private int positions;

    public ImagesLookPagerAdapter(Context context, ArrayList mList, int position) {
        this.context = context;
        this.mList = mList;
        this.positions = position;
    }

    @Override
    public int getCount() {
        return mList.size();
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
        return view==o;
    }

    private boolean isFull = false;

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, final int position) {
        if (mList != null && position < mList.size()) {
            String resId = mList.get(position);
            if (resId != null) {
                PhotoView popupImages = new PhotoView(context);

                Glide.with(context).load(mList.get(position)).into(popupImages);
                popupImages.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        if (!isFull){
                            isFull = true;
                            ImagesLook.getInstance().closeActionbar();
                        }else {
                            isFull = false;
                            ImagesLook.getInstance().showActionbar();
                        }
                        //ToastUtils.showShort(mList.get(positions));
                    }
                });

                //此处假设所有的照片都不同，用resId唯一标识一个itemView；也可用其它Object来标识，只要保证唯一即可
                popupImages.setTag(resId);

                container.addView(popupImages);
                return popupImages;
            }
        }
        return null;
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        if (object != null) {
            int count = container.getChildCount();
            for (int i = 0; i < count; i++) {
                View childView = container.getChildAt(i);
                if (childView == object) {
                    container.removeView(childView);
                    break;
                }
            }
        }
    }
}

上面的代码更简单了，直接继承PagerAdapter，在里面直接new一个photoView，不知道photoview怎样使用的可以点击这里查看我之前写的一篇文章。然后直接通过传过来的图片地址使用glide来显示图片就行，通过调用popupWindow中的显示隐藏标题栏的方法来控制标题栏。然后基本上就大功告成了。其实实现也不难。有啥问题欢迎在下面评论。