自定義BubbleDialog---實現優美對話框，氣泡對話框

PS:自定義dialog，一些系統的dialog已經不能滿足開發人員的需求了，所以，我們需要自定義一個屬於並且適合自己項目的對話框，無論是顏色還是功能需求上都是和自己的項目緊密相關的，一些系統的對話框的使用請看博客：https://www.cnblogs.com/codingblock/p/4721597.html。下面開始自定義。

這樣一個簡單的對話框，用到的東西也是很少的，一個layout，里面兩個按鈕，兩個textview，都在布局文件中寫。實現起來有兩種方法。

• 繼承dialog，漏出接口供其回調。
• 直接在activity中寫。

1：直接在activity中

dialog.xml。在最外層加入了android:background="@color/black"，目的是截圖用的，博友粘貼時把這句去掉即可。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black"
    >

<ImageView
 android:layout_width="90px"
 android:layout_height="90px"
 android:layout_alignParentTop="true"
 android:layout_centerHorizontal="true"
 android:layout_gravity="center"
 android:layout_marginTop="184dp"
 android:background="@drawable/yuan" />


    <LinearLayout
        android:layout_width="260dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/dialogbackg"
        android:orientation="vertical">
        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="10px"
            android:text="提示"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="16sp"/>
        <TextView
            android:id="@+id/message"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_gravity="center"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="20dp"
            android:textColor="@color/black"
            android:textSize="16sp"
            android:text="message"/>
        <View
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:layout_marginTop="15dp"
            android:background="#E4E4E4"/>
        <LinearLayout
            android:background="@drawable/dialogbackbottom"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:orientation="horizontal">
            <Button
                android:id="@+id/no"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/dialogbackbtnleft"
                android:gravity="center"
                android:lines="1"
                android:text="取消"
                android:textColor="@color/white"
                android:textSize="16sp"/>
            <View
                android:layout_width="1px"
                android:layout_height="match_parent"
                android:background="#E4E4E4"/>
            <Button
                android:id="@+id/yes"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/dialogbackbtnright"
                android:gravity="center"
                android:lines="1"
                android:text="確定"
                android:textColor="@color/white"
                android:textSize="16sp"/>
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

這里可以看到該框的四個角是有弧度的，這是因為，我加入的白色背景是有弧度的，在下方兩個按鈕的背景是一個左下角有弧度，一個右下角有弧度。這都是通過shape畫的。這

dialogbackbtnright.xml 、dialogbackbtnleft.xml、dialogbackg.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorPrimaryDark"></solid>
    <corners android:bottomRightRadius="5dp"></corners>
</shape>

<shape xmlns:android="http://schemas.android.com/apk/res/android">
 <solid android:color="@color/colorPrimaryDark"></solid>
 <corners android:bottomLeftRadius="5dp"></corners>
</shape>

<shape xmlns:android="http://schemas.android.com/apk/res/android">
 <corners android:radius="5dp"></corners>
 <solid android:color="@color/white"></solid>
</shape>

主題設置

 <!--自定義Dialog背景全透明無邊框theme-->
    <style name="MyDialog" parent="android:style/Theme.Dialog">
        <!--背景顏色和透明程度-->
        <item name="android:windowBackground">@android:color/transparent</item>
        <!--是否去除標題-->
        <item name="android:windowNoTitle">true</item>
        <!--是否去除邊框-->
        <item name="android:windowFrame">@null</item>
        <!--是否浮現在activity之上-->
        <item name="android:windowIsFloating">true</item>
        <!--是否模糊-->
        <item name="android:backgroundDimEnabled">true</item>
    </style>

 

直接使用

//對於對話框來講，方便的還是dialog，自己添加的布局，可以達到自己隨意設置的效果，
        final Dialog dialog=new Dialog(this);
//和activity類似，在加載布局之前，去掉標題欄
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
//添加布局，同時可以在布局里規定大小尺寸
        dialog.setContentView(R.layout.popup_change_ip);
//設置對話框的樣式為圓角，角邊有弧度。
        dialog.getWindow().setBackgroundDrawableResource(R.drawable.dialogbackg);//設置圓角
//去陰影，這里指的是一般對話框之外的部分有個灰色的接近透明的陰影層，設置這個相當於去掉這個陰影層:
//        dialog. getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
        dialog.show();
        Button btnCancel = dialog.findViewById(R.id.btn_cancel);//這些id和上面有些不符，以自己的為准。
        Button btnConfirm = dialog.findViewById(R.id.btn_confirm);
        final EditText etChangeIp = dialog.findViewById(R.id.et_change_ip);
        etChangeIp.setText(ShardPUtil.getString(getApplicationContext(), "base_url", ""));
        btnCancel.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.dismiss();
            }
        });
        btnConfirm.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
               
            }
        });

2：繼承Dialog

package com.example.myapppinxing.widget;

import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import com.example.myapppinxing.R;

