Android中的自定义PopupWindow

最新推荐文章于 2025-05-15 16:47:28 发布

一叶难遮天

最新推荐文章于 2025-05-15 16:47:28 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Android基础业务文章标签： android 自定义PopupWindow 自定义View

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.youkuaiyun.com/JArchie520/article/details/53898776

Android基础业务专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一个用于项目中的回复框公共组件的封装过程，包括布局设计、PopupWindow的使用及其实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一次写博客，心情还有点小激动呢，一直在想着写点啥，刚好这两天项目中用到了一个回复框的公共组件，于是乎就想着把它封装成了一个工具类，供项目里面使用。好了，就拿这个开刀吧，给大家分享一下自己的实现方法，写的不好还请见谅，毕竟新手上路，老司机照顾一下！

首先来看一下这个PopupWindow的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/index_bgcolor"
    android:orientation="vertical">
    <!-- 头部标题 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingBottom="14dp"
        android:paddingTop="14dp">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="left|center_vertical"
            android:paddingLeft="14dp">

            <TextView
                android:id="@+id/common_reply_cancel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="取消"
                android:textColor="@color/ordernum" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="2dp"
                android:src="@drawable/comment" />

            <TextView
                android:id="@+id/common_reply_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="2dp"
                android:text="评论"
                android:textColor="@color/topbar" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="right|center_vertical"
            android:paddingRight="14dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="2dp"
                android:src="@drawable/publish" />

            <TextView
                android:id="@+id/common_reply_publish"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="2dp"
                android:text="发布"
                android:textColor="@color/topbar" />
        </LinearLayout>
    </LinearLayout>
    <!-- Edittext输入框控件 -->
    <EditText
        android:id="@+id/common_reply_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="14dp"
        android:layout_marginRight="14dp"
        android:background="@color/white"
        android:hint="标题(最多30个字)"
        android:paddingBottom="10dp"
        android:paddingLeft="14dp"
        android:paddingTop="10dp"
        android:textColor="@color/ordernum"
        android:textSize="14sp"
        android:visibility="gone" />

    <ImageView
        android:id="@+id/common_reply_xuxian"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="14dp"
        android:layout_marginRight="14dp"
        android:src="@drawable/xuxian"
        android:visibility="gone" />

    <EditText
        android:id="@+id/common_reply_edittext"
        android:layout_width="match_parent"
        android:layout_height="146dp"
        android:layout_marginLeft="14dp"
        android:layout_marginRight="14dp"
        android:background="@color/white"
        android:ellipsize="end"
        android:gravity="top"
        android:hint="我来说两句..."
        android:inputType="textMultiLine"
        android:maxEms="20"
        android:maxLines="100"
        android:paddingLeft="14dp"
        android:paddingTop="10dp"
        android:textColorHint="@color/personset_textcolor"
        android:textSize="14sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="14dp"
        android:layout_marginRight="14dp"
        android:background="@color/white"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/common_reply_faceimage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="14dp"
            android:src="@drawable/bbs_face_image" />

        <ImageView
            android:id="@+id/common_reply_select_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="14dp"
            android:src="@drawable/bbs_select_image"
            android:visibility="gone" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <GridView
            android:id="@+id/common_reply_gridview"
            android:layout_width="match_parent"
            android:layout_height="160dp"
            android:layout_gravity="center"
            android:layout_marginLeft="14dp"
            android:layout_marginRight="14dp"
            android:background="@color/white"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:gravity="center"
            android:horizontalSpacing="10dp"
            android:listSelector="#00000000"
            android:numColumns="6"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:scrollbars="none"
            android:stretchMode="columnWidth"
            android:verticalSpacing="30dp"
            android:visibility="gone" />

        <LinearLayout
            android:id="@+id/common_reply_ll_feedback"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="14dp"
            android:layout_marginRight="14dp"
            android:background="@color/white"
            android:orientation="vertical"
            android:visibility="gone">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/xuxian" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingLeft="14dp"
                android:paddingTop="10dp"
                android:text="请选择问题类型:"
                android:textColor="#666"
                android:textSize="14sp" />

            <GridView
                android:id="@+id/common_reply_feedback"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:numColumns="3"
                android:listSelector="@color/white"
                android:paddingBottom="5dp"
                android:paddingTop="5dp"
                android:scrollbars="none" />

        </LinearLayout>

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="31dp" />
</LinearLayout>

效果图为：

下面再来看一下代码里面的具体实现：

首先我们需要定义一个类去继承父类PopupWindow：

public class CommonReplyUtils extends PopupWindow

然后我们在构造方法中为它设置宽高以及点击外部是否消失等相关属性：

public CommonReplyUtils(final Activity context) {
    LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    rootView = inflater.inflate(R.layout.bbs_common_reply, null);
    int w = context.getWindowManager().getDefaultDisplay().getWidth();
    int h = context.getWindowManager().getDefaultDisplay().getHeight();
    this.setContentView(rootView);
    this.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);
    this.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);
    this.setFocusable(true);
    this.setOutsideTouchable(true);
    this.setBackgroundDrawable(new BitmapDrawable()); //这样设置才能点击屏幕外 dismiss窗口
}

