首页 > 代码库 > 46.Android 自己定义Dialog

46.Android 自己定义Dialog

46.Android 自己定义Dialog

  • Android 自己定义Dialog
    • 前言
    • 提示Dialog
    • 提示Dialog 效果图
    • 菜单Dialog
    • 菜单Dialog 效果图
    • DialogActivity


前言

提供两套自己定义Dialog模板

  • 第一种。提示Dialog,有消失时间。

  • 另外一种,菜单Dialog,用于用户交互。


提示Dialog

CustomDialog

public class CustomDialog extends Dialog {

    private TextView dialogTV;

    private static final long DEFAULT_DURATION = 1000L;
    private static final String DEFAULT_CONTENT = "";

    private long duration;
    private String content;

    private DialogCallback callback;

    public CustomDialog(Context context) {
        super(context, R.style.custom_dialog);
        this.initViews(context);
    }

    /**
     * Creates a dialog window that uses a custom dialog style.
     * <p/>
     * The supplied {@code context} is used to obtain the window manager and
     * base theme used to present the dialog.
     * <p/>
     * The supplied {@code theme} is applied on top of the context‘s theme. See
     * <a href="http://www.mamicode.com/{@docRoot}guide/topics/resources/available-resources.html#stylesandthemes">
     * Style and Theme Resources</a> for more information about defining and
     * using styles.
     *
     * @param context    the context in which the dialog should run
     * @param themeResId a style resource describing the theme to use for the
     *                   window, or {@code 0} to use the default dialog theme
     */
    public CustomDialog(Context context, int themeResId) {
        super(context, themeResId);
        this.initViews(context);
    }

    public CustomDialog(Context context, boolean cancelable, OnCancelListener cancelListener) {
        super(context, cancelable, cancelListener);
        this.initViews(context);
    }

    private void initViews(Context context) {
        this.setContentView(R.layout.dialog_custom);
        this.dialogTV = (TextView) this.findViewById(R.id.custom_dialog_tv);
    }

    @Override
    public void show() {
        super.show();
        this.dialogTV.setText(TextUtils.isEmpty(this.content) ? DEFAULT_CONTENT : this.content);
        long showDuration = this.duration > 0L ? this.duration : DEFAULT_DURATION;
        new Handler().postDelayed(new Runnable() {
            public void run() {
                if (CustomDialog.this.isShowing()) {
                    CustomDialog.this.dismiss();
                    if (CustomDialog.this.callback != null) CustomDialog.this.callback.onDismiss();
                }
            }
        }, showDuration);
    }

    public void setTextDrawable(Drawable drawable) {
        if (drawable == null) return;
        drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
        this.dialogTV.setCompoundDrawables(drawable, null, null, null);
    }

    public interface DialogCallback {
        void onDismiss();
    }

    public static class DialogBuilder {
        private static String contextHashCode;
        private static CustomDialog dialog;
        public static DialogBuilder ourInstance;

        public static DialogBuilder getInstance(Context context) {
            if (ourInstance == null) ourInstance = new DialogBuilder();
            String hashCode = String.valueOf(context.hashCode());
            /**
             * 不同一个Activity
             */
            if (!hashCode.equals(String.valueOf(contextHashCode))) {
                contextHashCode = hashCode;
                dialog = new CustomDialog(context);
            }
            return ourInstance;
        }

        public DialogBuilder setDuration(long duration) {
            dialog.duration = duration;
            return this;
        }

        public DialogBuilder setContent(String content) {
            dialog.content = content;
            return this;
        }

        public DialogBuilder setDrawable(Drawable drawable) {
            dialog.setTextDrawable(drawable);
            return this;
        }

        public DialogBuilder setCallback(DialogCallback callback) {
            dialog.callback = callback;
            return this;
        }

        public DialogBuilder setCanceledOnTouchOutside(boolean cancel) {
            dialog.setCanceledOnTouchOutside(cancel);
            return this;
        }

        public CustomDialog getDialog() {
            return dialog;
        }

    }

}

dialog_custom.xml

<?

xml version="1.0" encoding="utf-8"?

> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center"> <TextView android:id="@+id/custom_dialog_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/bg_dialog_custom_tv" android:drawableLeft="@mipmap/dialog_custom_tv_drawable" android:drawablePadding="5dp" android:drawableStart="@mipmap/dialog_custom_tv_drawable" android:gravity="center" android:text="成功" android:textColor="#ff666666" android:textSize="15sp" /> </LinearLayout>

R.style.custom_dialog

<style name="custom_dialog" parent="@android:style/Theme.Dialog">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowBackground">@color/transparent</item>
    <item name="android:windowIsTranslucent">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowIsFloating">true</item>
</style>

提示Dialog 效果图

技术分享


菜单Dialog

MenuDialog

public class MenuDialog extends Dialog {

    private TextView caseTV;
    private TextView helpTV;

    public MenuDialog(Context context) {
        super(context, R.style.menu_dialog);
        this.initViews(context);
    }

    /**
     * Creates a dialog window that uses a custom dialog style.
     * <p/>
     * The supplied {@code context} is used to obtain the window manager and
     * base theme used to present the dialog.
     * <p/>
     * The supplied {@code theme} is applied on top of the context‘s theme. See
     * <a href="http://www.mamicode.com/{@docRoot}guide/topics/resources/available-resources.html#stylesandthemes">
     * Style and Theme Resources</a> for more information about defining and
     * using styles.
     *
     * @param context    the context in which the dialog should run
     * @param themeResId a style resource describing the theme to use for the
     *                   window, or {@code 0} to use the default dialog theme
     */
    public MenuDialog(Context context, int themeResId) {
        super(context, themeResId);
        this.initViews(context);
    }

