使用PopupWindow实现功能,及步骤

最新推荐文章于 2025-06-18 14:19:21 发布

csdn小宇

最新推荐文章于 2025-06-18 14:19:21 发布

阅读量4.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Android 文章标签： PopupWindow

本文链接：https://blog.youkuaiyun.com/xiaoyu756324223/article/details/53965961

Android 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何使用PopupWindow来实现弹窗效果。首先，需要在build.gradle中引入ButterKnife库或导入jar包。接着，通过Zelezny插件简化视图绑定。在布局中设置ToolBar颜色，并利用ButterKnife插件的注解方式绑定控件。在Java代码中，初始化PopupWindow并加载布局及动画资源文件，最后在ListView中设置文本布局。

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

PopupWindow详细介绍:

PopupWindow是一个以弹窗方式呈现的控件，可以用来显示任意视图(View)，而且会浮动在当前活动(activity)的顶部”。因此我们可以通过PopupWindow实现各种各样的弹窗效果,PopupWindow自定义布局比较方便，而且在显示位置比较自由不受限制，因此受到众多开发者的青睐。

实现效果图:

关于实现这个功能准备以下几点:

1:在build.gradle中加入：compile 'com.jakewharton:butterknife:7.0.1'或者导入butterknife的jar包

在最早我们通常用findviewbyid来进行绑定控件,这里我用Butterkinfe注解的方式来绑定空件,AndroidStudio有一个(Zelezny)这个插件,可以使大家在日常开发中更有效的缩短时间,下面教大家如何安装Zelezny这个插件:

(1):打开Settings选择Plugins,点击Browse Repositories

(2):在搜索框中输入Zelezny,选择Android ButterKnife Zelezny,点击lnstall

(3):最后点击Restart Android Studio重新启动即可

2:安装完插件以后教大家如何使用,首先我们将布局展示给大家:

<?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="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@color/app_yellow">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="周边"
            android:textColor="@color/whiter"
            android:textSize="20dp" />
    </android.support.v7.widget.Toolbar>

    <!--从这里开始，即iushi自定义多条件-->
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#E2E2E2"></View>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@color/whiter"
        android:orientation="horizontal">

        <LinearLayout
            android:id="@+id/supplier_list_product"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/supplier_list_product_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="全部"
                android:textSize="14dp" />

            <ImageView
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:src="@mipmap/icon_arrow_down" />
        </LinearLayout>


        <LinearLayout
            android:id="@+id/supplier_list_sort"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/supplier_list_sort_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="综合排序"
                android:textSize="14dp" />

            <ImageView
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:src="@mipmap/icon_arrow_down" />
        </LinearLayout>


        <LinearLayout
            android:id="@+id/supplier_list_activity"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/supplier_list_activity_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="优惠活动"
                android:textSize="14dp" />

            <ImageView
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:src="@mipmap/icon_arrow_down" />
        </LinearLayout>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#E2E2E2"></View>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ListView
            android:scrollbarStyle="outsideOverlay"
            android:id="@+id/supplier_list_lv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp"
            android:background="#00000000"
            android:divider="#f0f0f0"
            android:dividerHeight="10dp"
            android:fadingEdge="none"
            android:listSelector="#00000000"></ListView>
    </RelativeLayout>

</LinearLayout>

注意:设置ToolBar背景颜色:

在values下的styles里设置ToolBar颜色

设置ToolBar颜色

(1):在上面的代码中我们可以看出,每个控件都有id关,这里教大家使用ButterKnife 插件以注解的方式去绑定控件,下面以图的方式呈现给大家:

(2):按住Alt+lnsert 选择Generate Butterknife lnjections

(3)最后一步选择你要绑定的控件:

3:Java代码:

//popuwindow下拉列表，属于组合式控件
public class MainActivity extends AppCompatActivity {

    @Bind(R.id.supplier_list_product_tv)
    TextView mProductTv;  // 可以修改名称
    @Bind(R.id.supplier_list_product)
    LinearLayout mProduct; // 可以修改名称
    @Bind(R.id.supplier_list_sort_tv)
    TextView mSortTv;
    @Bind(R.id.supplier_list_sort)
    LinearLayout mSort; // 可以修改名称
    @Bind(R.id.supplier_list_activity_tv)
    TextView mActivityTv;
    @Bind(R.id.supplier_list_activity)
    LinearLayout mActivity; // 可以修改名称
    @Bind(R.id.supplier_list_lv)
    ListView mSupplierListLv;


    //三个popuwindow所需的数据集合
    private ArrayList<Map<String, String>> mMenuData1;
    private ArrayList<Map<String, String>> mMenuData2;
    private ArrayList<Map<String, String>> mMenuData3;

