Android自定义弹窗——右上角悬浮关闭

原创 2016年06月01日 15:50:55

今天打开QQ音乐时,看到更新界面右上角悬浮关闭按钮,本来想应该挺简单的,于是就想顺手写一个,但是不试不知道,一试就出问题咯。
这里写图片描述

于是在原有自己封装的dialog中进行修改,原有样式

这里写图片描述

本来以为只要加个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() == 0) {
                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[2];
                v.getLocationOnScreen(location);
                DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
                WindowManager.LayoutParams params = dialog.getWindow().getAttributes();
                params.gravity = Gravity.BOTTOM;
                params.y = displayMetrics.heightPixels - location[1];
                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">

刚好是图片的一半,我们看下效果图
这里写图片描述

什么鬼,这是啥,整个内容布局撑大了啊,图片还在布局里面啊,我们发现父布局里面的宽度是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">

看看效果
这里写图片描述

哇哦!这下看起来有点意思,不过后面背景又是什么鬼?
我明明设置了窗体背景透明啊,怎么还有阴影呢,这是因为本来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>

最后看一下实现效果图:

这里写图片描述

界面有点丑陋,考虑到没有美工,凑合看吧,功能齐全,没有bug!

总结:看着比较简单的功能,但是放到dialog中去,就变得稍微有点复杂了,不过总体还是不难,就是得慢慢爬坑才行。设计这种dialog方式不一样,可能代码写法上也各有不同,以上代码,仅供参考!

版权声明:本文为博主原创文章,请随便转载。

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

话说之前写过一遍Android中常见的几种Dialog的介绍和基本用法,但是没有讲到实际项目中最常用到的自定义dialog。正好,马上项目要添加新模块,看到里面有用到自定义dialog部分,于是乎趁着...
  • qq_34471736
  • qq_34471736
  • 2017年04月17日 23:17
  • 1783

Android 悬浮窗的创建与移除

本文主要是介绍悬浮窗的创建与移除,并能通过点击悬浮窗图标回到应用主界面。本文是通过参考网上的文章并通过自己修改完成的。本文主要参考的文章是:http://blog.csdn.net/guolin_bl...
  • tanghua0809
  • tanghua0809
  • 2015年08月05日 14:11
  • 1529

自定义dialog,实现右上角显示一个控件按钮

原文地址 http://blog.csdn.net/BBLD_/article/details/27070531 这里是使用自定义dialog的布局实现,并去除原生dialog的标题...
  • u011819464
  • u011819464
  • 2014年05月26日 14:11
  • 948

Android 6.0 悬浮窗默认关闭解决方案

Android 6.0 悬浮窗默认关闭解决方案前言 在谷歌往Android中加入悬浮窗口功能时就表示希望开发者只用其来做用户通知,修改的悬浮窗功能潜在一定的安全隐患,不过手机厂商可不这么认为,于是...
  • vfush
  • vfush
  • 2016年04月20日 18:24
  • 12000

android 登陆右上角 的关闭按钮的使用方法

图片对应选择 按钮 做出的反应
  • jintianhen1
  • jintianhen1
  • 2014年04月15日 11:42
  • 1415

android 自定义带关闭按钮的dialog

android 自定义带关闭按钮的dialog   在android的开发过程中,使用android常用的那几种dialog样式是远远不够的,不符合设计给出的设计图,尤其是右上角带有关闭按钮的dia...
  • greatsuny
  • greatsuny
  • 2015年01月14日 09:36
  • 3809

Android Dialog点击按钮不关闭,控制窗口的显示和关闭

今天做项目的时候遇到一个
  • zh5640923
  • zh5640923
  • 2014年05月08日 17:35
  • 3159

Android列表弹出窗口(确定/取消)

1,定义初始化; @ViewInject(R.id.cache_layout) private LinearLayout cacheLayout; 2,监听按钮点击事件; @OnCl...
  • qq_37523448
  • qq_37523448
  • 2018年01月08日 16:07
  • 134

android系统级弹窗

android普通的弹窗使用比较多的还是Dialog和PopupWindow,开发系统相关的应用时遇到需要不依赖Activity的弹窗,参考其他的资料,在这里总结一下两种常用的方法 1、使用系统级提...
  • wujiewei2342
  • wujiewei2342
  • 2016年02月20日 11:56
  • 712

Android自定义dialog弹出布局

定义一个弹窗布局首先定义一个dailog_set_password.xml布局文件。
  • a987860319
  • a987860319
  • 2016年09月16日 22:36
  • 6466
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android自定义弹窗——右上角悬浮关闭
举报原因:
原因补充:

(最多只允许输入30个字)