Android自定義彈窗——右上角懸浮關閉

今天打開QQ音樂時，看到更新界面右上角懸浮關閉按鈕，本來想應該挺簡單的，于是就想順手寫一個，但是不試不知道，一試就出問題咯。

于是在原有自己封裝的dialog中進行修改，原有樣式

Android自定義彈窗——右上角懸浮關閉

本來以為隻要加個margin，然後右上角加個圖檔，應該就沒問題了。先貼上原來的代碼和布局，友善檢視和修改。

布局

<?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:gravity="center"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/layout"
        android:layout_width="@dimen/mydialog_width"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="vertical"
        android:scrollbars="vertical">

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/mydialog_title_margin"
            android:gravity="center"
            android:text="提示"
            android:textColor="@color/black"
            android:textSize="@dimen/mydialog_title_size"
            android:textStyle="bold" />

        <View
            android:id="@+id/customdialog_fenge"
            android:layout_width="match_parent"
            android:layout_height="0.1dp"
            android:background="@color/dim_foreground_disabled_material_dark"
            android:visibility="gone" />

        <LinearLayout
            android:id="@+id/dialog_LinearLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:id="@+id/message"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/mydialog_title_margin"
                android:layout_marginRight="@dimen/mydialog_title_margin"
                android:gravity="center"
                android:text="文本資訊"
                android:textSize="@dimen/mydialog_title_size" />

            <EditText
                android:id="@+id/dialog_edt"
                android:layout_width="match_parent"
                android:layout_height="@dimen/topbar_height"
                android:layout_margin="@dimen/mydialog_title_margin"
                android:background="@drawable/bg_edittext"
                android:paddingLeft="3dp"
                android:paddingRight="3dp"
                android:textSize="@dimen/mydialog_title_size" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0.1dip"
            android:layout_marginTop="@dimen/mydialog_title_margin"
            android:background="@color/fragment_body_text_line_color" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/topbar_height"
            android:orientation="horizontal">

            <Button
                android:id="@+id/left_btn"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/bg_dialog_btn_left"
                android:text="取消"
                android:textColor="@color/blue"

                android:textSize="@dimen/mydialog_btntext_size" />

            <LinearLayout
                android:id="@+id/single_line"
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/fragment_body_text_line_color"
                android:orientation="horizontal" />

            <Button
                android:id="@+id/middle_btn"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/bg_dialog_btn_middle"
                android:text="隐藏"
                android:textColor="@color/blue"
                android:textSize="@dimen/mydialog_btntext_size" />

            <LinearLayout
                android:id="@+id/second_line"
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/fragment_body_text_line_color"
                android:orientation="horizontal" />

            <Button
                android:id="@+id/right_btn"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/bg_dialog_btn_right"
                android:text="确定"
                android:textColor="@color/blue"
                android:textSize="@dimen/mydialog_btntext_size" />
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

代碼

public class MyOwnDialog extends Dialog {
    public MyOwnDialog(Context context) {
        super(context);

    }

    public MyOwnDialog(Context context, int theme) {
        super(context, theme);
    }

    public interface OnCustomDialogListener {
        public void back(String name);
    }

    public static class Builder {

        private Context context;
        private String title;
        private String message;
        private String right_btnText;
        private String left_btnText;
        private String middle_btnText;
        private View contentView, v;
        private String edt;
        /* 按鈕監聽事件 */
        private OnClickListener right_btnClickListener;
        private OnClickListener left_btnClickListener;
        private OnClickListener middle_btnClickListener;
        private OnCustomDialogListener customDialogListener;//自己定義接口（傳回edt的值）

        private EditText dialogEdt;
        private TextView dialogTitle, dialogMessage;
        private Button leftBtn, middleBtn, rightBtn;

        private LinearLayout middleLeftLine, middleRightLine;

        public Builder(Context context) {
            this.context = context;
        }

        public Builder setMessage(String message) {
            this.message = message;
            return this;
        }

