Android仿IOS弹框

在开发的过程当中,我们经常会用到各种各样的弹框样式,然而Android自带的弹框样式在UI看来是一个特别丑的存在,所以总是给我们设计各种各样不同样式的弹框,这里就不一一阐述了,这里我们只记录一种公用的弹框样式,也就是仿iOS的样式,先上布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/bkg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginStart="30dp"
        android:background="@drawable/bg_white_10dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/txt_dialog_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="20dp"
                android:gravity="center"
                android:textColor="#000"
                android:textSize="17sp"
                android:textStyle="bold"
                tools:text="标题" />

            <TextView
                android:id="@+id/txt_dialog_tip"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginLeft="15dp"
                android:layout_marginTop="5dp"
                android:layout_marginRight="15dp"
                android:layout_marginBottom="10dp"
                android:gravity="center"
                android:textColor="#000"
                android:textSize="13sp"
                tools:text="中文内容" />

            <RelativeLayout
                android:id="@+id/box_custom"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:visibility="gone" />

            <EditText
                android:id="@+id/txt_input"
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginLeft="15dp"
                android:layout_marginTop="10dp"
                android:layout_marginRight="15dp"
                android:background="@drawable/bg_edit_text"
                android:gravity="center_vertical"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:singleLine="true"
                android:textColor="#000000"
                android:textSize="14sp"
                android:visibility="gone"
                tools:text="输入文本" />

            <ImageView
                android:id="@+id/split_horizontal"
                android:layout_width="match_parent"
                android:layout_height="1px"
                android:layout_marginTop="10dp"
                android:background="#2c000000" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/btn_selectNegative"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/button_dialog_left"
                    android:clickable="true"
                    android:focusable="true"
                    android:gravity="center"
                    android:text="取消"
                    android:textColor="@color/colorMain"
                    android:textSize="17sp" />

                <View
                    android:id="@+id/split_vertical_1"
                    android:layout_width="1px"
                    android:layout_height="match_parent"
                    android:background="#2c000000" />

                <TextView
                    android:id="@+id/btn_center"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/button_dialog_center"
                    android:clickable="true"
                    android:focusable="true"
                    android:gravity="center"
                    android:text="确定"
                    android:textColor="@color/colorMain"
                    android:textSize="17sp" />

                <View
                    android:id="@+id/split_vertical_2"
                    android:layout_width="1px"
                    android:layout_height="match_parent"
                    android:background="#2c000000" />

                <TextView
                    android:id="@+id/btn_selectPositive"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@drawable/button_dialog_right"
                    android:clickable="true"
                    android:focusable="true"
                    android:gravity="center"
                    android:text="确定"
                    android:textColor="@color/colorMain"
                    android:textSize="17sp" />
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>

然后在进行定义之前,我们需要对于弹框的进入和淡出进行一个样式的设置

<style name="iOSAnimStyle">
    <item name="android:windowEnterAnimation">@anim/enter_dialog_anim</item>
    <item name="android:windowExitAnimation">@anim/exit_dialog_anim</item>
</style>

这里顺便贴上样式的效果

enter_dialog_anim

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="300"
        android:fromXScale="1.1"
        android:fromYScale="1.1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />
    <alpha
        android:duration="300"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>

exit_dialog_anim

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="300"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
</set>

接下来就是定义Dialog了,直接上干货

public class NormalDialog extends Dialog implements View.OnClickListener {

    private TextView txt_dialog_tip;
    private EditText txt_input;
    private final String title, tip, negativeName, positiveName, centerName;
    private @ColorInt
    final int negativeColor, positiveColor, titleColor, centerColor;
    private final DialogOnClickListener negativeListener, positiveListener, centerListener;
    private final int inputType;//输入框 的输入类型
    private final boolean autoClose;//点击确定取消后是否关闭,默认是
    private int DIALOG_TYPE = 0;//dialog类型   0:单个确定按钮dialog  1:确定取消dialog  2:单个输入框dialog
    public static final int DIALOG_CONFIRM = 0, DIALOG_SELECT = 1, DIALOG_ONE_INPUT = 2;
    private final boolean touchOutsideCancel, cancelable;

