自定義佈局Dialog 自定義dialog右上角帶叉號的dialog 點擊右上角叉號關閉dialog

話說之前寫過一遍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中設置透明度但是不知爲何不起效果。後面有知道原因的前輩可以分享下經驗。

源碼