        public Builder setEdit(String edt) {
            this.edt = edt;
            return this;
        }

        public Builder setTitle(String title) {
            this.title = title;
            return this;
        }

        public Builder setContentView(View v) {
            this.contentView = v;
            return this;
        }

        /*
        *帶編輯框的按鈕
        * */
        public Builder setRightButton(String right_btnText, OnCustomDialogListener listener) {
            this.right_btnText = right_btnText;
            this.customDialogListener = listener;
            return this;
        }

        /*
        * 不帶編輯框
        * */
        public Builder setRightButton(String right_btnText,
                                      OnClickListener listener) {
            this.right_btnText = right_btnText;
            this.right_btnClickListener = listener;
            return this;
        }

        public Builder setLeftButton(String left_btnText,
                                     OnClickListener listener) {
            this.left_btnText = left_btnText;
            this.left_btnClickListener = listener;
            return this;
        }

        public Builder setMiddleButton(String middle_btnText,
                                       OnClickListener listener) {
            this.middle_btnText = middle_btnText;
            this.middle_btnClickListener = listener;
            return this;
        }

        //設定位置（傳listview的item過來）
        public Builder setLocation(View v) {

            this.v = v;
            return this;
        }

        public MyOwnDialog create() {
            LayoutInflater inflater = (LayoutInflater) context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            //主題可以換
            final MyOwnDialog dialog = new MyOwnDialog(context,
                    R.style.mystyle);
            View layout = inflater.inflate(R.layout.customdialog, null);
            dialog.addContentView(layout, new LayoutParams(
                    LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
            //标題
            dialogTitle = ((TextView) layout.findViewById(R.id.title));
            dialogTitle.setText(title);
            //三個按鈕
            leftBtn = (Button) layout.findViewById(R.id.left_btn);
            middleBtn = (Button) layout.findViewById(R.id.middle_btn);
            rightBtn = (Button) layout.findViewById(R.id.right_btn);
            //編輯框
            dialogEdt = (EditText) layout.findViewById(R.id.dialog_edt);
            dialogMessage = (TextView) layout.findViewById(R.id.message);
            middleLeftLine = (LinearLayout) layout.findViewById(R.id.single_line);
            middleRightLine = (LinearLayout) layout.findViewById(R.id.second_line);
            if (title == null || title.trim().length() == ) {
                dialogMessage.setGravity(Gravity.CENTER);
            }
            if (message != null) {
                dialogMessage.setVisibility(View.VISIBLE);
                dialogMessage.setText(message);
            } else {
                dialogMessage.setVisibility(View.GONE);
            }
            //當有編輯框時
            if (edt != null) {
                dialogEdt.setText(edt);
                dialogEdt.setSelection(edt.length());
                dialogEdt.setVisibility(View.VISIBLE);
            } else {
                dialogEdt.setVisibility(View.GONE);
            }
            //有位置(暫時定義的是根據條目位置來定dialog）
            if (v != null) {
                int[] location = new int[];
                v.getLocationOnScreen(location);
                DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
                WindowManager.LayoutParams params = dialog.getWindow().getAttributes();
                params.gravity = Gravity.BOTTOM;
                params.y = displayMetrics.heightPixels - location[];
                dialog.getWindow().setAttributes(params);
            }

            /*隻有中間按鈕*/
            if (middle_btnText != null && left_btnText == null && right_btnText == null) {
                leftBtn.setVisibility(View.GONE);
                rightBtn.setVisibility(View.GONE);
                middleLeftLine.setVisibility(View.GONE);
                middleRightLine.setVisibility(View.GONE);
                middleBtn.setText(middle_btnText);
                /*設定中間按鈕bg*/
                middleBtn.setBackgroundResource(
                        R.drawable.bg_dialog_btn_middle);
                middleBtn.setOnClickListener(new View.OnClickListener() {
                    public void onClick(View v) {
                        middle_btnClickListener.onClick(dialog,
                                DialogInterface.BUTTON_NEUTRAL);
                    }
                });

            }
            /*隻有左右兩個按鈕*/
            if (left_btnText != null && right_btnText != null && middle_btnText == null) {
                middleBtn.setVisibility(View.GONE);
                leftBtn.setText(left_btnText);
                rightBtn.setText(right_btnText);
                middleRightLine.setVisibility(View.GONE);
                if (left_btnClickListener != null) {
                    leftBtn.setOnClickListener(new View.OnClickListener() {
                        public void onClick(View v) {
                            left_btnClickListener.onClick(dialog,
                                    DialogInterface.BUTTON_NEGATIVE);
                            dialog.dismiss();
                        }
                    });
                } else {
                    leftBtn.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            dialog.dismiss();
                        }
                    });
                }

                if (right_btnClickListener != null) {//非編輯框
                    rightBtn.setOnClickListener(new View.OnClickListener() {
                        public void onClick(View v) {
                            right_btnClickListener.onClick(dialog,
                                    DialogInterface.BUTTON_POSITIVE);
                            dialog.dismiss();
                        }
                    });
                } else if (customDialogListener != null) {//編輯框情況下調用
                    rightBtn.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            customDialogListener.back(dialogEdt.getText() + "");
                            dialog.dismiss();
                        }
                    });

                }
            }

            dialog.setContentView(layout);
            return dialog;
        }

    }
}

