Android UI設計之自定義Dialog,實現各種風格效果的對話框

雖然Android給我們提供了衆多組件,但是使用起來都不是很方便,我們開發的APK都有自己的風格,如果使用了系統自帶的組件,總是覺得和應用的主題不着邊際並且看起來也不順心,那我們就需要自定義了,爲了方便大家對自定義組件的學習,我接下來準備了幾遍有關自定義的Dialog的文章,希望對大家有幫助。

在開發APK中最常見的估計就數彈出對話框了,這種對話框按照按鈕數量來分大致是三種:一個按鈕,兩個按鈕,三個按鈕。現在要講的就是按照按鈕數量分爲以上三類吧(當然了可以有更多的按鈕,只要你願意)。

自定義Dialog對話大致可分爲三步走吧:第一步就是重新定義Dialog的樣式,第二部就是定義我們需要顯示的佈局文件,第三部就是設置事件監聽器。

好了,還是老規矩,首先貼上工程目錄:



在工程中我定義了一個基類BaseBean,這個類用來作爲在整個工程項目中的基類,基類中定義一些公共的常用的屬性,如有需要另外屬性我們只需要繼承基類就好了,所以我定義了DialogBean,它繼承了BaseBean,因此擁有了BaseBean的所有功能。那我們先看看BaseBean中定義的都是啥吧:

public class BaseBean {

	/**
	 * 標題
	 */
	String title;
	/**
	 * 內容
	 */
	String content;

	/**
	 * 獲取標題
	 * 
	 * @return 標題
	 */
	public String getTitle() {
		return title;
	}

	/**
	 * 設置標題
	 * 
	 * @param title
	 *            標題
	 */
	public void setTitle(String title) {
		this.title = title;
	}

	/**
	 * 獲取內容
	 * 
	 * @return 內容
	 */
	public String getContent() {
		return content;
	}

	/**
	 * 設置內容
	 * 
	 * @param content
	 *            內容
	 */
	public void setContent(String content) {
		this.content = content;
	}
}

以上是基類中的內容,那接下來就看看Dialog中是怎麼定義的吧:

public class DialogBean extends BaseBean {

	/**
	 * 點擊返回鍵是否可消失
	 */
	boolean cancelable;
	/**
	 * 點擊蒙皮是否可以消失
	 */
	boolean outCancelable;
	/**
	 * 事件監聽
	 */
	DialogClickListener listener;
	/**
	 * 按鈕類型【默認顯示兩個按鈕】
	 */
	DialogButtonType buttonType = DialogButtonType.TwoButton;

	/**
	 * 顯示佈局資源ID
	 */
	Integer layoutResID;

	public DialogBean() {
	}

	/**
	 * 點擊BACK鍵是否可以消失
	 * 
	 * @return 【true:可消失】【false:不消失】
	 */
	public boolean isCancelable() {
		return cancelable;
	}

	/**
	 * 設置點擊BACK鍵是否可以消失
	 * 
	 * @param cancelable
	 *            【true:可消失】【false:不消失】
	 */
	public void setCancelable(boolean cancelable) {
		this.cancelable = cancelable;
	}

	/**
	 * 點擊蒙皮是否可以消失
	 * 
	 * @return 【true:可消失】【false:不消失】
	 */
	public boolean isOutCancelable() {
		return outCancelable;
	}

	/**
	 * 設置點擊蒙皮是否可以消失
	 * 
	 * @param outCancelable
	 *            【true:可消失】【false:不消失】
	 */
	public void setOutCancelable(boolean outCancelable) {
		this.outCancelable = outCancelable;
	}

	/**
	 * 獲取事件監聽器
	 * 
	 * @return 事件監聽器
	 */
	public DialogClickListener getListener() {
		return listener;
	}

	/**
	 * 設置事件監聽器
	 * 
	 * @param listener
	 *            事件監聽器
	 */
	public void setListener(DialogClickListener listener) {
		this.listener = listener;
	}

	/**
	 * 獲取按鈕類型
	 * 
	 * @return 按鈕類型
	 */
	public DialogButtonType getButtonType() {
		return buttonType;
	}

	/**
	 * 設置按鈕類型
	 * 
	 * @param buttonType
	 *            按鈕類型
	 */
	public void setButtonType(DialogButtonType buttonType) {
		this.buttonType = buttonType;
	}

	/**
	 * 獲取要顯示的佈局ID
	 * 
	 * @return 要顯示的佈局ID
	 */
	public Integer getLayoutResID() {
		return layoutResID;
	}

	/**
	 * 設置要顯示的佈局ID
	 * 
	 * @param layoutResID
	 *            要顯示的佈局ID
	 */
	public void setLayoutResID(Integer layoutResID) {
		this.layoutResID = layoutResID;
	}

	/**
	 * 按鈕類型
	 * 
	 * @author llew
	 */
	public enum DialogButtonType {
		/**
		 * 一個按鈕
		 */
		OneButton,
		/**
		 * 兩個按鈕
		 */
		TwoButton,
		/**
		 * 三個按鈕
		 */
		ThreeButton
	}

	/**
	 * 按鈕點擊監聽器
	 * 
	 * @author llew
	 * 
	 */
	public interface DialogClickListener {
		/**
		 * 點擊按鈕
		 * 
		 * @param buttonIndex
		 *            按鈕下標【從0開始】
		 */
		public void onClick(int buttonIndex);
	}
}

