[Android] Custom Dialog & Alert Dialog

이번엔 다이얼로그를 응용해 Custom Dialog를 만들어 보려고 한다.

(물론 여기저기의 글들을 참조하고 많은 뻘짓을 하고나서야 만들었다.)

다이얼로그는 그본적으로 4가지 구성요소로 되어있다.

다이얼 로그 구성요소

Title : 다이얼로그의 제목부분에 들어가는 String

Message : 다이얼로그의 내용에 해당하는 String

PositiveButton : OK button

NegativeButton : Cancel button

AlertDialog

기본적인 알럿다이얼로그를 이용해 다이얼로그를 만들면 이렇게 나온다.

CustomDialog

만들려는 커스텀다이얼로그의 기본적인 모양은 이렇다.

사실 많이 바뀐건 없고, 기본적인 틀에서 벗어나서 이미지를 사용해,

테두리와 배경을 넣어준것 뿐이다.

하지만 이걸 하기 위해선 몇가지 작업을 더 해주어야 한다.

- CustomDialog는 만드는 것이기때문에 Builder 클래스를 만들어야한다.

- LayoutInflater를 통해 다이얼로그의 레이아웃을 잡아주어야한다.

- CustomDialog를 만들수 있게 해주는 클래스를 만들어야 한다.

(extends Dialog)

- 호출하려는 activity에서
액티비티이름.this.showDialog(다이얼로그아이디); 로 호출해서 사용한다.

- Dialog를 호출할 activity에서 onCreateDialog()를 override해서 만든다.

( showDialog로 다이얼로그를 호출하면 자동으로 실행된다.)

- 어쨋든 AlertDialog와 같은 기능을 할 수 있게 똑같이 만들면 된다.

골자는 이 세가지를 구현하는 것이다.

- AlertDialog는 클래스 안에 Builder 클래스가 존재, 셋팅과 생성을 도와준다.

- AlertDialog는 Builder 클래스에 set....메소드들이 구현되어있다.

- create메소드가 구현되어있다.

Builder 클래스

public static class Builder { }

- 빌더클래스는 static으로 선언된 클래스이다.

- static으로 선언된 클래스는 그 안의 메소드들에 대한 접근이 가능하다.

빌더 클래스에 필요한 멤버변수들

- context

- title

- message

- positiveButtonText

- negativeButtonText

- contentView

- DialogInterface.OnClickListener

빌더 클래스에 필요한 메소드 & set...() 메소드

- 생성자 : Builder(Context context) { }

- setTitle

- setMessage

- setPositiveButton

- setNegativeButton

- setContentView

public Builder(Context context)
{

this.context = context;

}

public Builder setTitle(int title)
{

this.title = (String) context.getText(title);

return this;

}

public Builder setTitle(String title)
{

this.title = title;

return this;

}

public Builder setMessage(String message)
{

this.message = message;

return this;

}

public Builder setMessage(int message)
{

this.message = (String) context.getText(message);

return this;

}

public Builder setPositiveButton(int positiveButtonText,

DialogInterface.OnClickListener listener)
{

this.positiveButtonText = (String) context

.getText(positiveButtonText);

this.positiveButtonClickListener = listener;

return this;

}

public Builder setPositiveButton(String positiveButtonText,

DialogInterface.OnClickListener listener)
{

this.positiveButtonText = positiveButtonText;

this.positiveButtonClickListener = listener;

return this;

}

public Builder setNegativeButton(int negativeButtonText,

DialogInterface.OnClickListener listener)
{

this.negativeButtonText = (String) context

.getText(negativeButtonText);

this.negativeButtonClickListener = listener;

return this;

}

public Builder setNegativeButton(String negativeButtonText,

DialogInterface.OnClickListener listener)
{

this.negativeButtonText = negativeButtonText;

this.negativeButtonClickListener = listener;

return this;

}

public Builder setContentView(View v)
{

this.contentView = v;

return this;

}

빌더클래스에 필요한 create() 메소드