然后我们可以为页面中的控件创建相应的get方法，返回对应的View，这样我们可以在具体的调用处对这个View进行具体的操作，例如改变TexiView的显示文本等等，例如下面的实现方法，简单的举几个例子说明：

//发布按钮
public TextView getPublishView(){
    return publishView;
}

//输入框
public EditText getCommentView(){
    return commentView;
}

//表情图片
public ImageView getFaceImage(){
    return faceImage;
}

然后我们还可以给对应的按钮设置对应的监听事件，供调用处进行具体的实现：

//发布按钮的监听
public void setOnPublishListener(View.OnClickListener listener){
    publishView.setOnClickListener(listener);
}

最后定义一个方法设置PopupWindow的显示与隐藏：

/**
 * 显示popupWindow
 */
public void showPopupWindow(View parent){
    if (!this.isShowing()){
        this.showAtLocation(parent, Gravity.BOTTOM,0,0);
    }else {
        this.dismiss();
    }
}

相关的控件都有了，我们可以到需要使用它的地方调用这个类进行实例化，进行具体的逻辑实现：

CommonReplyUtils replyWindow = new CommonReplyUtils(this);

replyWindow.showPopupWindow(layout);

这里的layout是你Activity中的最外层控件，好了，到这里，我们的工具类就写完了。

附CommonReplyUtils的源码：

package com.zhibeizhen.antusedcar.bbs.tools;

import android.app.Activity;
import android.content.Context;
import android.graphics.drawable.BitmapDrawable;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.PopupWindow;
import android.widget.TextView;

import com.zhibeizhen.antusedcar.R;

/**
 * Created by Jarchie on 16/12/20.
 * 创建公共的弹出框组件,即回复控件
 */

public class CommonReplyUtils extends PopupWindow{
    private LinearLayout feedBackContainer;
    private GridView feedBackList;
    private ImageView selectImage;
    private ImageView xuxianImage;
    private EditText titleView;
    private TextView nameView;
    private GridView gridView;
    private View rootView;
    private TextView cancelView,publishView;
    private EditText commentView;
    private ImageView faceImage;

    public CommonReplyUtils(final Activity context){
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        rootView = inflater.inflate(R.layout.bbs_common_reply, null);
        int w = context.getWindowManager().getDefaultDisplay().getWidth();
        int h = context.getWindowManager().getDefaultDisplay().getHeight();
        this.setContentView(rootView);
        this.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);
        this.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);
        this.setFocusable(true);
        this.setOutsideTouchable(true);
        this.setBackgroundDrawable(new BitmapDrawable()); //这样设置才能点击屏幕外 dismiss窗口
        cancelView = (TextView) rootView.findViewById(R.id.common_reply_cancel);
        publishView = (TextView) rootView.findViewById(R.id.common_reply_publish);
        commentView = (EditText) rootView.findViewById(R.id.common_reply_edittext);
        faceImage = (ImageView) rootView.findViewById(R.id.common_reply_faceimage);
        gridView = (GridView) rootView.findViewById(R.id.common_reply_gridview);
        titleView = (EditText) rootView.findViewById(R.id.common_reply_title);
        nameView = (TextView) rootView.findViewById(R.id.common_reply_name);
        xuxianImage = (ImageView) rootView.findViewById(R.id.common_reply_xuxian);
        selectImage = (ImageView) rootView.findViewById(R.id.common_reply_select_image);
        feedBackContainer = (LinearLayout) rootView.findViewById(R.id.common_reply_ll_feedback);
        feedBackList = (GridView) rootView.findViewById(R.id.common_reply_feedback);
    }

    /***********************以下部分回传View,供调用处方便使用*************************/
    //取消按钮
    public TextView getCancelView(){
        return cancelView;
    }

    //发布按钮
    public TextView getPublishView(){
        return publishView;
    }

    //输入框
    public EditText getCommentView(){
        return commentView;
    }

    //表情图片
    public ImageView getFaceImage(){
        return faceImage;
    }

    //表情库
    public GridView getGridView(){
        return gridView;
    }

    //评论 、说说
    public TextView getNameView(){
        return nameView;
    }

    //标题框
    public EditText getTitleView(){
        return titleView;
    }

    //虚线分割图片
    public ImageView getXuxianImage(){
        return xuxianImage;
    }

    //选择图片上传
    public ImageView getSelectImage(){
        return selectImage;
    }

    //质量反馈选项
    public LinearLayout getFeedBackContainer(){
        return feedBackContainer;
    }

    //质量反馈选项列表
    public GridView getFeedBackList(){
        return feedBackList;
    }

    /**
     * 按钮的点击事件
     */

    //取消按钮的监听
    public void setOnCancelListener(View.OnClickListener listener){
        cancelView.setOnClickListener(listener);
    }

    //发布按钮的监听
    public void setOnPublishListener(View.OnClickListener listener){
        publishView.setOnClickListener(listener);
    }

    //表情按钮的监听
    public void setOnFaceImgListener(View.OnClickListener listener){
        faceImage.setOnClickListener(listener);
    }

    /**
     * 显示popupWindow
     */
    public void showPopupWindow(View parent){
        if (!this.isShowing()){
            this.showAtLocation(parent, Gravity.BOTTOM,0,0);
        }else {
            this.dismiss();
        }
    }

}