[안드로이드] 커스텀 다이얼로그 ( Custom Dialog ) 만들기
일반적인 다이얼로그로 AlertDailog가 있습니다.
하지만 AlertDialog는 타이틀, 메시지, 버튼으로만 구성할 수 있습니다.
그래서 사용자에 맞게 다이얼로그를 커스텀하여 만들어야 할때가 있습니다.
그럼 Custom Dialog (사용자 정의 다이얼로그)를 만들어 보겠습니다.
아래 영상은 커스텀 다이얼로그 사용 영상입니다.
커스텀 다이얼로그를 호출할 메인 액티비티 레이아웃 먼저 정의합니다.
* activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.studio572.customdialog.MainActivity">
<LinearLayout
android:gravity="center"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff">
<TextView
android:id="@+id/main_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Main Label"
android:textSize="20dp"
android:textColor="#000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button"
android:layout_width="250dp"
android:layout_height="60dp"
android:text="Custom Dialog 호출"
android:textColor="#000000"
android:textSize="16dp"/>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
TextView의 main_label에 커스텀 다이얼로그에서 입력한 값이 출력됩니다.
Button의 button은 커스텀 다이얼로그 호출하는 버튼이 되겠습니다.
다음은 메인 액티비티 코드입니다.
* MainActivity.java
package com.studio572.customdialog;
import android.support.v4.media.session.PlaybackStateCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 커스텀 다이얼로그에서 입력한 메시지를 출력할 TextView 를 준비한다.
final TextView main_label = (TextView) findViewById(R.id.main_label);
// 커스텀 다이얼로그를 호출할 버튼을 정의한다.
Button button = (Button) findViewById(R.id.button);
// 커스텀 다이얼로그 호출할 클릭 이벤트 리스너 정의
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// 커스텀 다이얼로그를 생성한다. 사용자가 만든 클래스이다.
CustomDialog customDialog = new CustomDialog(MainActivity.this);
// 커스텀 다이얼로그를 호출한다.
// 커스텀 다이얼로그의 결과를 출력할 TextView를 매개변수로 같이 넘겨준다.
customDialog.callFunction(main_label);
}
});
}
}
다음은 커스텀 다이얼로그 레이아웃을 정의합니다.
원하는 디자인으로 정의하면 되겠습니다.
저는 간단하게 타이틀, 입력칸, 확인/취소 버튼으로 디자인 했습니다.
*custom_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="match_parent"
android:layout_height="match_parent"
android:background="#ffffff">
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center"
android:textColor="#ffffff"
android:textSize="16dp"
android:text="커스텀 다이얼로그"
android:background="@color/colorAccent"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000000"/>
<EditText
android:id="@+id/mesgase"
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center"
android:textColor="#000000"
android:textSize="16dp"
android:hint="내용을 입력하세요."/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000000"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal">
<Button
android:id="@+id/okButton"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="확인"
android:textColor="#000000"
android:textSize="16dp"
android:background="#ffffff"/>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#000000" />
<Button
android:id="@+id/cancelButton"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="취소"
android:textColor="#000000"
android:textSize="16dp"
android:background="#ffffff"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000000"/>
</LinearLayout>
다음은 커스텀 다이얼로그의 java코드입니다.
* CustomDialog.java
package com.studio572.customdialog;
import android.app.Dialog;
import android.content.Context;
import android.view.View;
import android.view.Window;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;
/**
* Created by Administrator on 2017-08-07.
*/
public class CustomDialog {
private Context context;
public CustomDialog(Context context) {
this.context = context;
}
// 호출할 다이얼로그 함수를 정의한다.
public void callFunction(final TextView main_label) {
// 커스텀 다이얼로그를 정의하기위해 Dialog클래스를 생성한다.
final Dialog dlg = new Dialog(context);
// 액티비티의 타이틀바를 숨긴다.
dlg.requestWindowFeature(Window.FEATURE_NO_TITLE);
// 커스텀 다이얼로그의 레이아웃을 설정한다.
dlg.setContentView(R.layout.custom_dialog);
// 커스텀 다이얼로그를 노출한다.
dlg.show();
// 커스텀 다이얼로그의 각 위젯들을 정의한다.
final EditText message = (EditText) dlg.findViewById(R.id.mesgase);
final Button okButton = (Button) dlg.findViewById(R.id.okButton);
final Button cancelButton = (Button) dlg.findViewById(R.id.cancelButton);
okButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// '확인' 버튼 클릭시 메인 액티비티에서 설정한 main_label에
// 커스텀 다이얼로그에서 입력한 메시지를 대입한다.
main_label.setText(message.getText().toString());
Toast.makeText(context, "\"" + message.getText().toString() + "\" 을 입력하였습니다.", Toast.LENGTH_SHORT).show();
// 커스텀 다이얼로그를 종료한다.
dlg.dismiss();
}
});
cancelButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(context, "취소 했습니다.", Toast.LENGTH_SHORT).show();
// 커스텀 다이얼로그를 종료한다.
dlg.dismiss();
}
});
}
}
