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

迷南。 2022-04-04 14:19 562阅读 0赞

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

![20181217194239300.gif][]

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

![20181217194728241.gif][]

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

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

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

/**
         * 设置适配器
         */
        private fun setAdapter(mListSgqm: ArrayList<String>) {
            adapter = object : CommonAdapter<String>(this, R.layout.adapter_safeissued_onefragment, mListSgqm) {
                override fun convert(holder: ViewHolder?, t: String?, position: Int) {
                    val imageView = holder?.getView<ImageView>(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<String> 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<String> 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<Integer> showDelete(boolean isShow) {
            final ArrayList<Integer> 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<String> mList;
        private int positions;
    
        public ImagesLookPagerAdapter(Context context, ArrayList<String> 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怎样使用的可以[点击这里查看][Link 1]我之前写的一篇文章。然后直接通过传过来的图片地址使用glide来显示图片就行，通过调用popupWindow中的显示隐藏标题栏的方法来控制标题栏。然后基本上就大功告成了。其实实现也不难。有啥问题欢迎在下面评论。

[20181217194239300.gif]: /images/20220404/26f523a5c91c428a831f77074bad8cd2.png
[20181217194728241.gif]: /images/20220404/ecb2f418167b40d49d317f51471ae883.png
[Link 1]: https://blog.csdn.net/haojiagou/article/details/80539882