自定义Dialog

这两天搞了一个iOS风格的对话框,借此简述一下自定义dialog的那些事;首先先看下截图吧!
1.png

首先我们需要在资源文件中定义dialog样式;由于系统默认的样式有标题栏,有边框,背景颜色也不符合我们的业务需求,所以我们需要自己定义样式

<style name="ios_bottom_dialog" parent="android:style/Theme.Dialog">
        <!--背景颜色及和透明程度-->
        <item name="android:windowBackground">@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>
        <!--背景透明度-->
        <item name="android:backgroundDimAmount">0.2</item>
    </style>

定义一个dialog,基本上以上定义以上几个属性就可以了

第二步我们就要写布局文件了,布局文件可以分成上中下三部分,上下部分很简单,就是两个textView,用来表示标题和cancel按钮;中间为了拓展性,没有定义具体按钮而是用LinearLayout,具体内容可以在代码中设置;

<?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="wrap_content"
    android:paddingBottom="10dp"
    android:background="@android:color/transparent"
    android:alpha="0.9">

    <LinearLayout
        android:id="@+id/bottom_dialog_ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bottom_dialog_selector"
        android:orientation="vertical">
        <TextView
            android:id="@+id/bottom_dialog_title_tv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:clickable="false"
            android:gravity="center"
            android:textSize="20dp" />
        <View android:id="@+id/bottom_dialog_title_line"
              android:layout_width="match_parent"
              android:layout_height="0.3dp"
              android:background="@color/black_444444" />
        <LinearLayout
            android:id="@+id/options_ll"
            android:orientation="vertical"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <TextView
        android:layout_below="@+id/bottom_dialog_ll"
        android:layout_marginTop="8dp"
        android:id="@+id/bottom_dialog_cancel_tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bottom_dialog_selector"
        android:gravity="center"
        android:padding="8dp"
        android:textColor="@color/text_color_green_013ADF"
        android:text="@string/cancel"
        android:textSize="20dp" />

</RelativeLayout>

接下来是程序部分,自定义一个BottomDialog类继承Dialog;代码如下

public class BottomDialog extends Dialog {
    private static final int DEFAULT_PADDING = 10;
    private static final int DEFAULT_TITLE_SIZE = 15;
    private static final int DEFAULT_OPTION_SIZE = 20;

    private TextView title;
    private View title_line;
    private LinearLayout options_ll;
    private IosBottomDialogDismissListener dismissListener;

    public BottomDialog(Context context) {
        //设置自定义的style
        this(context, R.style.ios_bottom_dialog);
    }

