안드로이드(Android) 다이얼로그(Dialog) Animation 효과 넣는 방법

안드로이드(Android) 다이얼로그(Dialog) Animation 효과 넣는 방법

 

환경: Eclipse Mars, Android 4.2.2

 

안드로이드에서 다이얼로그(Dialog) 를 서서히 뜨게 하거나 오른쪽으로 사라지게 하는 등의 애니메이션 효과를 적용하는 방법에 대해 알아 보겠습니다. 여기에서 사용하는 옵션값들을 잘 활용하시면 좀 더 화려하게 동작을 하는 어플을 만들 수 있습니다. 

 

▼ 먼저 애니메이션 효과를 적용하기 위해서는 XML 작업을 해야 합니다. style.xml 내부에 아래 소스를 복사합니다. 소스에서는 style name 을 셋팅하게 됩니다. PauseDialogAnimation 에는 두개의 item 값이 있죠. 첫번째 windowEnterAnimation 은 적용한 위젯이 시작될 때 적용됩니다. 세부 설정값은 @anim/fadein 에 있겠죠. 두 번째 windowExitAnimation 은 위젯이 사라질 때 설정입니다. @android:anim/slide_out_right 은 안드로이드에서 제공하는 설정값으로 사라질 때 화면 오른쪽으로 이동하게 됩니다.

 

styles.xml

 

<style name="PauseDialog" parent="@android:style/Theme.Dialog">
    <item name="android:windowAnimationStyle">@style/PauseDialogAnimation</item>
</style> 

<style name="PauseDialogAnimation">
    <item name="android:windowEnterAnimation">@anim/fadein</item>
    <item name="android:windowExitAnimation">@android:anim/slide_out_right</item>
</style>

 

▼ windowEnterAnimation 에 적용한 XML 의 내용입니다. 위젯이 시작될 때 적용되는 값들이며 duration 에 값은 2초 입니다. Alpha 값이 0 ~ 1 이므로 2초동안 흐려졌다가 서서히 나타나게 되는 것이죠.

 

fadein.xml

 

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="2000" />

 

▼ 이번에는 아래 XML 대신 @android:anim/slide_out_right 사용했습니다. 화면이 종료될 때 사용하시면 되겠죠.

 

fadeout.xml

 

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/anticipate_interpolator"
    android:fromAlpha="1" android:toAlpha="0" android:duration="1000" />

 

▼ 이렇게 애니메이션 효과를 적용하기 위해 만든 XML 들을 반영해야 겠죠. 반영을 위해서는 Dialog 클래스에 기본적으로 제공되는 windowAnimations 속성값에 style name 값을 넣으시면 됩니다.

 

// 다이얼로그 생성
AlertDialog alertDialog = alertDialogBuilder.create();
alertDialog.getWindow().getAttributes().windowAnimations = R.style.PauseDialogAnimation;

 

▼ 아래는 애니메이션 효과를 적용한 AlertDialog 다이얼로그 전체 Activity 소스 입니다. 애니메이션 효과는 XML 만 잘 만들어 두시면 어느 위젯이든 재사용이 가능합니다. 위젯에는 기본적으로 windowAnimations 속성값이 다 있기 때문입니다.

 

import android.app.Activity;
import android.app.AlertDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class AlertDialogActivity extends Activity implements
		OnClickListener {

	final Context context = this;
	private Button button;

	public void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_alert_dialog);

		button = (Button) findViewById(R.id.btn_alert);

		// 클릭 이벤트
		button.setOnClickListener(this);
	}

	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.btn_alert:
			AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(
					context);

			// 제목셋팅
			alertDialogBuilder.setTitle("프로그램 안내");

			// key 셋팅
			alertDialogBuilder
					.setOnKeyListener(new DialogInterface.OnKeyListener() {
						public boolean onKey(DialogInterface dialog,
								int keyCode, KeyEvent event) {
							if (keyCode == KeyEvent.KEYCODE_BACK) {
								finish();
								dialog.dismiss();
								return true;
							}
							return false;
						}
					});

			// AlertDialog 셋팅
			alertDialogBuilder
					.setMessage("공지사항 내용표현")
					.setCancelable(false)
					.setPositiveButton("종료",
							new DialogInterface.OnClickListener() {
								public void onClick(
										DialogInterface dialog, int id) {
									// 프로그램을 종료한다
									AlertDialogActivity.this.finish();
								}
							})
					.setNegativeButton("취소",
							new DialogInterface.OnClickListener() {
								public void onClick(
										DialogInterface dialog, int id) {
									// 다이얼로그를 취소한다
									dialog.cancel();
								}
							});

			// 다이얼로그 생성
			AlertDialog alertDialog = alertDialogBuilder.create();
			alertDialog.getWindow().getAttributes().windowAnimations = R.style.PauseDialogAnimation;

			// 다이얼로그 보여주기
			alertDialog.show();
			break;

		default:
			break;
		}
	}
}