Android DiaLog全屏设置,带有叉号的弹窗,这个弹窗分为两个部分,一个是主体,另一个是关闭部分。自定义布局弹窗

发布于:2025-04-05 ⋅ 阅读:(22) ⋅ 点赞:(0)

1.先上图。要实现的效果图。
在这里插入图片描述

2.这是我自己实现的效果图,是不是跟效果图一摸一样
在这里插入图片描述
来看看整体效果
在这里插入图片描述

3.我把自己实现的效果图的代码写出来。如下就是我的代码
3.1首先是MainActivity类

import androidx.appcompat.app.AppCompatActivity;

import android.app.AlertDialog;
import android.app.Dialog;
import android.content.DialogInterface;
import android.os.Build;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import com.example.myapplication001.R;

public class MainActivity extends AppCompatActivity {

    private TextView tv;
    private Dialog bottomDialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tv = (TextView) findViewById(R.id.name);

        tv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                //创建dialog,同时设置dialog主题
                bottomDialog = new Dialog(MainActivity.this, R.style.BottomDialog);
                //绘制dialog  UI视图
                View contentView = LayoutInflater.from(MainActivity.this).inflate(R.layout.dialog_sharetofriend_and, null);

                //给dialog添加view
                bottomDialog.setContentView(contentView);
                //这里给布局的控件设置点击事件
                bottomDialog.getWindow().findViewById(R.id.exit).setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        /*............*/
                        bottomDialog.dismiss();
                    }
                });

                //为绘制的view设置参数
                ViewGroup.LayoutParams layoutParams = contentView.getLayoutParams();
                //设置为全屏的宽
                layoutParams.width = getResources().getDisplayMetrics().widthPixels;
                contentView.setLayoutParams(layoutParams);
                //设置dialog位置
                bottomDialog.getWindow().setGravity(Gravity.BOTTOM);
                //添加进出场动画
                //    bottomDialog.getWindow().setWindowAnimations(R.style.BottomDialog_Animation);
                //允许点击外部退出dialog
                bottomDialog.setCanceledOnTouchOutside(true);
                bottomDialog.setCancelable(true);

                //show  dialog
                bottomDialog.show();
            }
        });

    }

}

3.2这个BottomDialog的主题设置dialog的相关属性

    <!--底部弹框属性设置-->
    <style name="BottomDialog" parent="@style/Base.V7.Theme.AppCompat.Light.Dialog">
        <!--无标题-->
        <item name="android:windowNoTitle">true</item>
        <!--键盘状态-->
        <item name="android:windowSoftInputMode">stateUnspecified</item>
        <!--dialog弹出时activity的背景-->
        <item name="android:windowBackground">@android:color/transparent</item>
        <!-- 浮于Activity之上 -->
        <item name="android:windowIsFloating">true</item>
        <!-- 边框 -->
        <item name="android:windowFrame">@null</item>
    </style>

3.3主MainActivity类的activity_main布局代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.xf.ap.MainActivity">

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        android:layout_marginTop="100dp"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:visibility="visible" />

    <LinearLayout
        android:id="@+id/ff"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="你好,我在写全屏弹窗,带有叉号的弹窗"
            android:textColor="@color/teal_200"
            android:textSize="34sp" />
    </LinearLayout>

</RelativeLayout>

3.4弹窗的布局代码dialog_sharetofriend_and

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal|center_vertical"
    android:background="@android:color/transparent">

    <!--返回按钮-->
    <ImageView
        android:id="@+id/exit"
        android:layout_width="66dp"
        android:layout_height="66dp"
        android:layout_below="@id/imageView"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:layout_marginBottom="100dp"
        android:src="@mipmap/ic6" />


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:background="#F44336" />

</RelativeLayout>

3.5叉号的图片
ic6.jpg
在这里插入图片描述

3.6你也可以参考这篇文章,这篇文章也可以实现

https://blog.csdn.net/qq_40543575/article/details/81289470