    //popuwindow所用的listView
    private ListView mPopListView;
    private PopupWindow mPopupMenu;
    //设置三个popuwindow所需的适配器
    private SimpleAdapter mMenuAdapter1;
    private SimpleAdapter mMenuAdapter2;
    private SimpleAdapter mMenuAdapter3;

    //设置的一个标记,方便对点击不同LinearLayout做对应的操作
    private int menuIndex = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //ButterKnife的初始化
        ButterKnife.bind(this);

        //初始化Popuwindow显示的数据
        initData();
        //初始化popuwindow控件
        initPopMenu();
    }

    //初始化数据,popupwindow所需,一共有三个popupwindow,所以做3个盒子数据,这里是假数据,真实数据从网上获取.
    private void initData() {
        //创建一个存放popupwindow加载数据的大盒子1,Map集合(键,值)
        mMenuData1 = new ArrayList<>();
        //存放String的字符串数组
        String[] menuStr1 = new String[]{"全部", "粮油", "衣服", "图书", "电子产品",
                "酒水饮料", "水果"};
        //创建一个小盒子,放编号和值
        Map<String, String> map1;
        for (int i = 0, len = menuStr1.length; i < len; ++i) {
            map1 = new HashMap<String, String>();
            map1.put("name", menuStr1[i]);
            mMenuData1.add(map1);
        }
        //创建一个存放popupwindow加载数据的大盒子2,Map集合(键,值)
        mMenuData2 = new ArrayList<>();
        String[] menuStr2 = new String[]{"综合排序", "配送费最低"};
        Map<String, String> map2;
        for (int i = 0, len = menuStr2.length; i < len; ++i) {
            map2 = new HashMap<String, String>();
            map2.put("name", menuStr2[i]);
            mMenuData2.add(map2);
        }
        //创建一个存放popupwindow加载数据的大盒子3,Map集合(键,值)
        mMenuData3 = new ArrayList<>();
        String[] menuStr3 = new String[]{"优惠活动", "特价活动", "免配送费",
                "可在线支付"};
        Map<String, String> map3;
        for (int i = 0, len = menuStr3.length; i < len; ++i) {
            map3 = new HashMap<String, String>();
            map3.put("name", menuStr3[i]);
            mMenuData3.add(map3);
        }
    }

    //初始化popuwindow
    private void initPopMenu() {
        //把包裹的ListVIew的布局XML文件转换为VIew对象
        View popView = LayoutInflater.from(this).inflate(R.layout.popuwin_supplier_list, null);
        //创建popuwindow对象,参数1popuwindow要显示的布局,参数2,3:定义popuwindow所占用的宽高
        mPopupMenu = new PopupWindow(popView, LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
        //设置popuwindow外部可以点击
        mPopupMenu.setOutsideTouchable(true);
        //是popuwindow里填充的listView拥有焦点
        mPopupMenu.setFocusable(true);
        //如果想要让popuwindow具有一些操作,比如动画效果之类的,必须给popuwindow设置背景
        mPopupMenu.setBackgroundDrawable(new ColorDrawable());
        //设置popuwindow的动画效果
        mPopupMenu.setAnimationStyle(R.style.popwin_anim_style);
        //设置popuwindow监督事件
        mPopupMenu.setOnDismissListener(new PopupWindow.OnDismissListener() {
            @Override
            public void onDismiss() {
                //设置TextView的颜色
                mProductTv.setTextColor(Color.parseColor("#5a5959"));
                mSortTv.setTextColor(Color.parseColor("#5a5959"));
                mActivityTv.setTextColor(Color.parseColor("#5a5959"));
            }
        });
        //点击popuwindow以外的区域,使popuwindow消失(实际就是让ListView下面的LinerLayout,设置点击事件)
        LinearLayout list_bottom = (LinearLayout) popView.findViewById(R.id.popwin_supplier_list_bottom);
        list_bottom.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //当LinerLayout被点击时,这popuwindow消失
                mPopupMenu.dismiss();
            }
        });

        //获取listVIew对象
        mPopListView = (ListView) popView.findViewById(R.id.popwin_supplier_list_lv);
        //点击popuwindow以外区域时,使popuwindow消失.在这里得到了ListView下面的LinearLayout,设置监听事件
