前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >自定义Dialog弹框和其背景阴影显示方法

自定义Dialog弹框和其背景阴影显示方法

作者头像
砸漏
发布2020-11-05 11:32:53
8940
发布2020-11-05 11:32:53
举报
文章被收录于专栏:恩蓝脚本恩蓝脚本

昨天研究了一下自定义Dialog的弹框,其实要点都是把自定义好的view用setContentView(view)的方法设置进dialog里,首先我们先看一个简单的自定义Dialog。

一、写布局文件:custom_dialog_layout.xml(这个布局就是一个简单的提示内容,下面有一个确定的按钮,请参看评论中的效果图)

代码语言:javascript
复制
<?xml version="1.0" encoding="utf-8"? 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/content_layout"
 android:layout_gravity="center"
 android:gravity="center" 
 
 <LinearLayout
  android:background="@drawable/dialog_content_white_with_radius"
  android:layout_marginLeft="40dp"
  android:layout_marginRight="40dp"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical"
  android:gravity="center" 
  <TextView
   android:id="@+id/dialog_content_text"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="info"
   android:textSize="@dimen/size40"
   android:textColor="@color/word_color_444444"
   android:padding="10dp"
   android:gravity="center"/ 
  <View
   android:layout_width="match_parent"
   android:layout_height="0.5dp"
   android:background="@color/divide_line"/ 
  <TextView
   android:paddingTop="10dp"
   android:paddingBottom="10dp"
   android:id="@+id/tv_sure"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:gravity="center"
   android:textColor="@color/main_color"
   android:text = "确定"
   android:textSize="@dimen/two_level_word"
   / 
 </LinearLayout 
 
</LinearLayout 

写好布局文件后,由于布局直角不好看,我们可以设置边框为圆角的shape,写入,代码如下:dialog_content_white_with_radius

代码语言:javascript
复制
<?xml version="1.0" encoding="utf-8"? 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
 
 <solid android:color="@color/wirte_ffffff" / 
 
 <corners
  android:bottomLeftRadius="8dp"
  android:bottomRightRadius="8dp"
  android:topLeftRadius="8dp"
  android:topRightRadius="8dp" / 
</shape 

二、写自定义Dialog类继承自Dialog:

代码语言:javascript
复制
 /** [Description]
 * 只有确认button
 * [How to use]
 *
 * [Tips]
 *
 * Created by lan.zheng on 2017/7/25 18:26.
 */
 
public class SureClickDialog extends Dialog {
 private Listener mListener;
 
 public SureClickDialog(Context context) {
  super(context);
 }
 
 public SureClickDialog(Context context, String content, Listener listener){
  super(context, R.style.custom_dialog_style);
  mListener = listener;
  View contentView = LayoutInflater.from(context).inflate(R.layout.dialog_have_been_sign_section_show, null);
  TextView contentTextView = (TextView) contentView.findViewById(R.id.dialog_content_text);
  contentTextView.setText(content);
  TextView sureButton = (TextView) contentView.findViewById(R.id.tv_sure);
 
  //消失监听
  this.setOnDismissListener(new OnDismissListener() {
   @Override
   public void onDismiss(DialogInterface dialog) {
    mListener.onDialogDismissListener();
   }
  });
  //确认
  sureButton.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    dismiss();
    mListener.onSureListerner();
   }
  });
  setContentView(contentView);
 }
 
 public interface Listener {
  void onDialogDismissListener();
  void onSureListerner();
 }
}

这里我们只监听弹框消失和点击确定的按钮,好了基本工作到这里完成了,最后就是设置样式style,一般弹框背景都是半透明的遮罩:

代码语言:javascript
复制
 <style name="custom_dialog_style" parent="android:Theme.Dialog" 
  <item name="android:windowFrame" @null</item 
  <item name="android:windowIsFloating" true</item 
  <item name="android:windowIsTranslucent" false</item 
  <item name="android:windowNoTitle" true</item <!--除去title-- 
  <item name="android:backgroundDimEnabled" true</item <!--半透明-- 
  <item name="android:windowBackground" @color/transparent</item <!--除去背景色-- 
  <item name="android:radius" 10dp</item 
 </style 

