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

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

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

<?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

<?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:

 /** [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,一般弹框背景都是半透明的遮罩:

 <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><!--半透明-->能实现半透明,但是如果有特殊的背景要求那就不能满足了,此时通过查询发现,可以重写下面这个函数进行把整个你自定义的布局全屏显示。

@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类:

/**
 * [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弹框和其背景阴影显示方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 自定义AlertDialog去除黑色背景的解决方法

    主要注意的是在资源引用的地方 AlertDialog.Builder(this,R.style.dialogNoBg).create(); 这里要自定义sytle <!--dialog去阴影--> <style name="dialogNoBg"> <item name="android:background">#00000000</item> <item name="android:windowBac

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

    昨天研究了一下自定义Dialog的弹框,其实要点都是把自定义好的view用setContentView(view)的方法设置进dialog里,首先我们先看一个简单的自定义Dialog. 一.写布局文件:custom_dialog_layout.xml(这个布局就是一个简单的提示内容,下面有一个确定的按钮,请参看评论中的效果图) <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:an

  • android自定义Dialog弹框和背景阴影显示效果

    本文实例为大家分享了android自定义Dialog弹框和背景阴影显示的具体代码,供大家参考,具体内容如下 首先需要自定义一个类,继承Dialog import android.app.Dialog; import android.content.Context; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.view.WindowManager;

  • vue实现可拖拽的dialog弹框

    本文主要介绍了vue实现可拖拽的dialog弹框,分享给大家,具体如下: element的dialog弹框在项目中挺常用的.但有时候嵌套的话会遮住,体验不好.拖拽形式的弹框会提高用户体验 借助基于 Sortable.js 的 Vue 拖拽组件vuedraggable 安装 npm install vuedraggable --save 在公共组件中新建个js文件,搭配vue自定义指令来实现拖拽的效果 import Vue from 'vue'; // v-dialogDrag: 弹窗拖拽属性 V

  • Android 提交或者上传数据时的dialog弹框动画效果

    效果图如下所示: 类似这种弹框里含有动画,一般我们在上传数据或者支付的时候会用到,当然,假如我们换几张图片,还可以把它当做是加载数据的时候使用,总之这是一个dialog弹框,只不过这个弹框在弹出后,上面有动画的运行. 上代码 首先是布局文件 : <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="200dp" andr

  • 使用Vant完成Dialog弹框案例

    效果展示: 完整代码: <template> <!-- 完成Dialog 弹框 --> <div id="dialog"> <van-button class="btn" type="primary" @click="TipDialog">提示弹出框</van-button> <van-button class="btn" type=&quo

  • 微信小程序实现自定义动画弹框/提示框的方法实例

    目录 前言 css3 实现动画 小程序动画 API-实现动画 结语 相关文档 前言 在小程序中,用户与界面进行交互时,有一些用户反馈提示,例如:触发某个按钮,从底部弹出框,从顶部弹出等 如今,有一些现成的 UI 库,虽然已经实现了的,但若只是为了实现一个底部弹出框或者自定义提示框,不引用第三方 UI 库 怎么手动原生方式去实现呢,最主要的是怎么去实现动画 css3 实现动画 如下是wxml代码 <view> <view class="click-btn" catcht

  • react封装Dialog弹框的方法

    本文实例为大家分享了react封装Dialog弹框的具体代码,供大家参考,具体内容如下 Dialog.js import React, { Component, Children } from "react"; import { createPortal } from "react-dom"; import "../static/css/Dialog.scss" export default class Dialog extends Compon

  • Layui点击图片弹框预览的实现方法

    我就废话不多说了,直接上代码吧! 如下所示: <img src="123.png" width="20px" height="20px" class="layui-upload-img" onclick="previewImg(this)"> function previewImg(obj) { var img = new Image(); img.src = obj.src; //var he

  • Android 自定义Dialog去除title导航栏的解决方法

    如下所示: Dialog dialog = new Dialog(context); dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); dialog.setContentView(view); 以上这篇Android 自定义Dialog去除title导航栏的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 微信小程序开发之实现自定义Toast弹框

    前言 之前有篇文章是写的Toast使用,但是有时候官方的样式并不能满足业务要求,怎么办呢,当然有解决办法了.有一个插件可以直接帮我们完成,WeToast. 先来看一下效果图: 怎么用呢,我们来看一下: WeTaost插件源码位于src目录下,包含3个文件. wetoast.js: 脚本代码 wetoast.wxml: 模板结构 wetoast.wxss: 样式 使用时只需要加入以上3个文件即可 第一步:在项目的app.js中引入wetoast.js,并注册到小程序上,小程序所有Page页面均可使

随机推荐