基于PopWindow实现的Android弹窗视图

可以的呀.

于 2024-06-11 00:02:05 发布

阅读量176

点赞数 9

文章标签： android

本文链接：https://blog.csdn.net/qq_75085852/article/details/139551626

版权

手机上的软件有各种的广告弹窗和对应的点击实现跳转另外的窗口令人防不胜防，我接下来会实现简单的弹窗视图，具体的其他小功能可自行添加视图点击事件。

实现弹窗我们需要三个文件：MainActivity,activity_main.xml,popup_layout.xml(弹窗视图，可在内部修饰)。

首先我们在MainActivity使用一个按钮点击事件打开弹窗：

 findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //
                //
               }
}

activity_main.xml只需要一个按钮布局就可以了：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:text="button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

然后回到MainActivity加载弹窗视图，使用getLayoutInflater().inflate方法将弹窗布局文件popup_layout加载为一个View对象，popupView就是这个加载好的视图。：

View popupView = getLayoutInflater().inflate(R.layout.popup_layout, null);

然后调用imageView作为弹窗内的视图，由于popupView是弹窗的根视图，不能直接通过findViewById引用里面的视图，所以通过popupView.findViewById方法获取弹窗内的视图引用。

!!!!!!!切记，如果要在弹窗里面添加视图如Textview，ImageView，所有的弹窗视图必须在这个点击事件里面添加，不然无法引用。

//由于弹窗里的视图不能直接通过findViewById引用，所以需要使用加载的弹窗视图popupView
                TextView textView = popupView.findViewById(R.id.textView);
                ImageView imageView = popupView.findViewById(R.id.imageView);
                ImageView imageView1 = popupView.findViewById(R.id.imageView1);
                ImageView imageView2 = popupView.findViewById(R.id.imageView1);
                ImageView imageView3 = popupView.findViewById(R.id.imageView2);

                // 创建PopupWindow实例
                PopupWindow popupWindow = new PopupWindow(popupView,
                        convertDpToPx(320), // 宽度为320dp转换为像素值这里使用的构造的方法convertDpToPx（）
                        convertDpToPx(380)); // 高度为380dp转换为像素值

                // 设置点击外部可消失
                popupWindow.setOutsideTouchable(true);
                popupWindow.setBackgroundDrawable(new ColorDrawable());

                // 设置弹窗动画
                popupWindow.setAnimationStyle(android.R.style.Animation_Dialog);

                // 显示弹窗，可以指定位置，这里选择屏幕中心
                popupWindow.showAtLocation(v, Gravity.CENTER, 0, 0);

                //关闭弹窗点击事件
                textView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        popupWindow.dismiss();//关闭弹窗
                    }
                });

这里还需要一个构造方法convertDpToPx 方法是用于将 dp（设备独立像素）转换为 px（像素），以便在不同屏幕密度下正确显示视图。这是一个常见的辅助方法，下面是对该方法的详细解释：

public int convertDpToPx(int dp) {
        return (int) (dp * getResources().getDisplayMetrics().density);
    }

主界面的视图布局格式编辑完成后，接下来是弹窗布局，弹窗布局的主布局我采用了简单的LinearLayout布局，我用了四个系统图片作为弹窗内容，以及一个textview作为关闭点击事件文本，具体如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="320dp"
    android:layout_height="380dp"
    android:background="#7D56C3"
    android:orientation="vertical"
    android:padding="10dp">
    <!--    设置弹窗大小，因为不可能占满整个屏幕吧-->
    <!--设置垂直排列和边距10dp-->


    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginTop="20dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_launcher_background" />

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="20dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_launcher_background" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginTop="20dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/imageView"
            app:srcCompat="@drawable/ic_launcher_background" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="20dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/imageView1"
            app:srcCompat="@drawable/ic_launcher_background" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="关闭"
            android:textColor="#E8DCDC"
            android:textSize="30dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/imageView3" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>

以下是MainActivity全代码：

package com.hnucm.myapplication4;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.ImageView;
import android.widget.PopupWindow;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 从布局文件中加载弹窗视图
                View popupView = getLayoutInflater().inflate(R.layout.popup_layout, null);

                //由于弹窗里的视图不能直接通过findViewById引用，所以需要使用加载的弹窗视图popupView
                TextView textView = popupView.findViewById(R.id.textView);
                ImageView imageView = popupView.findViewById(R.id.imageView);
                ImageView imageView1 = popupView.findViewById(R.id.imageView1);
                ImageView imageView2 = popupView.findViewById(R.id.imageView1);
                ImageView imageView3 = popupView.findViewById(R.id.imageView2);

                // 创建PopupWindow实例
                PopupWindow popupWindow = new PopupWindow(popupView,
                        convertDpToPx(320), // 宽度为320dp转换为像素值这里使用的构造的方法convertDpToPx（）
                        convertDpToPx(380)); // 高度为380dp转换为像素值

                // 设置点击外部可消失
                popupWindow.setOutsideTouchable(true);
                popupWindow.setBackgroundDrawable(new ColorDrawable());

                // 设置弹窗动画
                popupWindow.setAnimationStyle(android.R.style.Animation_Dialog);

                // 显示弹窗，可以指定位置，这里选择屏幕中心
                popupWindow.showAtLocation(v, Gravity.CENTER, 0, 0);

                //关闭弹窗点击事件
                textView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        popupWindow.dismiss();//关闭弹窗
                    }
                });
            }
        });
    }
    public int convertDpToPx(int dp) {
        return (int) (dp * getResources().getDisplayMetrics().density);
    }
}

以下是文件图片：

activity_main.xml图片：

popup_layout.xml图片：

可以的呀.

关注

9
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
基于PopWindow实现的Android弹窗视图

实现弹窗我们需要三个文件：MainActivity,activity_main.xml,popup_layout.xml(弹窗视图，可在内部修饰)。手机上的软件有各种的广告弹窗和对应的点击实现跳转另外的窗口令人防不胜防，我接下来会实现简单的弹窗视图，具体的其他小功能可自行添加视图点击事件。切记，如果要在弹窗里面添加视图如Textview，ImageView，所有的弹窗视图必须在这个点击事件里面添加，不然无法引用。然后调用imageView作为弹窗内的视图，由于。是弹窗的根视图，不能直接通过。
复制链接

扫一扫