public CustomDialog create() {

LayoutInflater inflater = (LayoutInflater) context

.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

// instantiate the dialog with the custom Theme

final CustomDialog dialog = new CustomDialog(context,

R.style.Dialog);

View layout = inflater.inflate(R.layout.dialog, null);

dialog.addContentView(layout, new LayoutParams(

LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));

// set the dialog title

((TextView) layout.findViewById(R.id.title)).setText(title);

// set the confirm button

if (positiveButtonText != null) {

((Button) layout.findViewById(R.id.positiveButton))

.setText(positiveButtonText);

if (positiveButtonClickListener != null) {

((Button) layout.findViewById(R.id.positiveButton))

.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {

positiveButtonClickListener.onClick(

dialog,

DialogInterface.BUTTON_POSITIVE);

}

});

}

} else {

// if no confirm button just set the visibility to GONE

layout.findViewById(R.id.positiveButton).setVisibility(

View.GONE);

}

// set the cancel button

if (negativeButtonText != null) {

((Button) layout.findViewById(R.id.negativeButton))

.setText(negativeButtonText);

if (negativeButtonClickListener != null) {

((Button) layout.findViewById(R.id.negativeButton))

.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {

positiveButtonClickListener.onClick(

dialog,

DialogInterface.BUTTON_NEGATIVE);

}

});

}

} else {

// if no confirm button just set the visibility to GONE

layout.findViewById(R.id.negativeButton).setVisibility(

View.GONE);

}

// set the content message

if (message != null) {

((TextView) layout.findViewById(

R.id.message)).setText(message);

} else if (contentView != null) {

// if no message set

// add the contentView to the dialog body

((LinearLayout) layout.findViewById(R.id.content))

.removeAllViews();

((LinearLayout) layout.findViewById(R.id.content))

.addView(contentView,

new LayoutParams(

LayoutParams.WRAP_CONTENT,

LayoutParams.WRAP_CONTENT));

}

dialog.setContentView(layout);

return dialog;

}

Layout - xml files

values/themes.xml

values/styles.xml

layout/dialog.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical" android:layout_width="fill_parent"

android:minWidth="280dip" android:layout_height="wrap_content"

<LinearLayout android:orientation="vertical"

android:background="@drawable/header" android:layout_width="fill_parent"

android:layout_height="wrap_content"

<TextView style="@style/DialogText.Title" android:id="@+id/title"

android:paddingRight="8dip" android:paddingLeft="8dip"

android:background="@drawable/title"
android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</LinearLayout>

<LinearLayout

android:id="@+id/content"

android:orientation="horizontal" android:background="@drawable/center"

android:layout_width="fill_parent" android:layout_height="wrap_content">

<LinearLayout

android:orientation="vertical"

android:layout_width="wrap_content"
android:layout_height="wrap_content"

<ImageView android:layout_width="fill_parent"

android:layout_height="wrap_content"
/>

</LinearLayout>

<LinearLayout

android:orientation="vertical"

android:layout_width="wrap_content"
android:layout_height="wrap_content"

<TextView style="@style/DialogText" android:id="@+id/message"

android:padding="5dip"
android:layout_width="fill_parent"

android:layout_height="wrap_content" />

</LinearLayout>

<LinearLayout android:orientation="horizontal"

android:background="@drawable/footer" android:layout_width="fill_parent"

android:layout_height="wrap_content">

<Button android:id="@+id/positiveButton"

android:layout_marginTop="3dip" android:layout_width="0dip"

android:layout_weight="1" android:layout_height="wrap_content"

android:singleLine="true" />

<Button android:id="@+id/negativeButton"

android:layout_marginTop="3dip" android:layout_width="0dip"

android:layout_weight="1" android:layout_height="wrap_content"

android:singleLine="true" />

</LinearLayout>

필요한 그림파일들

이런 처리를 거쳐 이미지가 들어간 커스텀 다이얼로그를 만들어보았다.

스크롤 테스트를 하며 만들었던코드에 추가적으로 각 건물 클릭시 해당 건물에 맞는 정보와 이미지를 출력해 주는 커스텀 다이얼로그이다. 사실 이걸 하려고 커스텀 다이얼로그와 스크롤도 공부한 것.

예제 파일

연계 된 글

- 이미지 스크롤 뷰

식탁 위의 프로그래머

[Android] Custom Dialog & Alert Dialog

'Android > Dialog' 카테고리의 다른 글

티스토리툴바

[Android] Custom Dialog & Alert Dialog

'Android > Dialog' 카테고리의 다른 글

'Android/Dialog' Related Articles

티스토리툴바