devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Android开发-自定义弹框篇（一）_android 自定义弹窗

作者：知新_RL | 2024-03-26 17:08:47

赞

踩

android 自定义弹窗

        本文来记录一下博主在Android开发中用到的自定义弹框的实现流程及方法，文章最后会贴上本篇博客使用的示例程序连接。

        一、Android Studio新建工程

        

 

 

        新建工程之后运行一次，确保工程是没有问题的。

        二、功能

                1、添加JAVA工具类的存放组

                        首先我们添加一个组用于存放这些工具类

         2、添加JAVA工具类

                创建一个 DialogManager 类，一个 DialogView 类。

 DialogManager 类代码：

  1. package com.example.my_dialog_test.dialog;
  2. import android.content.Context;
  3. import android.view.Gravity;
  4. import com.example.my_dialog_test.R;
  5.  
  6. public class DialogManager {
  7.     private static volatile DialogManager mInstance = null;
  8.  
  9.     private DialogManager() {
  10.  
  11.     }
  12.  
  13.     public static DialogManager getInstance() {
  14.         if (mInstance == null) {
  15.             synchronized (DialogManager.class) {
  16.                 if (mInstance == null) {
  17.                     mInstance = new DialogManager();
  18.                 }
  19.             }
  20.         }
  21.         return mInstance;
  22.     }
  23.  
  24.     public DialogView initView(Context context, int layout) {
  25.         return new DialogView(context,layout, R.style.CustomDialog, Gravity.CENTER);
  26.     }
  27.  
  28.     public DialogView initView(Context context,int layout,int gravity) {
  29.         return new DialogView(context,layout, R.style.mydialog, gravity);
  30.     }
  31.  
  32.     // 显示弹框
  33.     public void show(DialogView view) {
  34.         if (view != null) {
  35.             if (!view.isShowing()) {
  36.                 view.show();
  37.             }
  38.         }
  39.     }
  40.  
  41.     // 隐藏弹框
  42.     public void hide(DialogView view) {
  43.         if (view != null) {
  44.             if (view.isShowing()) {
  45.                 view.dismiss();
  46.             }
  47.         }
  48.     }
  49. }
  50.  
  51.

        DialogView 类代码：

  1. package com.example.my_dialog_test.dialog;
  2.  
  3. import android.app.Dialog;
  4. import android.content.Context;
  5. import android.view.Window;
  6.  
  7. import androidx.annotation.NonNull;
  8.  
  9. public class DialogView extends Dialog {
  10.  
  11.     public DialogView(@NonNull Context context, int layout, int style, int gravity) {
  12.         super(context, style);
  13.         setContentView(layout);
  14.         Window mWindow = getWindow();
  15. //        WindowManager.LayoutParams params = mWindow.getAttributes();
  16. //        params.width = WindowManager.LayoutParams.MATCH_PARENT;
  17. //        params.height = WindowManager.LayoutParams.WRAP_CONTENT;
  18. //        params.gravity = gravity;
  19. //        mWindow.setAttributes(params);
  20.     }
  21. }

        3、添加样式

                在values->thems文件中添加自定义弹框的样式，这里没有对夜间模式中的样式进行设置了，有需要的可以自行添加。

 代码：

  1. <!--自定义dialog背景全透明无边框theme -->
  2.     <style name="CustomDialog" parent="android:style/Theme.Dialog">
  3.         <!--背景颜色及和透明程度-->
  4.         <item name="android:windowBackground">@android:color/transparent</item>
  5.         <!--是否去除标题 -->
  6.         <item name="android:windowNoTitle">true</item>
  7.         <!--是否去除边框-->
  8.         <item name="android:windowFrame">@null</item>
  9.         <!--是否浮现在activity之上-->
  10.         <item name="android:windowIsFloating">true</item>
  11.         <!--是否模糊-->
  12.         <item name="android:backgroundDimEnabled">true</item>
  13.     </style>
  14.  
  15.     <!--自定义dialog背景弹框设置-->
  16.     <style name="mydialog" parent="android:style/Theme.Dialog">
  17.         <!-- 背景透明,设置圆角对话框必须设置背景透明，否则四角会有背景色小块-->
  18.         <item name="android:windowBackground">@android:color/transparent</item>
  19.         <!-- 没有标题 -->
  20.         <item name="android:windowNoTitle">true</item>
  21.         <!-- 背景模糊 -->
  22.         <item name="android:backgroundDimEnabled">true</item>
  23.     </style>

            4、添加自定义弹框UI界面，在layout中添加 my_dialog_test 文件。

         代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:background="@drawable/dialog_bg"
  5.     android:layout_height="match_parent">
  6.  
  7.     <LinearLayout
  8.         android:layout_width="match_parent"
  9.         android:orientation="vertical"
  10.         android:layout_marginTop="5dp"
  11.         android:layout_height="200dp">
  12.  
  13.         <RelativeLayout
  14.             android:layout_width="match_parent"
  15.             android:orientation="horizontal"
  16.             android:layout_height="34dp">
  17.  
  18.             <RelativeLayout
  19.                 android:layout_width="match_parent"
  20.                 android:orientation="horizontal"
  21.                 android:gravity="center"
  22.                 android:layout_height="match_parent">
  23.                 <TextView
  24.                     android:layout_width="wrap_content"
  25.                     android:text="Dialog Test"
  26.                     android:textColor="@color/white"
  27.                     android:textSize="16sp"
  28.                     android:textStyle="bold"
  29.                     android:layout_height="25dp"/>
  30.             </RelativeLayout >
  31.             <RelativeLayout
  32.                 android:layout_alignParentRight="true"
  33.                 android:layout_width="wrap_content"
  34.                 android:orientation="horizontal"
  35.                 android:layout_gravity="right"
  36.                 android:layout_marginRight="10dp"
  37.                 android:layout_height="wrap_content">
  38.                 <ImageView
  39.                     android:id="@+id/return_visualizationImg"
  40.                     android:layout_width="25dp"
  41.                     android:src="@mipmap/return_dialog"
  42.                     android:layout_margin="5dp"
  43.                     android:layout_height="25dp"/>
  44.             </RelativeLayout>
  45.  
  46.         </RelativeLayout>
  47.         <View
  48.             android:layout_width="match_parent"
  49.             android:background="@color/white"
  50.             android:layout_height="1dp"/>
  51.  
  52.         <LinearLayout
  53.             android:layout_width="match_parent"
  54.             android:gravity="center"
  55.             android:layout_height="match_parent">
  56.             <TextView
  57.                 android:layout_width="wrap_content"
  58.                 android:text="Hello World"
  59.                 android:textColor="@color/white"
  60.                 android:textSize="24sp"
  61.                 android:layout_height="wrap_content"/>
  62.         </LinearLayout>
  63.     </LinearLayout>
  64.  
  65. </LinearLayout>

        下一步添加其中的返回键图标和弹框背景样式文件。

         dialog_bg 文件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <corners android:radius="10dp"/>
  4.     <solid android:color="#AB03A9F4" />
  5. </shape>

        

             5、准备工作做完了我们就可以在主界面通过一个按钮来触发这个自定义弹框了

         代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     tools:context=".MainActivity">
  8.  
  9.     <Button
  10.         android:layout_margin="15dp"
  11.         android:id="@+id/Dialog_test"
  12.         android:layout_width="wrap_content"
  13.         android:text="Dialog"
  14.         android:textColor="@color/white"
  15.         android:layout_height="wrap_content"/>
  16.  
  17. </LinearLayout>

