美文网首页Android
Android仿微信图片浏览

Android仿微信图片浏览

作者: _Jun | 来源:发表于2022-11-23 10:22 被阅读0次

    实现原理

    自定义PopupWindow+RecyclerView+TouchImageView

    PopupWindow与AlertDialog的区别

    最关键的区别是AlertDialog不能指定显示位置,只能默认显示在屏幕最中间(当然也可以通过设置WindowManager参数来改变位置)。而PopupWindow是可以指定显示位置的,十分灵活。
    要生成一个PopupWindow最基本的三个条件是一定要设置的:

    View contentView,int width, int height ;
    

    少任意一个就不可能弹出来

    PictureBrowsing

    PictureBrowsing的布局文件 view_image.xml

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
    
        <View
            android:id="@+id/bg"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#000"
            android:alpha="0"
            />
    
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            />
        <TextView
            android:id="@+id/tv_savePicture"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_alignParentStart="true"
            android:textColor="@color/white"
            android:layout_marginTop="26dp"
            android:layout_marginRight="16dp"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:paddingTop="4dp"
            android:paddingBottom="4dp"
            android:text="保存图片"
            android:textSize="19dp"
            android:background="@drawable/bg_operator"
            />
    
        <ImageView
            android:id="@+id/cover"
            android:layout_width="0dp"
            android:layout_height="0dp"
            />
    </FrameLayout>
    

    重写PopupWindow里面放入一个横向的RecyclerView

    完整代码比较简单,主要就是RecyclerView的使用

    public class PictureBrowsing extends PopupWindow {
    
        private Context mContext;//上下文
        private View mParent;
        private View mBg;//背景图片
        private RecyclerView mRecyclerView;
        private ImageView mCover;//当前的图面
    
        private List<PictureBean> mList;
        private int mPosition;//当前的图面的位置
        private ActionListener mActionListener; //自定义点击接口
    
        private int recyclerViewCurrentPosition = -1; // RecyclerView当前前位置
        private TextView savePicture;//保存图片
    
      //构造函数
        public PictureBrowsing(Context context, View parent, List<PictureBean> bean) {
            mContext = context;
            mParent = parent;
            mList = new ArrayList<>();
            mList .addAll( bean);
            mPosition = 1;
    
            //设置布局
            setContentView(initView());
            //设置布局宽高
            setWidth(ViewGroup.LayoutParams.MATCH_PARENT);
            setHeight(ViewGroup.LayoutParams.MATCH_PARENT);
            //背景
            setBackgroundDrawable(new ColorDrawable());
            //点击外面销毁弹窗
            setOutsideTouchable(true);
            setClippingEnabled(false);
            setFocusable(true);
            //销毁事件监听
            setOnDismissListener(new OnDismissListener() {
                @Override
                public void onDismiss() {
                    if (mActionListener != null) {
                        mActionListener.onImageDialogDismiss();
                    }
                    mActionListener = null;
                    mRecyclerView = null;
                }
            });
        }
    
    //初始化RecyclerView
        private View initView() {
            View v = LayoutInflater.from(mContext).inflate(R.layout.view_image, null);
            mBg = v.findViewById(R.id.bg);
            mRecyclerView = v.findViewById(R.id.recyclerView);
            mRecyclerView.setHasFixedSize(true);
            mRecyclerView.setLayoutManager(new LinearLayoutManager(mContext, LinearLayoutManager.HORIZONTAL, false));
            mCover = v.findViewById(R.id.cover);
            //适配器
            PictureBrowsingAdapter adapter = new PictureBrowsingAdapter(mContext, mList);
            adapter.setActionListener(new PictureBrowsingAdapter.ActionListener() {
                @Override
                public void onImageClick() {
                    dismiss();
                }
            });
            mRecyclerView.setAdapter(adapter);
            if (mPosition >= 0 && mPosition < mList.size()) {
                mRecyclerView.scrollToPosition(mPosition);
            }
            return v;
        }
    
        public int getRecyclerViewCurrentPosition() {
            return recyclerViewCurrentPosition;
        }
    
        public void show() {
           //PopupWindow弹出位置
            showAtLocation(mParent, Gravity.BOTTOM, 0, 0);
        }
    
        public void setActionListener(ActionListener actionListener) {
            mActionListener = actionListener;
        }
        //自定义点击接口
        public interface ActionListener {
            void onImageDialogDismiss();
        }
    

    PictureBrowsingAdapter

    public class PictureBrowsingAdapter extends RecyclerView.Adapter<PictureBrowsingAdapter.Vh> {
    
        private Context mContext;
        private List<PictureBean> mList;//简单封装的实体类
        private LayoutInflater mInflater;//布局填充器
        private View.OnClickListener mOnClickListener;//点击监听
        private ActionListener mActionListener;  //自定义点击接口
    
        //传参_list
        public PictureBrowsingAdapter(Context context, List<PictureBean> list) {
            mContext=context;
            mList = new ArrayList<>();
            mList.addAll( list);
            mInflater = LayoutInflater.from(context);
            //销毁弹窗的点击事件,模仿微信,点击图片返回聊天界面
            mOnClickListener = new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if(!ClickUtil.canClick()){
                        return;
                    }
                    if (mActionListener != null) {
                        mActionListener.onImageClick();
                    }
                }
            };
        }
    
        @NonNull
        @Override
        public Vh onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            return new Vh(mInflater.inflate(R.layout.item_im_chat_img, parent, false));
        }
    
        @Override
        public void onBindViewHolder(@NonNull Vh vh, int position) {
            vh.setData(mList.get(position).getPicture());
        }
    
        @Override
        public int getItemCount() {
            return mList.size();
        }
    
        @Override
        public void onAttachedToRecyclerView(@NonNull RecyclerView recyclerView) {
            PagerSnapHelper pagerSnapHelper = new PagerSnapHelper();
            pagerSnapHelper.attachToRecyclerView(recyclerView);
        }
    
        class Vh extends RecyclerView.ViewHolder {
    
           //初始化ImageView
            ImageView mImg;
            public Vh(View itemView) {
                super(itemView);
    
                mImg =itemView.findViewById(R.id.MyZoomImageView);
                mImg.setOnClickListener(mOnClickListener);
    
            }
            //设置图片
            void setData(Bitmap bean) {
                mImg.setImageBitmap(bean);
            }
        }
    
        public void setActionListener(ActionListener actionListener) {
            mActionListener = actionListener;
        }
    
        public interface ActionListener {
            void onImageClick();
        }
    }
    

    条目的布局就一个ImageView item_im_chat_img

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#000"
         >
        <ImageView
            android:id="@+id/MyZoomImageView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@mipmap/ic_3"
            />
    </FrameLayout>
    

    使用方法

    PictureBrowsing mChatImageDialog = new PictureBrowsing(this, v,list);
    mChatImageDialog.show();
    

    作者:九狼
    链接:https://juejin.cn/post/7034536824613634084

    相关文章

      网友评论

        本文标题:Android仿微信图片浏览

        本文链接:https://www.haomeiwen.com/subject/pikzxdtx.html