这样就完成了一个背景半透明的弹框了。

设置<itemname=”android:backgroundDimEnabled” true</item <!–半透明– 能实现半透明,但是如果有特殊的背景要求那就不能满足了,此时通过查询发现,可以重写下面这个函数进行把整个你自定义的布局全屏显示。

代码语言:javascript
复制
@Override
 public void show() {
  super.show();
  /**
   * 设置宽度全屏,要设置在show的后面
   */
  WindowManager.LayoutParams layoutParams = getWindow().getAttributes();
  layoutParams.width= ViewGroup.LayoutParams.MATCH_PARENT;
  layoutParams.height= ViewGroup.LayoutParams.MATCH_PARENT;
  getWindow().getDecorView().setPadding(0, 0, 0, 0);
  getWindow().setAttributes(layoutParams);
 }

发现是生效的,我布局中的背景是成功的应用上了,但是发现点击外围却不能让弹框消失,这是因为你的弹框已经是全屏了,所以在屏幕上就没有所谓的弹框外围了,这时候我们可以自己去监听点击事件,我们来重写一下自定义Dialog类:

代码语言:javascript
复制
/**
 * [Description]
 * 只有确认button
 * [How to use]
 * new SureClickDialog()
 * [Tips]
 * isClickOutsideCanDismiss必须给值,true表示可点击外围消失,false表示不能
 * Created by lan.zheng on 2017/7/25 18:26.
 */
 
public class SureClickDialog extends Dialog {
 private Listener mListener;
 
 public SureClickDialog(Context context) {
  super(context);
 }
 
 public SureClickDialog(Context context, String content, boolean isClickOutsideCanDismiss,Listener listener){
  super(context, R.style.custom_dialog_style);
  mListener = listener;
  View contentView = LayoutInflater.from(context).inflate(R.layout.dialog_have_been_sign_section_show, null);
  LinearLayout linearLayout = (LinearLayout)contentView.findViewById(R.id.content_layout) ; //自定义布局的最外层
  linearLayout.setBackgroundColor(context.getResources().getColor(R.color.half_transparent));
  linearLayout.setOnClickListener(new View.OnClickListener() { //为其设置自定义点击监听
   @Override
   public void onClick(View v) {
    if(isClickOutsideCanDismiss){
     dismiss();
    }
   }
  });
  TextView contentTextView = (TextView) contentView.findViewById(R.id.dialog_content_text);
  contentTextView.setText(content);
  TextView sureButton = (TextView) contentView.findViewById(R.id.tv_sure);
 
  //消失监听
  this.setOnDismissListener(new OnDismissListener() {
   @Override
   public void onDismiss(DialogInterface dialog) {
    mListener.onDialogDismissListener();
   }
  });
  //确认
  sureButton.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    dismiss();
    mListener.onSureListerner();
   }
  });
  setContentView(contentView);
 }
 
  @Override
 public void show() {
  super.show();
 
  WindowManager.LayoutParams layoutParams = getWindow().getAttributes();
  layoutParams.width= ViewGroup.LayoutParams.MATCH_PARENT;
  layoutParams.height= ViewGroup.LayoutParams.MATCH_PARENT;
  getWindow().getDecorView().setPadding(0, 0, 0, 0);
  getWindow().setAttributes(layoutParams);
 }
 
 
 public interface Listener {
  void onDialogDismissListener();
  void onSureListerner();
 }
}

OK,关于弹框的就写到这里啦,自定义的功能十分丰富和具有可塑性,有兴趣的可以研究一下。

以上这篇自定义Dialog弹框和其背景阴影显示方法就是小编分享给大家的全部内容了,希望能给大家一个参考。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-09-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档