java功能代码：

  1. package com.example.my_dialog_test;
  2.  
  3. import androidx.appcompat.app.AppCompatActivity;
  4.  
  5. import android.os.Bundle;
  6. import android.view.Gravity;
  7. import android.view.View;
  8. import android.widget.Button;
  9.  
  10. import com.example.my_dialog_test.dialog.DialogManager;
  11. import com.example.my_dialog_test.dialog.DialogView;
  12.  
  13. public class MainActivity extends AppCompatActivity implements View.OnClickListener {
  14.  
  15.     private DialogView mDialogVisual;
  16.  
  17.     private Button mDialog_test;
  18.  
  19.     @Override
  20.     protected void onCreate(Bundle savedInstanceState) {
  21.         super.onCreate(savedInstanceState);
  22.         setContentView(R.layout.activity_main);
  23.  
  24.         /* 模板设置弹框 */
  25.         mDialogVisual = DialogManager.getInstance().initView(this, R.layout.my_dialog_test, Gravity.BOTTOM);
  26.         mDialogVisual.setCanceledOnTouchOutside(false);
  27.  
  28.         /* 实例化控件 */
  29.         mDialog_test = findViewById(R.id.Dialog_test);
  30.         mDialog_test.setOnClickListener(this);
  31.     }
  32.  
  33.     /**
  34.      * 按键点击事件
  35.      * @param v
  36.      */
  37.     @Override
  38.     public void onClick(View v) {
  39.         switch (v.getId()){
  40.             case R.id.Dialog_test:
  41.                 DialogManager.getInstance().show(mDialogVisual); //显示自定义弹框
  42.                 break;
  43.             default:
  44.                 break;
  45.         }
  46.     }
  47. }

         6、运行查看效果

         返回键的功能还没做，我们在后面的Java代码中可以自己去添加，弹框的UI设计也自由发挥了。

        显示自定义弹框：

DialogManager.getInstance().show(mDialogVisual); //显示自定义弹框

        取消显示自定义弹框：

mDialogVisual.dismiss();

        弹框外触摸设置：

//点击弹框外面可取消显示
mDialogVisual.setCanceledOnTouchOutside(true);
//点击弹框外面不可取消显示
mDialogVisual.setCanceledOnTouchOutside(false);

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/318468
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号