    public BottomDialog(Context context, int themeResId) {
        super(context, themeResId);
        setContentView(R.layout.ios_bottom_dialog);
        initView();
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    private void initView() {
        title = (TextView) findViewById(R.id.bottom_dialog_title_tv);
        title_line = findViewById(R.id.bottom_dialog_title_line);
        options_ll = (LinearLayout) findViewById(R.id.options_ll);
        findViewById(R.id.bottom_dialog_cancel_tv).setOnClickListener(new View.OnClickListener() {
            @Override public void onClick(View v) {
                BottomDialog.this.dismiss();
            }
        });
        //点击空白区域可以取消dialog
        this.setCanceledOnTouchOutside(true);
        // 点击back键可以取消dialog
        this.setCancelable(true);
        Window window = this.getWindow();
        //让Dialog显示在屏幕的底部
        window.setGravity(Gravity.BOTTOM);
        //设置窗口出现和窗口隐藏的动画
        window.setWindowAnimations(R.style.ios_bottom_dialog_anim);
        //设置BottomDialog的宽高属性
        WindowManager.LayoutParams lp = window.getAttributes();
        lp.width = WindowManager.LayoutParams.MATCH_PARENT;
        lp.width = WindowManager.LayoutParams.WRAP_CONTENT;
        window.setAttributes(lp);
    }

    public void setTitle(String text) {
        title.setText(text);
    }

    private void setIosBottomDialogDismissListener(IosBottomDialogDismissListener listener) {
        this.dismissListener = listener;
    }


    public interface OnOptionClickListener {
        void onOptionClick();
    }

    public interface IosBottomDialogDismissListener {
        void onDismiss();
    }


    public static class Builder {
        private Paraments p;
        private Context context;

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

        public Builder setTitle(String title, int color) {
            p.title = title;
            p.titleColor = color;
            return this;
        }

        public Builder addOption(String option, int color, OnOptionClickListener listener) {
            p.options.add(new Option(option, color, listener));
            return this;
        }

        public Builder setDialogDismissListener(IosBottomDialogDismissListener listener) {
            p.dismisslistener = listener;
            return this;
        }

        private int dp2px(float dipValue, Context context) {
            float scale = context.getResources().getDisplayMetrics().density;
            return (int) (dipValue * scale + 0.5f);
        }

        public BottomDialog create() {
            final BottomDialog dialog = new BottomDialog(context);
            final LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 1);
            if (p.title.isEmpty()) {
                //设置标题栏不可见
                dialog.title.setVisibility(View.GONE);
                dialog.title_line.setVisibility(View.GONE);
            } else {
                dialog.title.setText(p.title);
                dialog.title.setTextColor(p.titleColor);
                dialog.title.setTextSize(p.titleSize);
                //设置标题栏可见
                dialog.title.setVisibility(View.VISIBLE);
                dialog.title_line.setVisibility(View.VISIBLE);
            }
            //设置item项点击之后的效果
            if (p.options.size() == 0) {
                dialog.options_ll.setVisibility(View.GONE);
            } else {
                for (int i = 0; i < p.options.size(); i++) {
                    final Option option = p.options.get(i);
                    final TextView optionText = new TextView(context);
                    int padding = dp2px(BottomDialog.DEFAULT_PADDING, context);
                    optionText.setPadding(padding, padding, padding, padding);
                    optionText.setText(option.getName());
                    optionText.setTextSize(p.optionTextSize);
                    optionText.setGravity(Gravity.CENTER);
                    optionText.setTextColor(context.getResources().getColor(R.color.text_color_green_013ADF));
                    optionText.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            dialog.dismiss();
                            if (option.getListener() != null) {
                                option.getListener().onOptionClick();
                            }
                        }
                    });
                    dialog.options_ll.addView(optionText);
                    //添加条目之间的分割线
                    if (i != p.options.size() - 1) {
                        View divider = new View(context);
                        divider.setBackgroundResource(R.color.black_444444);
                        dialog.options_ll.addView(divider, params);
                    }
                    //选择到底使用哪个selector文件
                    if (p.options.size() == 1) {
                        if (p.title.isEmpty()) {
                            optionText.setBackgroundResource(R.drawable.bottom_dialog_option13);
                        } else {
                            optionText.setBackgroundResource(R.drawable.bottom_dialog_option3);
                        }
                    } else if (i == 0) {
                        if (p.title.isEmpty()) {
                            optionText.setBackgroundResource(R.drawable.bottom_dialog_option1);
                        } else {
                            optionText.setBackgroundResource(R.drawable.bottom_dialog_option2);
                        }
                    } else if (i < p.options.size() - 1) {
                        optionText.setBackgroundResource(R.drawable.bottom_dialog_option2);
                    } else {
                        optionText.setBackgroundResource(R.drawable.bottom_dialog_option3);
                    }
                }
            }
            //对话框dismiss之后的监听
            dialog.setIosBottomDialogDismissListener(p.dismisslistener);
            return dialog;
        }
    }

    //这个类保存了dialog的众多参数
    private static class Paraments {
        int titleSize;
        int optionTextSize;
        String title;
        int titleColor;
        boolean cancelable;
        List<Option> options;
        BottomDialog.IosBottomDialogDismissListener dismisslistener;

        Paraments() {
            title = "";
            titleColor = R.color.gray_title;
            cancelable = true;
            options = new ArrayList<>();
            titleSize = DEFAULT_TITLE_SIZE;
            optionTextSize = DEFAULT_OPTION_SIZE;
        }
    }

    private static class Option {
        private String name;
        private int color;
        private BottomDialog.OnOptionClickListener listener;

        public Option() {
        }

        Option(String name, int color, BottomDialog.OnOptionClickListener listener) {
            this.name = name;
            this.color = color;
            this.listener = listener;
        }

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }

        public int getColor() {
            return color;
        }

        public void setColor(int color) {
            this.color = color;
        }

        BottomDialog.OnOptionClickListener getListener() {
            return listener;
        }

        public void setListener(BottomDialog.OnOptionClickListener listener) {
            this.listener = listener;
        }
    }
}

在构造方法中设置style、布局,关键代码都有注释;然后就是设置出现于隐藏动画,代码如下

<!--dialog进入动画-->
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fromYDelta="100%p"
    android:toYDelta="0" />
<!--dialog退出动画-->
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fromYDelta="0"
    android:toYDelta="100%p" />

写好动画后,在style文件中引用,代码如下

<!-- 弹窗动画 由下至上 -->
    <style name="ios_bottom_dialog_anim" parent="@android:style/Animation.Dialog">
        <item name="@android:windowEnterAnimation">@anim/ios_dialog_enter</item>
        <!-- 进入时的动画 -->
        <item name="@android:windowExitAnimation">@anim/ios_dialog_exit</item>
        <!-- 退出时的动画 -->
    </style>

这样我们的dialog就完成了,程序中用到的一些资源文件没有贴出来,大家可以自己定义。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,335评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,895评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,766评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,918评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,042评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,169评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,219评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,976评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,393评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,711评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,876评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,562评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,193评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,903评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,699评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,764评论 2 351

推荐阅读更多精彩内容