自定义布局Dialog 自定义dialog右上角带叉号的dialog 点击右上角叉号关闭dialog

来源：互联网发布：2016网络效应试题答案编辑：程序博客网时间：2024/05/17 03:33

话说之前写过一遍Android中常见的几种Dialog的介绍和基本用法，但是没有讲到实际项目中最常用到的自定义dialog。正好，马上项目要添加新模块，看到里面有用到自定义dialog部分，于是乎趁着最近闲于时间就提前研究下这块，刚好今天分享一下。本来是打算写两篇博客的，后来想想内容也不多，就合成一个写了。两种自定义的dialog用到的方式和定义写法都不同。先来看看效果图吧：
这里写图片描述

这里有一个是自定义布局的dialog，这里布局我只放了两个Imageview并给其添加了Click事件。也是最普通的自定义dialog。
具体实现：
1.肯定是先写一个自定义的layout布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="450dp"    android:layout_height="wrap_content"    android:layout_gravity="center"    android:background="#ffffff"    android:orientation="vertical"    android:paddingBottom="66dp"    android:paddingTop="36dp">    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:text="请选择上传文件类型"        android:textColor="#af4600"        android:textSize="24sp" />    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:layout_marginTop="35dp"        android:orientation="horizontal">        <ImageView            android:id="@+id/iv_send_picture"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_marginRight="75dp"            android:layout_weight="1"            android:src="@drawable/baby_space_send_picture" />        <ImageView            android:id="@+id/iv_send_vedio"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:src="@drawable/baby_space_send_vedio" />    </LinearLayout></LinearLayout>

这个比较简单没啥说的，继续下面的
为了方便起见，一般这种都是在项目中有一个DialogUtils的专门工具类实现，这里也是：

/**     * @param context     * @param pictureClick     * @param vedioClick     * @return     */    public static Dialog ShowBabyShowSendDialog(Context context,                                                View.OnClickListener pictureClick,                                                View.OnClickListener vedioClick) {        ImageView mPicture;        ImageView mVedio;        Dialog dialog = null;        if (null != context) {            dialog = new Dialog(context, R.style.ActivityDialogStyle);            //  dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);//代码中取消标题栏            dialog.setContentView(R.layout.dialog_upsend_layout);            dialog.getWindow().setWindowAnimations(R.style.dialog_animstyle);            dialog.setCanceledOnTouchOutside(true);//点击其他地方是否消失            dialog.setCancelable(true);            WindowManager.LayoutParams params = dialog.getWindow().getAttributes();            params.width = ViewGroup.LayoutParams.MATCH_PARENT;            params.height = ViewGroup.LayoutParams.WRAP_CONTENT;            params.gravity = Gravity.CENTER;            dialog.getWindow().setAttributes(params);            mPicture = (ImageView) dialog.findViewById(R.id.iv_send_picture);            mVedio = (ImageView) dialog.findViewById(R.id.iv_send_vedio);            mPicture.setOnClickListener(pictureClick);            mVedio.setOnClickListener(vedioClick);        }        return dialog;    }

这里方法接收三个参数，第一个是一个上下文对象，第二个和第三个分别是两个控件对应的点击事件。内部就是一些dialog的属性设置。然后在MainActivity中调用：

 @Override    public void onClick(View v) {       switch (v.getId()){           case R.id.button:               mDialog = DialogUtil.ShowBabyShowSendDialog(MainActivity.this,this,this);               mDialog.show();               break;           case R.id.iv_send_picture:               Toast.makeText(this,"点击了图片",Toast.LENGTH_SHORT).show();               mDialog.dismiss();               break;           case R.id.iv_send_vedio:               Toast.makeText(this,"点击了视频",Toast.LENGTH_SHORT).show();               mDialog.dismiss();               break;

由于MainActivity是一个activity所以这里我们三个参数都传的的this，当然为了规范期间应该都传MainActivity.this，我这里为了方便只写了一个。

2.
下来是第二种也就是右上角有个叉号，点击叉号关闭弹出框，其实本人在这里浪费的时间是上面的好几倍。下来一起来看代码
布局文件：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <RelativeLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:gravity="center_horizontal"        android:layout_centerInParent="true">        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentRight="true"            android:layout_margin="12dp"            android:gravity="center"            android:orientation="vertical">            <ImageView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:background="@drawable/im" />            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_marginTop="5dp"                android:gravity="center"                android:text="点击领取更多"                android:textColor="@android:color/white"                android:textSize="26sp"                android:textStyle="bold" />        </LinearLayout>        <ImageView            android:id="@+id/close"            android:layout_width="30dp"            android:layout_height="30dp"            android:layout_alignParentRight="true"            android:layout_alignParentTop="true"            android:background="@drawable/close" />    </RelativeLayout></LinearLayout>

这里的布局文件代码都是经过优化后删除了一些不必要的控件和布局嵌套。大概说一下整体是在一个RelativeLayout里面，右上角的叉号设置属性

android:layout_alignParentRight=”true”
android:layout_alignParentTop=”true”
然后在利用 android:layout_margin=”12dp”去微调就可以。

这里要注意层级关系，叉号和LinearLayout是平级的，先是RelativeLayout最底层，然后LinearLayout在它上一层，最上面层也就是叉号在RelativeLayout的右上角。

然后在自定义个类去继承Dialog

package nan.dialogview;import android.app.Dialog;import android.content.Context;import android.os.Bundle;import android.support.annotation.NonNull;import android.support.annotation.StyleRes;import android.view.View;import android.widget.ImageView;/** * Created by NanFeiLong on 2017/4/16. */public class MyCloseDialog extends Dialog implements View.OnClickListener{    private ImageView img_back;    private  Context mContext;    public MyCloseDialog(@NonNull Context context, @StyleRes int themeResId) {        super(context, themeResId);        this.mContext = context;    }    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        this.setContentView(R.layout.dialog_closeicon_layout);        img_back=(ImageView) findViewById(R.id.close);        img_back.setOnClickListener(this);    }    @Override    public void onClick(View v) {        switch (v.getId()){            case R.id.close:                MyCloseDialog.this.dismiss();                break;            default:                break;        }    }}

这里只给叉号了一个点击事件，一般不点击叉号的话点击图片会跳转到其他地方，也同理可以添加点击事件。最后在MainActivity中调用：

 case R.id.btn_close_dialog:               //若想让弹出的dialog之外的背景为半透明，第二个参数传0 或者自定义样式               myCloseDialog = new MyCloseDialog(this,0);               myCloseDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);//代码中取消标题栏               myCloseDialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));               myCloseDialog.show();               myCloseDialog.setCancelable(false);               break;

特别说明一下

myCloseDialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));

这行代码是重点，当时其他的都查不出问题但是就是达不到想要的效果，最后还是多亏在一个Android群里的一位大神给出了一个stackoverflow连接虽然英文是硬伤，但是确实是这行代码起了关键作用。也尝试了在xml中设置透明度但是不知为何不起效果。后面有知道原因的前辈可以分享下经验。

源码

2 0