1. 程式人生 > >android 自定義dialog的實現(自定義大小、去除黑色邊框等)

android 自定義dialog的實現(自定義大小、去除黑色邊框等)

搜尋相關關鍵字網上一大堆實現,但是看完總覺得缺胳膊少腿,繞了不少彎路,終於弄好了自定義dialog。把自己整合的完整程式碼發上來。

要點:

1、設定自定義dialog的佈局檔案my_dialog.xml

2、設定一份自定義的樣式檔案styles_wx.xml,該檔案用於覆蓋android的預設主題樣式,如黑色邊框等。

3、java程式碼繼承Dialog實現自定義類MyDialog,實現自定義佈局,還有設定視窗的大小、位置等。

(網上文章要麼少介紹第2點,要麼是使用AlterDialog直接實現效果)

先看下效果,模仿微信風格的dialog:


允許新增子view到彈出dialog,如:


程式碼。

Part1.styles_wx.xml

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 微信彈窗 -->
    <style name="wx_dialog" parent="@android:style/Theme.Dialog">
        <item name="android:windowFrame">@null</item> <!-- 邊框 -->
        <item name="android:windowIsFloating">true</item> <!-- 是否浮現在activity之上 -->
        <item name="android:windowIsTranslucent">false</item> <!-- 半透明 -->
        <item name="android:windowNoTitle">true</item> <!-- 無標題 -->
        <item name="android:windowBackground">@drawable/transparent</item> <!-- 自己想要的背景 -->
        <item name="android:backgroundDimEnabled">true</item> <!-- 背景內容模糊 -->
    </style>

</resources>
注意,此處:
<item name="android:windowBackground">@drawable/transparent</item>
這是設定對話方塊彈出背景,嘗試設定@null,仍然是黑色背景,在使用半透明圖片時會受其影響。

所以,可以在這裡指定你想要的背景圖片或者顏色。

我為了靈活性,我設定該屬性為名為"transparent"的圖片,這是一張1*1的透明圖片。這樣背景完全透明,真正使用的背景在my_dialog.xml裡定義

Part2.my_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="wrap_content"
    android:background="@drawable/frame_white"
    android:orientation="vertical"
    android:padding="15dp" >

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/systitle"
        android:textSize="18sp" />


    <!-- 分隔符用 -->

    <TextView
        android:id="@+id/tvSeparator"
        style="@style/TextViewAsSeparator"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp" />

    <TextView
        android:id="@+id/tvText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/sysText"
        android:textSize="18sp" />

    <!-- 該RelativeLayout作為子檢視容器 -->

    <RelativeLayout
        android:id="@+id/rlContent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/tvButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginLeft="10dp"
            android:background="@drawable/selector_text_button"
            android:clickable="true"
            android:paddingBottom="5dp"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:paddingTop="5dp"
            android:text="@string/ok"
            android:textColor="@color/wx_text_link"
            android:textSize="14sp"
            android:visibility="visible" />

        <TextView
            android:id="@+id/tvButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignWithParentIfMissing="true"
            android:layout_marginLeft="10dp"
            android:layout_toLeftOf="@id/tvButton2"
            android:background="@drawable/selector_text_button"
            android:clickable="true"
            android:paddingBottom="5dp"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:paddingTop="5dp"
            android:text="@string/cancel"
            android:textColor="@color/wx_text_link"
            android:textSize="14sp" />
    </RelativeLayout>

</LinearLayout>

Part3.MyDialog.java
package com.kwws;

import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.navigator.R;

/**
 * 自定義對話方塊
 * 
 * @author Kangwei
 * 
 */
public class MyDialog extends Dialog {

	/* 屬性 */

	// 資料
	String title = "title";
	String text = "text";
	String cancelButtonText = "cancel";
	String okButtonText = "ok";
	int okColor = -1;
	int cancelColor = -1;

	// UI
	Context mContent;
	TextView tvTitle;
	TextView tvSeparator;
	TextView tvText;
	TextView tvBtn1;
	TextView tvBtn2;
	RelativeLayout childViewWrapper;// 子元件容器