public class MyDialogT extends Dialog {
    private Button ok;//確定按鈕
    private Button cancel;//取消按鈕
    private TextView titleTV;//消息標題文本
    private TextView message;//消息提示文本
    private String titleStr;//從外界設置的title文本
    private String messageStr;//從外界設置的消息文本
    //確定文本和取消文本的顯示的內容
    private String yesStr, noStr;
    private CancelOnclickListener cancelOnclickListener;//取消按鈕被點擊了的監聽器
    private OkOnclickListener okOnclickListener;//確定按鈕被點擊了的監聽器
    public MyDialogT(@NonNull Context context) {
        super(context);
    }

    public MyDialogT(@NonNull Context context, int themeResId) {
        super(context, themeResId);
    }

    public interface CancelOnclickListener {
        void onCancelClick();
    }

    public interface OkOnclickListener {
        void onOkOnclick();
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
　　　　　setContentView(R.layout.dialog);
        ok = findViewById(R.id.yes);
        cancel = findViewById(R.id.no);
        titleTV = findViewById(R.id.title);
        message = findViewById(R.id.message);

        //初始化界面數據
        initData();
        //初始化界面控件的事件
        initEvent();
    }
    /**
     * 初始化界面控件的顯示數據
     */
    private void initData() {
        //如果用戶自定了title和message
        if (titleStr != null) {
            titleTV.setText(titleStr);
        }
        if (messageStr != null) {
            message.setText(messageStr);
        }
        //如果設置按鈕文字
        if (yesStr != null) {
            ok.setText(yesStr);
        }
        if (noStr != null) {
            cancel.setText(noStr);
        }
    }

    /**
     * 初始化界面的確定和取消監聽
     */
    private void initEvent() {
        //設置確定按鈕被點擊后，向外界提供監聽
        ok.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (okOnclickListener != null) {
                    okOnclickListener.onOkOnclick();
                }
            }
        });
        //設置取消按鈕被點擊后，向外界提供監聽
        cancel.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (cancelOnclickListener != null) {
                    cancelOnclickListener.onCancelClick();
                }
            }
        });
    }
    /**
     * 從外界Activity為Dialog設置標題
     *
     * @param title
     */
    public void setTitle(String title) {
        titleStr = title;
    }

    /**
     * 從外界Activity為Dialog設置message
     *
     * @param message
     */
    public void setMessage(String message) {
        messageStr = message;
    }

    /**
     * OK和Cancel回調接口
     * */
    public void setCancelOnclickListener(String str, CancelOnclickListener cancelOnclickListener) {
        if (str != null) {
            noStr = str;
        }
        this.cancelOnclickListener = cancelOnclickListener;
    }
    public void setOkOnclickListener(String str, OkOnclickListener okOnclickListener) {
        if (str != null) {
            yesStr = str;
        }
        this.okOnclickListener = okOnclickListener;
    }
}

使用

final MyDialogT myDialogT = new MyDialogT(this,R.style.MyDialog);
        myDialogT.setMessage("內容");
        myDialogT.setTitle("標題");
        myDialogT.setOkOnclickListener("確定", new MyDialogT.OkOnclickListener() {
            @Override
            public void onOkOnclick() {
                myDialogT.dismiss();
            }
        });
        myDialogT.setCancelOnclickListener("取消", new MyDialogT.CancelOnclickListener() {
            @Override
            public void onCancelClick() {
                myDialogT.dismiss();
            }
        });

完

3：氣泡對話框Bubbledialog

借鑒的博友寫好的依賴包

dependencies {
  compile 'com.github.michaelye.easydialog:easydialog:1.4'
}

創建一個透明背景顏色

創建方法：
<color name="outside_color_trans">#33000000</color>
<!--33 為透明度（00-99完全不透明）-->

具體實現，布局都是自己寫好的，布局多大，氣泡就有多大。

View view = this.getLayoutInflater().inflate(R.layout.layout_tip_content_horizontal, null);
     new EasyDialog(MainActivity.this)
     // .setLayoutResourceId(R.layout.layout_tip_content_horizontal)//layout resource id
        .setLayout(view)
        .setBackgroundColor(MainActivity.this.getResources().getColor(R.color.background_color_black))
     // .setLocation(new location[])//point in screen
        .setLocationByAttachedView(btnTopLeft)
        .setGravity(EasyDialog.GRAVITY_BOTTOM)
        .setAnimationTranslationShow(EasyDialog.DIRECTION_X, 1000, -600, 100, -50, 50, 0)
        .setAnimationAlphaShow(1000, 0.3f, 1.0f)
        .setAnimationTranslationDismiss(EasyDialog.DIRECTION_X, 500, -50, 800)
        .setAnimationAlphaDismiss(500, 1.0f, 0.0f)
        .setTouchOutsideDismiss(true)
        .setMatchParent(true)
        .setMarginLeftAndRight(24, 24)
        .setOutsideColor(MainActivity.this.getResources().getColor(R.color.outside_color_trans))
        .show();