以上代碼純手工封裝，好了，開始我們的修改。在布局中加入imageview

<ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignParentRight="true"
        android:src="@drawable/ic_error" />

中間布局加入margin

<LinearLayout
        android:id="@+id/layout"
        android:layout_width="@dimen/mydialog_width"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="15dp"
        android:orientation="vertical"
        android:scrollbars="vertical">

剛好是圖檔的一半，我們看下效果圖

Android自定義彈窗——右上角懸浮關閉

什麼鬼，這是啥，整個内容布局撐大了啊，圖檔還在布局裡面啊，我們發現父布局裡面的寬度是match，我們得設定它和内容布局一樣寬，這樣margin才能讓子布局收縮啊，于是改成這樣：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="@dimen/mydialog_width"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

效果和上面一模一樣，就不再次放圖了，我們得看下自己定義的dialog樣式啊，别急着寫啊，樣式是自己定義的

<style name="mystyle" parent="@android:style/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>
        <item name="android:windowBackground">@drawable/bg_dialog</item>
        <item name="android:backgroundDimEnabled">true</item>
    </style>

整個窗體是圓形的一個布局，是以再怎麼搞，最外面都是圓形白背景，于是開始修改，窗體背景删除，但是要圓形效果怎麼辦，将子布局的背景設為圓形不就行了嗎！

<LinearLayout
        android:id="@+id/layout"
        android:layout_width="@dimen/mydialog_width"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="vertical"
        android:background="@drawable/bg_dialog"
        android:layout_margin="15dp"
        android:scrollbars="vertical">

看看效果

Android自定義彈窗——右上角懸浮關閉

哇哦！這下看起來有點意思，不過後面背景又是什麼鬼？

我明明設定了窗體背景透明啊，怎麼還有陰影呢，這是因為本來dialog就是這種樣式啊，我們得設定下背景透明度才行。

<style name="mystyle" parent="@android:style/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>
        <item name="android:windowBackground">@color/fulltransparent</item>
        <item name="android:backgroundDimEnabled">true</item>
    </style>

最後看一下實作效果圖：

Android自定義彈窗——右上角懸浮關閉

界面有點醜陋，考慮到沒有美工，湊合看吧，功能齊全，沒有bug！

總結：看着比較簡單的功能，但是放到dialog中去，就變得稍微有點複雜了，不過總體還是不難，就是得慢慢爬坑才行。設計這種dialog方式不一樣，可能代碼寫法上也各有不同，以上代碼，僅供參考！

Android自定義彈窗——右上角懸浮關閉

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