DialogBean中的代碼註釋的都很詳細了,就不再多解釋了,主要就是封裝了對話框中常見的屬性。接下來就看看定義的所需要的Dialog的樣式吧:

<style name="theme_dialog_alert" parent="@android:style/Theme.Dialog">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
</style>

樣式主要定義了該對話框沒有標題,背景顏色是透明的,現在所需的樣式定義完了,主角GlobleDialog該出場了,代碼如下:

public class GlobleDialog extends Dialog implements View.OnClickListener {

	private TextView titleTextView, contentTextView;
	private Button leftButton, centerButton ,rightButton;
	private DialogBean bean;
	
	public GlobleDialog(Context context, int theme, DialogBean bean) {
		super(context, theme);
		this.bean = bean;
		initWedgits();
	}

	/**
	 * 初始化各組件
	 */
	private void initWedgits() {
		try {
			setCancelable(bean.isCancelable());
			setCanceledOnTouchOutside(bean.isOutCancelable());
			View dialogView = getLayoutInflater().inflate(bean.getLayoutResID(), null);
			titleTextView = (TextView) dialogView.findViewById(R.id.button_title);
			contentTextView = (TextView) dialogView.findViewById(R.id.button_content);
			titleTextView.setText(bean.getTitle());
			contentTextView.setText(bean.getContent());
    		leftButton = (Button) dialogView.findViewById(R.id.button_left);
    		centerButton = (Button) dialogView.findViewById(R.id.button_center);
    		rightButton = (Button) dialogView.findViewById(R.id.button_right);
    		
    		leftButton.setOnClickListener(this);
    		centerButton.setOnClickListener(this);
    		rightButton.setOnClickListener(this);
    		
    		if(DialogButtonType.OneButton == bean.getButtonType()) {
    			leftButton.setVisibility(View.GONE);
    			rightButton.setVisibility(View.GONE);
    		} else if(DialogButtonType.TwoButton == bean.getButtonType()) {
    			centerButton.setVisibility(View.GONE);
    		}
    		setContentView(dialogView);
    		
    		Window dialogWindow = getWindow();
    		WindowManager.LayoutParams lp = dialogWindow.getAttributes();
    		dialogWindow.setGravity(Gravity.CENTER);
    		DisplayMetrics dm = new DisplayMetrics();
    		dialogWindow.getWindowManager().getDefaultDisplay().getMetrics(dm);
    		lp.width = dm.widthPixels - 20;
    		dialogWindow.setAttributes(lp);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	@Override
	public void onClick(View v) {
		try {
			switch (v.getId()) {
			case R.id.button_left:
				bean.getListener().onClick(0);
				break;
			case R.id.button_center:
				bean.getListener().onClick(1);
				break;
			case R.id.button_right:
				bean.getListener().onClick(2);
				break;
			default:
				break;
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

}

自定義的GlobleDialog的代碼寫完了,那就看看是如何使用的吧:

package com.llew.e.dialog.view.activity;

import android.app.Activity;
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;
import android.widget.Toast;

import com.llew.e.dialog.R;
import com.llew.e.dialog.view.bean.DialogBean;
import com.llew.e.dialog.view.bean.DialogBean.DialogButtonType;
import com.llew.e.dialog.view.bean.DialogBean.DialogClickListener;
import com.llew.e.dialog.view.wedgit.GlobleDialog;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
	
	private Dialog dialog;
	private TextView textView;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        textView = (TextView) findViewById(R.id.textview);
        textView.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				DialogBean dialogBean = new DialogBean();
		        dialogBean.setCancelable(true);
		        dialogBean.setOutCancelable(true);
		        dialogBean.setTitle("小練習");
		        dialogBean.setContent("在這裏輸入提示信息");
		        dialogBean.setButtonType(DialogButtonType.TwoButton);
		        dialogBean.setLayoutResID(R.layout.dialog_common);
		        dialogBean.setListener(new DialogClickListener() {
					@Override
					public void onClick(int buttonIndex) {
						switch (buttonIndex) {
						case 0:
							Toast.makeText(MainActivity.this, "點擊了播放", Toast.LENGTH_SHORT).show();
							break;
						case 1:
							Toast.makeText(MainActivity.this, "點擊了暫停", Toast.LENGTH_SHORT).show();
							break;
						case 2:
							Toast.makeText(MainActivity.this, "點擊了停止", Toast.LENGTH_SHORT).show();
							break;
						default:
							break;
						}
					}
				});
		        createDialog(dialogBean);
			}
		});
    }
    
    public void createDialog(DialogBean bean) {
    	if(null == dialog) {
    		dialog = new GlobleDialog(MainActivity.this, R.style.theme_dialog_alert, bean);
    	}
    	dialog.show();
    }
}

代碼實在是沒有什麼好解釋的,我相信你一看就會,那看看運行效果吧:


好了,到這裏自定義Dialog實現不同風格效果的對話框就講解完了,感謝收看。

界面看上去有點醜,大家可以自己修改顏色值或者使用圖片代替


源碼下載

發佈了37 篇原創文章 · 獲贊 87 · 訪問量 18萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章