/*SimpleAdapter 简单数据适配器:正好有一组数据,是Map集合放到ArrayList集合,就可以使用这个适配器了,不是太常用,设置数据太麻烦.
context:上下文    data:设置所有条目的数据,一个ArrayList大集合(包含所有条目信息),里面又有一个map集合(通过map来设置一个条目的数据)
resource:引用布局资源(可以引用复杂的布局.xml文件,区别于ArrayAdapter)
from:String数组,装map条目内容的键            to:int数组,装控件id  二者具有映射关系,代表对应的内容放到对应的位置*//*
ArrayList<Map<String,Object>> data=new ArrayList<Map<String,Object>>();
        //注意:一个map,代表一条item的数据.
        Map<String,Object> map=new HashMap<String, Object>();
        ListView对象.setAdapter(new SimpleAdapter(context, data, resource, from, to));*/
        //创建SimpleAdapter,一个listView安卓原生封装的适配器
        mMenuAdapter1 = new SimpleAdapter(this, mMenuData1, R.layout.item_listview_popuwindow, new String[]{"name"}, new int[]{R.id.listview_popwind_tv});

        mMenuAdapter2 = new SimpleAdapter(this, mMenuData2, R.layout.item_listview_popuwindow, new String[]{"name"}, new int[]{R.id.listview_popwind_tv});

        mMenuAdapter3 = new SimpleAdapter(this, mMenuData3, R.layout.item_listview_popuwindow, new String[]{"name"}, new int[]{R.id.listview_popwind_tv});

        //设置Popuwindow里的listView点击事件,当点击listVIew里的一个item时,把这个item数据显示到最上方
        mPopListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position, long ld) {
                //首先让Popuwindow消失
                mPopupMenu.dismiss();
                //设置一个标识,以方便做对应LinerLayout的点击事件.
                switch (menuIndex) {
                    case 0:
                        //获取点击对应条目的文本数据
                        String currentProduct = mMenuData1.get(position).get("name");
                        //把文本数据设置到原始布局里的文本
                        mProductTv.setText(currentProduct);
                        break;
                    case 1:
                        String currentSort = mMenuData2.get(position).get("name");
                        mSortTv.setText(currentSort);
                        break;
                    case 2:
                        String currentAct = mMenuData3.get(position).get("name");
                        mActivityTv.setText(currentAct);
                        break;
                    default:
                        break;
                }
            }
        });
    }

    //三个Popuwindow所依附的LinearLayout,设置点击事件
    @OnClick({R.id.supplier_list_product, R.id.supplier_list_sort, R.id.supplier_list_activity})
    public void onClick(View view) {
        switch (view.getId()) {
            //第一个Popuwindow所执行的点击后的逻辑
            case R.id.supplier_list_product:
                //设置其TextView点击时为绿色
                mProductTv.setTextColor(Color.parseColor("#39ac69"));
                //设置Popuwindow里的ListView适配器
                mPopListView.setAdapter(mMenuAdapter1);
                //让Popuwindow显示出来.  参数1:VIew对象,决定了在哪个控件下显示,  参数2决定了Popuwindow的坐标,X轴,Y轴
                mPopupMenu.showAsDropDown(mProduct, 0, 2);
                menuIndex = 0;
                break;
            //第2个Popuwindow所执行的点击后的逻辑
            case R.id.supplier_list_sort:
                mSortTv.setTextColor(Color.parseColor("#39ac69"));
                mPopListView.setAdapter(mMenuAdapter2);
                mPopupMenu.showAsDropDown(mSort, 0, 2);
                menuIndex = 1;
                break;
            //第3个Popuwindow所执行的点击后的逻辑
            case R.id.supplier_list_activity:
                mActivityTv.setTextColor(Color.parseColor("#39ac69"));
                mPopListView.setAdapter(mMenuAdapter3);
                mPopupMenu.showAsDropDown(mActivity, 0, 2);
                menuIndex = 2;
                break;

            default:
                break;
        }
    }

}

注意:在上面代码需注意几点:

1:在初始化PopupWindow中加载下拉文本布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="#5000"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
        android:id="@+id/popwin_supplier_list_lv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:cacheColorHint="#00000000"
        android:divider="#0000"
        android:dividerHeight="0dp"
        android:fadingEdge="none"
        android:listSelector="#00000000"
        android:scrollbarStyle="outsideOverlay"
        android:scrollbars="none"
        android:scrollingCache="false"
        >
    </ListView>

    <LinearLayout
        android:id="@+id/popwin_supplier_list_bottom"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="0dp"
        android:orientation="vertical">

    </LinearLayout>

</LinearLayout>

2:在初始化PopupWindow中加载PopupWindow动画资源文件:

(1)在res下创建anim,在anim中创建still资源文件:

(2)设置PopupWindow动画

3:在获取ListView对象里设置文本布局:

文本布局:

<?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="#ffffff"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/listview_popwind_tv"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:gravity="center_vertical"
            android:text="地点"
            android:textColor="#2e1503"
            android:textSize="18dp" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:background="#E2E2E2" />

</LinearLayout>