안드로이드(Android) 사용자정의 다이얼로그(Custom Dialog) 만드는 방법

안드로이드(Android) 사용자정의 다이얼로그(Custom Dialog) 만드는 방법

 

환경 : Eclipse Mars, Android 4.2.2

 

이번에는 다이얼로그 클래스를 상속받아서 직접 만들어 보겠습니다. 기존에 제공하는 팝업창이 아닌 직접 레이아웃을 디자인 하고 싶다면 클래스를 직접 만들어야 겠죠.

 

 

1. 사용자정의 다이얼로그 만들기

 

▼ 사용자정의 다이얼로그는 android.app.Dialog 클래스를 상속받습니다. 그리고 생성자 함수에서 메인 Activity 의 Context 객체와 다이얼로그에 쓰일 제목, 내용, 버튼 두개에 대한 이벤트 객체를 받을 것입니다.  이렇게 받은 4개는 다이얼로그 화면에 나타낼 위젯에 셋팅하시면 되겠죠. 아래 그림과 같이 생성자가 두개인 것은 다이얼로그에 버튼이 하나 혹은 두개일수 있기 때문입니다.

 

// 클릭버튼이 하나일때 생성자 함수로 클릭이벤트를 받는다.
public CustomDialog(Context context, String title,
		View.OnClickListener singleListener) {
	super(context, android.R.style.Theme_Translucent_NoTitleBar);
	this.mTitle = title;
	this.mLeftClickListener = singleListener;
}

// 클릭버튼이 확인과 취소 두개일때 생성자 함수로 이벤트를 받는다
public CustomDialog(Context context, String title,
		String content, View.OnClickListener leftListener,
		View.OnClickListener rightListener) {
	super(context, android.R.style.Theme_Translucent_NoTitleBar);
	this.mTitle = title;
	this.mContent = content;
	this.mLeftClickListener = leftListener;
	this.mRightClickListener = rightListener;
}

 

▼ 이렇게 생성자 함수로 데이터를 받은후 onCreate() 함수에서 다이얼로그 위젯들에 값을 셋팅합니다. 제목과 내용, 두개의 버튼 이벤트를 셋팅합니다. 이렇게 이벤트를 셋팅해 두면 메인 Activity 클릭 이벤트에서 제어가 가능하겠죠.

 

import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.TextView;

public class CustomDialog extends Dialog {

	private TextView mTitleView;
	private TextView mContentView;
	private Button mLeftButton;
	private Button mRightButton;
	private String mTitle;
	private String mContent;

	private View.OnClickListener mLeftClickListener;
	private View.OnClickListener mRightClickListener;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		
		// 다이얼로그 외부 화면 흐리게 표현 
		WindowManager.LayoutParams lpWindow = new WindowManager.LayoutParams();
		lpWindow.flags = WindowManager.LayoutParams.FLAG_DIM_BEHIND;
		lpWindow.dimAmount = 0.8f;
		getWindow().setAttributes(lpWindow);

		setContentView(R.layout.activity_custom_dialog);

		mTitleView = (TextView) findViewById(R.id.txt_title);
		mContentView = (TextView) findViewById(R.id.txt_content);
		mLeftButton = (Button) findViewById(R.id.btn_left);
		mRightButton = (Button) findViewById(R.id.btn_right);

		// 제목과 내용을 생성자에서 셋팅한다.
		mTitleView.setText(mTitle);
		mContentView.setText(mContent);

		// 클릭 이벤트 셋팅
		if (mLeftClickListener != null && mRightClickListener != null) {
			mLeftButton.setOnClickListener(mLeftClickListener);
			mRightButton.setOnClickListener(mRightClickListener);
		} else if (mLeftClickListener != null
				&& mRightClickListener == null) {
			mLeftButton.setOnClickListener(mLeftClickListener);
		} else {

		}
	}

	// 클릭버튼이 하나일때 생성자 함수로 클릭이벤트를 받는다.
	public CustomDialog(Context context, String title,
			View.OnClickListener singleListener) {
		super(context, android.R.style.Theme_Translucent_NoTitleBar);
		this.mTitle = title;
		this.mLeftClickListener = singleListener;
	}

	// 클릭버튼이 확인과 취소 두개일때 생성자 함수로 이벤트를 받는다
	public CustomDialog(Context context, String title,
			String content, View.OnClickListener leftListener,
			View.OnClickListener rightListener) {
		super(context, android.R.style.Theme_Translucent_NoTitleBar);
		this.mTitle = title;
		this.mContent = content;
		this.mLeftClickListener = leftListener;
		this.mRightClickListener = rightListener;
	}
}

 

▼ 아래는 다이얼로그에 쓰인 전체 레이아웃 입니다.

activity_custom_dialog.xml

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="300dip"
        android:layout_height="200dip"
        android:background="@android:color/darker_gray"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/txt_title"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="@android:color/black"
            android:textSize="15sp" />

        <TextView
            android:id="@+id/txt_content"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="@android:color/black"
            android:textSize="25sp" />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="40dip"
            android:gravity="center"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/btn_left"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:text="확인" />

            <Button
                android:id="@+id/btn_right"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:text="취소" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

 

2. 다이얼로그를 실행하는 메인 Activity

 

▼ 메인 Activity 화면에서는 버튼 하나를 만들어서 클릭했을 때 위에서 만든 CustomDialog 객체를 생성하고 show() 함수로 띄웁니다. CustomDialog 객체를 생성할 때 생성자의 인수로 제목, 내용, 두개의 버튼 이벤트 객체를 넘겼습니다. 이렇게 넘겨 두면 메인에서 다이얼로그를 제어 할수 있는 것이죠.

 

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

public class MainCustomDialog extends Activity {

	private CustomDialog mCustomDialog;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main_dialog);
	}

	public void onClickView(View v) {
		switch (v.getId()) {
		case R.id.bt_main:
			mCustomDialog = new CustomDialog(this, 
					"[다이얼로그 제목]", // 제목
					"다이얼로그 내용 표시하기", // 내용 
					leftListener, // 왼쪽 버튼 이벤트
					rightListener); // 오른쪽 버튼 이벤트
			mCustomDialog.show();
			break;
		}
	}

	private View.OnClickListener leftListener = new View.OnClickListener() {
		public void onClick(View v) {
			Toast.makeText(getApplicationContext(), "왼쪽버튼 클릭",
					Toast.LENGTH_SHORT).show();
			mCustomDialog.dismiss();
		}
	};

	private View.OnClickListener rightListener = new View.OnClickListener() {
		public void onClick(View v) {
			Toast.makeText(getApplicationContext(), "오른쪽버튼 클릭",
					Toast.LENGTH_SHORT).show();
		}
	};

}

 

▼ 아래는 메인 Activity 전체 레이아웃입니다. 버튼하나만 추가 되어 있습니다.

activity_main_dialog.xml

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#3F0099"
        android:gravity="center"
        android:paddingBottom="@dimen/abc_action_bar_icon_vertical_padding"
        android:paddingTop="@dimen/abc_action_bar_icon_vertical_padding"
        android:text="사용자 정의 다이얼로그 테스트 "
        android:textColor="#FFFFFF" />

    <Button
        android:id="@+id/bt_main"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:onClick="onClickView"
        android:text="커스텀 Dialog 클릭!!" />

</LinearLayout>