自定义Dialog 以加载进度为例

一、概述

最近项目中有个需求，就是打开一个页面时需要用到加载进度，提高用户的体验度，所以就想到了自定义Dialog来实现。 其中使用了自定义View，自定义style，帧动画等。

二、效果图

dialog有一定的透明度。

三、实现自定义Dialog

（一）布局相关文件

1、styles.xml

首先我们定义一个style样式，用于dialog的外观，注意文件夹的路径：values/styles.xml

<resources>
	<style name="mdialog" 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">@color/transparent</item> <!--背景透明-->
	    <item name="android:backgroundDimEnabled">false</item> <!--模糊-->
	</style>
</resources>

2、dialog_bg.xml

然后给dialog定义一个shape背景，用于dialog的圆角，注意文件夹的路径：drawable/dialog_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 实心 -->  
    <solid android:color="#50000000" />  
    <!-- 圆角 -->  
    <corners android:radius="10dp" />  
</shape>

3、dialog_loading.xml

然后是加载进度的帧动画，总共有7张图，来回切换，达到动画效果。如果把图片改为其他图片，则可以做出向美团与顺丰那样的小人再跑的效果。

<?xml version="1.0" encoding="UTF-8"?>
<animation-list android:oneshot="false"
	xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:duration="150" android:drawable="@drawable/dialog_loading_01" />
	<item android:duration="150" android:drawable="@drawable/dialog_loading_02" />
	<item android:duration="150" android:drawable="@drawable/dialog_loading_03" />
	<item android:duration="150" android:drawable="@drawable/dialog_loading_04" />
	<item android:duration="150" android:drawable="@drawable/dialog_loading_05" />
	<item android:duration="150" android:drawable="@drawable/dialog_loading_06" />
	<item android:duration="150" android:drawable="@drawable/dialog_loading_07" />
</animation-list>

4、dialog_view.xml

最后附上dialog的布局文件，其中只有一个ProgressBar跟一个TextView。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/dialog_bg"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:paddingTop="5dp"
    android:paddingBottom="5dp"
    >

    <ProgressBar
        android:id="@+id/loading_progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:indeterminate="false"
        android:indeterminateDrawable="@anim/dialog_loading" />

    <TextView
        android:id="@+id/loading_text"
        android:layout_marginTop="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#ffffff"
        android:layout_below="@id/loading_progressBar"
        android:layout_centerHorizontal="true"
        android:text="加载中"/>

</RelativeLayout>

（二）实现的java代码

1、LoadingDialog.java

自定义dialog的类文件。

public class LoadingDialog extends Dialog {

	public LoadingDialog(Context context) {
		super(context);
		setLoadingDialog();
	}

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

	protected LoadingDialog(Context context, boolean cancelable,
			OnCancelListener cancelListener) {
		super(context, cancelable, cancelListener);
		setLoadingDialog();
	}
	
	private void setLoadingDialog() {
		// 加载自定义dialog的布局文件
		View dialog_view = LayoutInflater.from(getContext()).inflate(R.layout.dialog_view, null);
		// 无标题
		this.requestWindowFeature(Window.FEATURE_NO_TITLE);
		//设置布局
		super.setContentView(dialog_view);
		
		// 点击dialog外侧不会消失
        this.setCanceledOnTouchOutside(false);
	}
}

2、MainActivity.java

dialog的使用。

public class MainActivity extends Activity {

	private Button button;
	private LoadingDialog dialog;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		button = (Button) findViewById(R.id.bt_open_dialog);
		button.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				// 使用的时候只需要new出来就行，然后指定我们自定义的style
				dialog = new LoadingDialog(MainActivity.this,R.style.mdialog);
				// 显示的时候需要show()出来
        		dialog.show();
        		// 使用handler发送一个延时的消息，模拟耗时操作
        		handler.sendEmptyMessageDelayed(88, 3000);
			}
		});
	}
	
	private Handler handler = new Handler(){
		public void handleMessage(android.os.Message msg) {
			// 隐藏dialog
			dialog.dismiss();
			Intent intent = new Intent(MainActivity.this,SecondActivity.class);
			startActivity(intent);
		};
	};
}

至此，自定义dialog的使用就到此结束了，最后，附上Demo：http://download.youkuaiyun.com/detail/xiaoli100861/9180003