    private NormalDialog(Builder builder) {
        super(builder.context);
        this.title = builder.title;
        this.tip = builder.tip;
        this.negativeName = builder.negativeName;
        this.positiveName = builder.positiveName;
        this.centerName = builder.centerName;

        this.negativeListener = builder.negativeListener;
        this.positiveListener = builder.positiveListener;
        this.centerListener = builder.centerListener;

        this.negativeColor = builder.negativeColor;
        this.positiveColor = builder.positiveColor;
        this.centerColor = builder.centerColor;
        this.titleColor = builder.titleColor;

        this.inputType = builder.inputType;
        this.autoClose = builder.autoClose;
        this.DIALOG_TYPE = builder.DIALOG_TYPE;
        this.touchOutsideCancel = builder.touchOutsideCancel;
        this.cancelable = builder.cancelable;
    }


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //去掉title
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        //设置背景透明
        getWindow().setBackgroundDrawableResource(android.R.color.transparent);
        setContentView(R.layout.dialog_normal);
        initView();
    }

    private void initView() {
        //title
        TextView txt_dialog_title = findViewById(R.id.txt_dialog_title);
        if (title != null) {
            txt_dialog_title.setText(title);
        }
        if (titleColor != 0) txt_dialog_title.setTextColor(titleColor);
        //tip
        txt_dialog_tip = findViewById(R.id.txt_dialog_tip);
        if (tip != null) txt_dialog_tip.setText(tip);
        //negativeTX
        TextView btn_selectNegative = findViewById(R.id.btn_selectNegative);
        if (negativeName != null) btn_selectNegative.setText(negativeName);
        if (negativeColor != 0) btn_selectNegative.setTextColor(negativeColor);
        btn_selectNegative.setOnClickListener(this);
        //centerTX
        TextView btn_selectCenter = findViewById(R.id.btn_center);
        if (centerName != null) btn_selectCenter.setText(centerName);
        if (centerColor != 0) btn_selectCenter.setTextColor(centerColor);
        btn_selectCenter.setOnClickListener(this);
        //positiveTX
        TextView btn_selectPositive = findViewById(R.id.btn_selectPositive);
        if (positiveName != null) btn_selectPositive.setText(positiveName);
        if (positiveColor != 0) btn_selectPositive.setTextColor(positiveColor);
        btn_selectPositive.setOnClickListener(this);

        //设置输入框类型
        txt_input = findViewById(R.id.txt_input);
        if (inputType != 0) txt_input.setInputType(inputType);
        setCanceledOnTouchOutside(touchOutsideCancel);
        setCancelable(cancelable);
        getWindow().setWindowAnimations(R.style.iOSAnimStyle);
        switch (DIALOG_TYPE) {
            case DIALOG_CONFIRM://单选确定
                findViewById(R.id.split_vertical_1).setVisibility(View.GONE);
                findViewById(R.id.split_vertical_2).setVisibility(View.GONE);
                btn_selectNegative.setVisibility(View.GONE);
                btn_selectCenter.setVisibility(View.GONE);
                btn_selectPositive.setBackgroundResource(R.drawable.button_dialog_one);
                break;
            case DIALOG_SELECT://双选
                findViewById(R.id.split_vertical_1).setVisibility(View.GONE);
                btn_selectCenter.setVisibility(View.GONE);
                btn_selectPositive.setBackgroundResource(R.drawable.button_dialog_right);
                break;
            case DIALOG_ONE_INPUT://带输入框 ,且左右两个按钮
                txt_input.setVisibility(View.VISIBLE);
                findViewById(R.id.split_vertical_1).setVisibility(View.GONE);
                btn_selectCenter.setVisibility(View.GONE);
                btn_selectPositive.setBackgroundResource(R.drawable.button_dialog_right);
                break;
        }
    }

    @Override
    public void onClick(View v) {
        if (v.getId() == R.id.btn_selectNegative) {
            //取消
            if (negativeListener != null) negativeListener.onClick(this, v);
        } else if (v.getId() == R.id.btn_selectPositive) {
            //确定
            if (positiveListener != null) positiveListener.onClick(this, v);
        } else if (v.getId() == R.id.btn_center) {
            if (centerListener != null) centerListener.onClick(this, v);
        }
        if (autoClose) dismiss();
    }

    public void setTip(String tip) {
        txt_dialog_tip.setText(tip);
    }

    /**
     * 获取输入框的文本
     *
     * @return m
     */
    public String getInputText() {
        return txt_input.getText().toString().trim();
    }

    public static class Builder {
        private Context context;
        private String title, tip, negativeName, positiveName, centerName;
        private @ColorInt
        int negativeColor, positiveColor, titleColor, centerColor;
        private DialogOnClickListener negativeListener, positiveListener, centerListener;
        private int inputType;
        private boolean autoClose = true;
        private int DIALOG_TYPE = 0;
        private boolean touchOutsideCancel = true, cancelable = true;

        public Builder setCanceledOnTouchOutside(boolean canceled) {
            touchOutsideCancel = canceled;
            return this;
        }

        public Builder setCancelable(boolean cancelable) {
            this.cancelable = cancelable;
            return this;
        }

        /**
         * 设置dialog的类型
         *
         * @param DIALOG_TYPE DIALOG_CONFIRM=0,DIALOG_SELECT=1,DIALOG_ONEINPUT=2
         * @return m
         */
        public Builder setDialogType(int DIALOG_TYPE) {
            this.DIALOG_TYPE = DIALOG_TYPE;
            return this;
        }

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

        public Builder setTitleColor(@ColorInt int color) {
            this.titleColor = color;
            return this;
        }

        public Builder setTip(String tip) {
            this.tip = tip;
            return this;
        }

        public Builder setNegativeName(String negativeName) {
            this.negativeName = negativeName;
            return this;
        }

        public Builder setNegativeColor(@ColorInt int color) {
            this.negativeColor = color;
            return this;
        }

        public Builder setNegativeListener(DialogOnClickListener negativeListener) {
            this.negativeListener = negativeListener;
            return this;
        }

        public Builder setPositiveName(String positiveName) {
            this.positiveName = positiveName;
            return this;
        }

        public Builder setPositiveColor(@ColorInt int color) {
            this.positiveColor = color;
            return this;
        }

        public Builder setPositiveListener(DialogOnClickListener positiveListener) {
            this.positiveListener = positiveListener;
            return this;
        }

        public Builder setCenterName(String centerName) {
            this.centerName = centerName;
            return this;
        }

        public Builder setCenterColor(@ColorInt int color) {
            this.centerColor = color;
            return this;
        }

        public Builder setCenterListener(DialogOnClickListener listener) {
            this.centerListener = listener;
            return this;
        }

        /**
         * 是否自动关闭(点击确定和取消后)
         *
         * @param autoClose 默认是
         * @return m
         */
        public Builder setAutoClose(boolean autoClose) {
            this.autoClose = autoClose;
            return this;
        }

        /**
         * 设置输入框文本类型
         *
         * @param type InputType.TYPE_CLASS_TEXT  InputType.TYPE_CLASS_NUMBER InputType.TYPE_NUMBER_FLAG_DECIMAL
         *             InputType.TYPE_TEXT_VARIATION_PASSWORD
         * @return m
         */
        public Builder setInputType(int type) {
            this.inputType = type;
            return this;
        }

        public NormalDialog build(Context context) {
            this.context = context;
            return new NormalDialog(this);
        }
    }
}

最后是在我们需要引用的地方进行去引用就大功告成了,也避免了我们在每次需要弹框的时候都要重新定义؏؏☝ᖗ乛◡乛ᖘ☝؏؏

NormalDialog.Builder()
    .setDialogType(NormalDialog.DIALOG_SELECT)
    .setTitle("hello")
    .setTip("确定取消dialog")
    .setPositiveListener { _, _ ->
        ToastUtils.showMessage(mContext, "确定后可以操作")
    }
    .build(mContext)
    .show()
单个确定按钮dialog
确定取消dialog
单个输入框dialog

代码传送门

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