    public MenuDialog(Context context, boolean cancelable, OnCancelListener cancelListener) {
        super(context, cancelable, cancelListener);
        this.initViews(context);
    }

    private void initViews(Context context) {
        this.setContentView(R.layout.dialog_menu);
        this.caseTV = (TextView) this.findViewById(R.id.dialog_menu_case_tv);
        this.helpTV = (TextView) this.findViewById(R.id.dialog_menu_help_tv);
    }


    public void setTextDrawable(Drawable drawable) {
        if (drawable == null) return;
        drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
    }

    public static class DialogBuilder {
        private static String contextHashCode;
        private static MenuDialog dialog;
        public static DialogBuilder ourInstance;

        public static DialogBuilder getInstance(Context context) {
            if (ourInstance == null) ourInstance = new DialogBuilder();
            String hashCode = String.valueOf(context.hashCode());
            /**
             * 不同一个Activity
             */
            if (!hashCode.equals(String.valueOf(contextHashCode))) {
                contextHashCode = hashCode;
                dialog = new MenuDialog(context);
            }
            return ourInstance;
        }

        public DialogBuilder setCaseListenser(View.OnClickListener listener) {
            dialog.caseTV.setOnClickListener(listener);
            return this;
        }

        public DialogBuilder setHelpListener(View.OnClickListener listener) {
            dialog.helpTV.setOnClickListener(listener);
            return this;
        }

        public DialogBuilder setCanceledOnTouchOutside(boolean cancel) {
            dialog.setCanceledOnTouchOutside(cancel);
            return this;
        }

        public MenuDialog getDialog() {
            return dialog;
        }

    }

}

dialog_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="horizontal">


    <TextView
        android:id="@+id/dialog_menu_case_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_dialog_menu_item"
        android:drawablePadding="13dp"
        android:drawableTop="@mipmap/dialog_menu_case"
        android:paddingBottom="13.5dp"
        android:paddingEnd="36dp"
        android:paddingLeft="36dp"
        android:paddingRight="36dp"
        android:paddingTop="20dp"
        android:gravity="center_horizontal"
        android:text="Case"
        android:textColor="#ff666666"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/dialog_menu_help_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:background="@drawable/bg_dialog_menu_item"
        android:drawablePadding="13dp"
        android:drawableTop="@mipmap/dialog_menu_help"
        android:gravity="center_horizontal"
        android:paddingBottom="13.5dp"
        android:paddingEnd="36dp"
        android:paddingLeft="36dp"
        android:paddingRight="36dp"
        android:paddingTop="20dp"
        android:text="Help"
        android:textColor="#ff666666"
        android:textSize="14sp" />

</LinearLayout>

R.style.menu_dialog

<style name="menu_dialog" parent="@android:style/Theme.Dialog">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowBackground">@color/transparent</item>
    <item name="android:windowIsTranslucent">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowIsFloating">true</item>
</style>

菜单Dialog 效果图

技术分享


DialogActivity

public class DialogActivity extends AppCompatActivity implements View.OnClickListener {

    private MenuDialog menuDialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.activity_dialog);
        this.menuDialog = MenuDialog.DialogBuilder.getInstance(this)
                .setCaseListenser(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(DialogActivity.this, "case", Toast.LENGTH_SHORT).show();
                        DialogActivity.this.menuDialog.dismiss();
                    }
                })
                .setHelpListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(DialogActivity.this, "Help", Toast.LENGTH_SHORT).show();
                        DialogActivity.this.menuDialog.dismiss();
                    }
                })
                .getDialog();
        this.initListeners();
    }

    private void initListeners() {
        this.findViewById(R.id.dialog_custom).setOnClickListener(this);
        this.findViewById(R.id.dialog_menu).setOnClickListener(this);
    }

    /**
     * Called when a view has been clicked.
     *
     * @param v The view that was clicked.
     */
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.dialog_custom:
                CustomDialog.DialogBuilder.getInstance(this)
                        .setDuration(2000L)
                        .setContent("CustomDialog")
                        .setCanceledOnTouchOutside(false)
                        .setCallback(new CustomDialog.DialogCallback() {
                            @Override
                            public void onDismiss() {
                                Toast.makeText(DialogActivity.this, "CustomDialog dismiss", Toast.LENGTH_SHORT).show();
                            }
                        })
                        .getDialog()
                        .show();
                break;
            case R.id.dialog_menu:
                this.menuDialog.show();
                break;
        }
    }
}

activity_dialog.xml

<?

xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="26dp"> <TextView android:id="@+id/dialog_custom" style="@style/TextButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="CustomDialog" /> <TextView android:id="@+id/dialog_menu" style="@style/TextButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="MenuDialog" /> </LinearLayout>

<script type="text/javascript"> $(function () { $(‘pre.prettyprint code‘).each(function () { var lines = $(this).text().split(‘\n‘).length; var $numbering = $(‘
    ‘).addClass(‘pre-numbering‘).hide(); $(this).addClass(‘has-numbering‘).parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($(‘
  • ‘).text(i)); }; $numbering.fadeIn(1700); }); }); </script>

46.Android 自己定义Dialog