自定義 Android 對話框 (AlertDialog) 的樣式

fmms 12年前發布 | 430K 次閱讀 Android Android開發 移動開發

Android 提供了 AlertDialog 類可通過其內部類 Builder 輕松創建對話框窗口,但是沒法對這個對話框窗口進行定制,為了修改 AlertDialog 窗口顯示的外觀,解決的辦法就是創建一個指定的 AlertDialog 和 AlertDialog.Builder 類。

Android default Dialog

定義外觀

我們希望將上面默認的對話框外觀修改為如下圖所示的新對話框風格:

Custom Android Dialog

該對話框將支持下面特性:

  1. 可從資源或者字符串直接指定對話框標題
  2. 可從資源、字符串和自定義布局來設置對話框內容
  3. 可設置按鈕和相應的事件處理

 編寫布局、樣式和主題

該對話框使用一個定制的布局來輸出內容,布局定義的id將用于訪問標題 TextView,下面是定義文件:

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:minWidth="280dip"
    android:layout_height="wrap_content">


    <LinearLayout 
        android:orientation="vertical"
        android:background="@drawable/header"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <TextView
            style="@style/DialogText.Title"

            android:id="@+id/title"
            android:paddingRight="8dip"
            android:paddingLeft="8dip"
            android:background="@drawable/title"
            android:layout_width="wrap_content"

            android:layout_height="wrap_content"/>

    </LinearLayout>

    <LinearLayout 
        android:id="@+id/content"
        android:orientation="vertical"
        android:background="@drawable/center"

        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <TextView
            style="@style/DialogText"
            android:id="@+id/message"
            android:padding="5dip"

            android:layout_width="fill_parent"
            android:layout_height="wrap_content"/>

    </LinearLayout>

    <LinearLayout 
        android:orientation="horizontal"
        android:background="@drawable/footer"

        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <Button 
            android:id="@+id/positiveButton"
            android:layout_marginTop="3dip"
            android:layout_width="0dip"

            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:singleLine="true"/>

        <Button 
            android:id="@+id/negativeButton"

            android:layout_marginTop="3dip"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:singleLine="true"/>


    </LinearLayout>

</LinearLayout>

根節點 LinearLayout 的寬度設置為 fill_parent 而最小的寬度是 280dip ,因此對話框的寬度將始終為屏幕寬度的 87.5%

自定義的主題用于聲明對話框是浮動的,而且使用自定義的背景和標題視圖:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="Dialog" parent="android:style/Theme.Dialog">
        <item name="android:windowBackground">@null</item>

        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsFloating">true</item>
    </style>

</resources>

接下來我們需要定義對話框的標題和消息的顯示:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="DialogText">
        <item name="android:textColor">#FF000000</item>

        <item name="android:textSize">12sp</item>
    </style>

    <style name="DialogText.Title">
        <item name="android:textSize">16sp</item>

        <item name="android:textStyle">bold</item>
    </style>

</resources>

編寫對話框和 Builder 類

最好我們要提供跟 AletDialog.Builder 類一樣的方法:

package net.androgames.blog.sample.customdialog.dialog;

import net.androgames.blog.sample.customdialog.R;
import android.app.Dialog;
import android.content.Context;
import android.content.DialogInterface;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * 
 * Create custom Dialog windows for your application
 * Custom dialogs rely on custom layouts wich allow you to 
 * create and use your own look & feel.
 * 
 * Under GPL v3 : http://www.gnu.org/licenses/gpl-3.0.html
 * 
 * @author antoine vianey
 *
 */
public class CustomDialog extends Dialog {

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

    public CustomDialog(Context context) {
        super(context);
    }

    /**
     * Helper class for creating a custom dialog
     */
    public static class Builder {

        private Context context;
        private String title;
        private String message;
        private String positiveButtonText;
        private String negativeButtonText;
        private View contentView;

        private DialogInterface.OnClickListener 
                        positiveButtonClickListener,
                        negativeButtonClickListener;

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

        /**
         * Set the Dialog message from String
         * @param title
         * @return
         */
        public Builder setMessage(String message) {
            this.message = message;
            return this;
        }

        /**
         * Set the Dialog message from resource
         * @param title
         * @return
         */
        public Builder setMessage(int message) {
            this.message = (String) context.getText(message);
            return this;
        }

        /**
         * Set the Dialog title from resource
         * @param title
         * @return
         */
        public Builder setTitle(int title) {
            this.title = (String) context.getText(title);
            return this;
        }

        /**
         * Set the Dialog title from String
         * @param title
         * @return
         */
        public Builder setTitle(String title) {
            this.title = title;
            return this;
        }

        /**
         * Set a custom content view for the Dialog.
         * If a message is set, the contentView is not
         * added to the Dialog...
         * @param v
         * @return
         */
        public Builder setContentView(View v) {
            this.contentView = v;
            return this;
        }

        /**
         * Set the positive button resource and it's listener
         * @param positiveButtonText
         * @param listener
         * @return
         */
        public Builder setPositiveButton(int positiveButtonText,
                DialogInterface.OnClickListener listener) {
            this.positiveButtonText = (String) context
                    .getText(positiveButtonText);
            this.positiveButtonClickListener = listener;
            return this;
        }