	/**
	 * 設定對話方塊樣式,設定null則不顯示
	 * 
	 * @param context
	 *            上下文
	 * @param title
	 *            標題
	 * @param text
	 *            文字
	 * @param cancelButtonText
	 *            取消按鈕文字
	 * @param okButtonText
	 *            確認按鈕文字
	 */
	public MyDialog(Context context, String title, String text,
			String cancelButtonText, String okButtonText) {
		super(context, R.style.wx_dialog);// 樣式定義,該樣式去除android預設的黑色背景邊框等。
		this.mContent = context;
		setDialogStyle(title, text, cancelButtonText, okButtonText);
	}

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		LayoutInflater layout = LayoutInflater.from(mContent);
		View view = layout.inflate(R.layout.my_dialog, null);
		setContentView(view);
		findView();
		initView();
		initViewEvent();
	}

	private void setDialogStyle(String title, String text,
			String cancelButtonText, String okButtonText) {
		this.title = title;
		this.text = text;
		this.cancelButtonText = cancelButtonText;
		this.okButtonText = okButtonText;
	}

	private void findView() {
		tvTitle = (TextView) findViewById(R.id.tvTitle);
		tvSeparator = (TextView) findViewById(R.id.tvSeparator);
		tvText = (TextView) findViewById(R.id.tvText);
		tvBtn1 = (TextView) findViewById(R.id.tvButton1);
		tvBtn2 = (TextView) findViewById(R.id.tvButton2);
		childViewWrapper = (RelativeLayout) findViewById(R.id.rlContent);
	}

	private void initView() {
		if (title == null) {
			tvTitle.setVisibility(View.GONE);
			tvSeparator.setVisibility(View.GONE);
		} else {
			tvTitle.setVisibility(View.VISIBLE);
			tvSeparator.setVisibility(View.VISIBLE);
			tvTitle.setText(title);
		}
		if (text == null) {
			tvText.setVisibility(View.GONE);
		} else {
			tvText.setVisibility(View.VISIBLE);
			tvText.setText(text);
		}
		if (cancelButtonText == null) {
			tvBtn1.setVisibility(View.GONE);
		} else {
			tvBtn1.setVisibility(View.VISIBLE);
			tvBtn1.setText(cancelButtonText);
			if (cancelColor != -1) {
				tvBtn1.setTextColor(cancelColor);
			}
		}
		if (okButtonText == null) {
			tvBtn2.setVisibility(View.GONE);
		} else {
			tvBtn2.setVisibility(View.VISIBLE);
			tvBtn2.setText(okButtonText);
			if (okColor != -1) {
				tvBtn2.setTextColor(okColor);
			}
		}

		if (childViewWrapper != null && childView != null) {
			childViewWrapper.addView(childView);
		}

		// 設定對話方塊大小
		Window dialogWindow = getWindow();
		WindowManager.LayoutParams lp = dialogWindow.getAttributes();
		DisplayMetrics d = mContent.getResources().getDisplayMetrics();
		// 獲取螢幕寬、高用
		lp.width = (int) (d.widthPixels * 0.8); // 高度設定為螢幕的0.8
		dialogWindow.setAttributes(lp);
	}

	private void initViewEvent() {
		View.OnClickListener listener = new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				switch (v.getId()) {
				case R.id.tvButton1:
					if (mListener != null) {
						mListener.onCancelButtonClick(MyDialog.this, v);
					}
					break;
				case R.id.tvButton2:
					if (mListener != null) {
						mListener.onOKButtonClick(MyDialog.this, v);
					}
					break;
				default:
					break;
				}
			}
		};
		tvBtn1.setOnClickListener(listener);
		tvBtn2.setOnClickListener(listener);
	}

	public interface OnDialogButtonClickListener {
		void onCancelButtonClick(MyDialog dialog, View view);

		void onOKButtonClick(MyDialog dialog, View view);
	}

	private OnDialogButtonClickListener mListener;

	/**
	 * 對話方塊按鈕監聽
	 * 
	 * @param listener
	 */
	public void setOnDialogButtonClickListener(
			OnDialogButtonClickListener listener) {
		this.mListener = listener;
	}

	/**
	 * 確定按鈕文字顏色
	 * 
	 * @param color
	 */
	public void setOKButtonTextColor(int color) {
		this.okColor = color;
	}

	/**
	 * 取消按鈕文字顏色
	 * 
	 * @param color
	 */
	public void setCancelButtonTextColor(int color) {
		this.cancelColor = color;
	}

	View childView;

	/**
	 * 在對話方塊顯示自定義檢視
	 */
	public void setChildView(View view) {
		childView = view;
	}
}

Part4.使用
	// 退出提示框
	public void exitDialog() {

		MyDialog dialog = new MyDialog(this, "提示", "確認退出?", "取消", "退出");
		dialog.setOKButtonTextColor(getResources().getColor(R.color.red));
		dialog.setOnDialogButtonClickListener(new OnDialogButtonClickListener() {

			@Override
			public void onOKButtonClick(MyDialog dialog, View view) {
				finish();
			}

			@Override
			public void onCancelButtonClick(MyDialog dialog, View view) {
				dialog.dismiss();
			}
		});
		dialog.show();
	}

/*
	 * 顯示配置對話方塊
	 */
	private void showConfigDialog() {
		// 讀取引數
		final SharedPreferencesHelper helper = new SharedPreferencesHelper(
				this, "config");
		final String ip = helper.getValue("serverip");
		final String port = helper.getValue("serverport");

		// 配置介面 輸入IP和埠的簡單介面,這裡就不附xml了
		View view = getLayoutInflater().inflate(R.layout.dialog_config, null);
		final EditText etIP = (EditText) view.findViewById(R.id.etIP);
		final EditText etPort = (EditText) view.findViewById(R.id.etPort);
		etIP.setText(ip != null ? ip : Ksoap2Helper.getServerIP());
		etPort.setText(port != null ? port : String.valueOf(Ksoap2Helper
				.getServerPort()));

		// 配置對話方塊
		MyDialog dialog = new MyDialog(this, "引數配置", null, "取消", "確定");
		// 新增配置介面到對話方塊
		dialog.setChildView(view);
		// 按鈕監聽
		dialog.setOnDialogButtonClickListener(new OnDialogButtonClickListener() {

			@Override
			public void onOKButtonClick(MyDialog dialog, View view) {
				// 儲存配置
				String newIP = etIP.getText().toString();
				String newPort = etPort.getText().toString();

				if (true) {
					helper.putValue("serverip", newIP);
					Ksoap2Helper.setServerIP(newIP);
				}
				if (true) {
					helper.putValue("serverport", newPort);
					Ksoap2Helper.setServerPort(Integer.valueOf(newPort));
				}
				dialog.dismiss();
			}

			@Override
			public void onCancelButtonClick(MyDialog dialog, View view) {
				dialog.dismiss();
			}
		});
		dialog.show();
	}