“This is the 12th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Realize the principle of

Custom PopupWindow + RecyclerView + TouchImageView

PopupWindow vs. AlertDialog

The key difference is that an AlertDialog cannot specify the location of the display, but defaults to the middle of the screen (which can also be changed by setting the WindowManager parameter). PopupWindow is flexible enough to specify the display location. There are three basic conditions that must be set to generate a PopupWindow:

The View contentView,int width, intHeight;Copy the code

It’s impossible to pop any less

PictureBrowsing

The layout file view_image.xml for PictureBrowsing

      
<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="Save picture"
        android:textSize="19dp"
        android:background="@drawable/bg_operator"
        />

    <ImageView
        android:id="@+id/cover"
        android:layout_width="0dp"
        android:layout_height="0dp"
        />
</FrameLayout>
Copy the code

rewritePopupWindowInside is a horizontal RecyclerView

Complete code is relatively simple, mainly RecyclerView use

public class PictureBrowsing extends PopupWindow {

    private Context mContext;/ / context
    private View mParent;
    private View mBg;// Background image
    private RecyclerView mRecyclerView;
    private ImageView mCover;// The current map
    
    private List<PictureBean> mList;
    private int mPosition;// The position of the current surface
    private ActionListener mActionListener; // Customize the click interface

    private int recyclerViewCurrentPosition = -1; // RecyclerView current position
    private TextView savePicture;// Save the image

  // constructor
    public PictureBrowsing(Context context, View parent, List<PictureBean> bean) {
        mContext = context;
        mParent = parent;
        mList = new ArrayList<>();
        mList .addAll( bean);
        mPosition = 1;

        // Set the layout
        setContentView(initView());
        // Set the layout width and height
        setWidth(ViewGroup.LayoutParams.MATCH_PARENT);
        setHeight(ViewGroup.LayoutParams.MATCH_PARENT);
        / / the background
        setBackgroundDrawable(new ColorDrawable());
        // Click on the outside destroy popover
        setOutsideTouchable(true);
        setClippingEnabled(false);
        setFocusable(true);
        // Destroy event listeners
        setOnDismissListener(new OnDismissListener() {
            @Override
            public void onDismiss(a) {
                if(mActionListener ! =null) {
                    mActionListener.onImageDialogDismiss();
                }
                mActionListener = null;
                mRecyclerView = null; }}); }// Initialize RecyclerView
    private View initView(a) {
        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);
        / / adapter
        PictureBrowsingAdapter adapter = new PictureBrowsingAdapter(mContext, mList);
        adapter.setActionListener(new PictureBrowsingAdapter.ActionListener() {
            @Override
            public void onImageClick(a) { dismiss(); }}); mRecyclerView.setAdapter(adapter);if (mPosition >= 0 && mPosition < mList.size()) {
            mRecyclerView.scrollToPosition(mPosition);
        }
        return v;
    }

    public int getRecyclerViewCurrentPosition(a) {
        return recyclerViewCurrentPosition;
    }

    public void show(a) {
       //PopupWindow popup position
        showAtLocation(mParent, Gravity.BOTTOM, 0.0);
    }

    public void setActionListener(ActionListener actionListener) {
        mActionListener = actionListener;
    }
    // Customize the click interface
    public interface ActionListener {
        void onImageDialogDismiss(a);
    }
Copy the code

PictureBrowsingAdapter

public class PictureBrowsingAdapter extends RecyclerView.Adapter<PictureBrowsingAdapter.Vh> {

    private Context mContext;
    private List<PictureBean> mList;// Simply wrapped entity class
    private LayoutInflater mInflater;// Layout filler
    private View.OnClickListener mOnClickListener;// Click listen
    private ActionListener mActionListener;  // Customize the click interface
    
    / / the _list refs
    public PictureBrowsingAdapter(Context context, List<PictureBean> list) {
        mContext=context;
        mList = new ArrayList<>();
        mList.addAll( list);
        mInflater = LayoutInflater.from(context);
        // Destroy the pop-up click event, imitate wechat, click the picture to return to the chat interface
        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(a) {
        return mList.size();
    }


    @Override
    public void onAttachedToRecyclerView(@NonNull RecyclerView recyclerView) {
        PagerSnapHelper pagerSnapHelper = new PagerSnapHelper();
        pagerSnapHelper.attachToRecyclerView(recyclerView);
    }

    class Vh extends RecyclerView.ViewHolder {
   
       // Initialize the ImageView
        ImageView mImg;
        public Vh(View itemView) {
            super(itemView);

            mImg =itemView.findViewById(R.id.MyZoomImageView);
            mImg.setOnClickListener(mOnClickListener);

        }
        // Set the image
        void setData(Bitmap bean) { mImg.setImageBitmap(bean); }}public void setActionListener(ActionListener actionListener) {
        mActionListener = actionListener;
    }

    public interface ActionListener {
        void onImageClick(a); }}Copy the code

The layout of the entry is just an ImageView item_IM_chat_img

      
<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>
Copy the code

Method of use

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

rendering