        /**
         * Set the positive button text and it's listener
         * @param positiveButtonText
         * @param listener
         * @return
         */
        public Builder setPositiveButton(String positiveButtonText,
                DialogInterface.OnClickListener listener) {
            this.positiveButtonText = positiveButtonText;
            this.positiveButtonClickListener = listener;
            return this;
        }

        /**
         * Set the negative button resource and it's listener
         * @param negativeButtonText
         * @param listener
         * @return
         */
        public Builder setNegativeButton(int negativeButtonText,
                DialogInterface.OnClickListener listener) {
            this.negativeButtonText = (String) context
                    .getText(negativeButtonText);
            this.negativeButtonClickListener = listener;
            return this;
        }

        /**
         * Set the negative button text and it's listener
         * @param negativeButtonText
         * @param listener
         * @return
         */
        public Builder setNegativeButton(String negativeButtonText,
                DialogInterface.OnClickListener listener) {
            this.negativeButtonText = negativeButtonText;
            this.negativeButtonClickListener = listener;
            return this;
        }

        /**
         * Create the custom dialog
         */
        public CustomDialog create() {
            LayoutInflater inflater = (LayoutInflater) context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            // instantiate the dialog with the custom Theme
            final CustomDialog dialog = new CustomDialog(context, 
                    R.style.Dialog);
            View layout = inflater.inflate(R.layout.dialog, null);
            dialog.addContentView(layout, new LayoutParams(
                    LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
            // set the dialog title
            ((TextView) layout.findViewById(R.id.title)).setText(title);
            // set the confirm button
            if (positiveButtonText != null) {
                ((Button) layout.findViewById(R.id.positiveButton))
                        .setText(positiveButtonText);
                if (positiveButtonClickListener != null) {
                    ((Button) layout.findViewById(R.id.positiveButton))
                            .setOnClickListener(new View.OnClickListener() {
                                public void onClick(View v) {
                                    positiveButtonClickListener.onClick(
                                            dialog, 
                                            DialogInterface.BUTTON_POSITIVE);
                                }
                            });
                }
            } else {
                // if no confirm button just set the visibility to GONE
                layout.findViewById(R.id.positiveButton).setVisibility(
                        View.GONE);
            }
            // set the cancel button
            if (negativeButtonText != null) {
                ((Button) layout.findViewById(R.id.negativeButton))
                        .setText(negativeButtonText);
                if (negativeButtonClickListener != null) {
                    ((Button) layout.findViewById(R.id.negativeButton))
                            .setOnClickListener(new View.OnClickListener() {
                                public void onClick(View v) {
                                    positiveButtonClickListener.onClick(
                                            dialog, 
                                            DialogInterface.BUTTON_NEGATIVE);
                                }
                            });
                }
            } else {
                // if no confirm button just set the visibility to GONE
                layout.findViewById(R.id.negativeButton).setVisibility(
                        View.GONE);
            }
            // set the content message
            if (message != null) {
                ((TextView) layout.findViewById(
                        R.id.message)).setText(message);
            } else if (contentView != null) {
                // if no message set
                // add the contentView to the dialog body
                ((LinearLayout) layout.findViewById(R.id.content))
                        .removeAllViews();
                ((LinearLayout) layout.findViewById(R.id.content))
                        .addView(contentView, 
                                new LayoutParams(
                                        LayoutParams.WRAP_CONTENT, 
                                        LayoutParams.WRAP_CONTENT));
            }
            dialog.setContentView(layout);
            return dialog;
        }

    }

}

使用自定義的 Builder

使用方法很簡單:

/**
 * Build the desired Dialog
 * CUSTOM or DEFAULT
 */
@Override
public Dialog onCreateDialog(int dialogId) {
    Dialog dialog = null;
    switch (dialogId) {
        case CUSTOM_DIALOG :
            CustomDialog.Builder customBuilder = new
                CustomDialog.Builder(CustomDialogActivity.this);
            customBuilder.setTitle("Custom title")
                .setMessage("Custom body")
                .setNegativeButton("Cancel", 
                        new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int which) {
                        CustomDialogActivity.this
                        .dismissDialog(CUSTOM_DIALOG);
                    }
                })
                .setPositiveButton("Confirm", 
                        new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int which) {
                        dialog.dismiss();
                    }
                });
            dialog = customBuilder.create();
            break;
        case DEFAULT_DIALOG :
            AlertDialog.Builder alertBuilder = new
                AlertDialog.Builder(CustomDialogActivity.this);
            alertBuilder.setTitle("Default title")
                .setMessage("Default body")
                .setNegativeButton("Cancel", 
                        new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int which) {
                        dialog.dismiss();
                    }
                })
                .setPositiveButton("Confirm", 
                        new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int which) {
                        CustomDialogActivity.this
                        .dismissDialog(DEFAULT_DIALOG);
                    }
                });
            dialog = alertBuilder.create();
            break;
    }
    return dialog;
}

完整的代碼下載: SampleCustomDialog

Enjoy !

http://blog.androgames.net/10/custom-android-dialog/

 本文由用戶 fmms 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!