Kotlin android (다이얼로그)

subak96·2023년 9월 19일

다이얼로그

다이얼로그는 사용자에게 결정을 내리거나 추가정보를 입력하라는 메시지를 표시하는 작은창입니다.
다이얼로그는 화면을 가득 채우지 않으며 보통은 사용자가 다음으로 계속 진행하기 전에 조치를 취해야 하는 모달 이벤트에 사용됩니다.
다이얼로그 예시

다이얼로그 구조

AlertDialog클래스를 사용하면 여러 가지 대화 상자 디자인을 빌드할 수 있다.
대개 이 다이얼로그 클래스만 있으면 되는 경우가 많습니다.
그림 2와 같이 알림 다이얼로그에는 세 가지 영역이 있습니다
제목, 콘텐츠 영역, 작업버튼

말로만 하면 어떤건지 잘 모르겠으니 실습으로 직접 보도록하자.

먼저 XML을 작성해준다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
android:gravity="center"
tools:context=".MainActivity">
<TextView
    android:id="@+id/tv_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!" />
<Button
    android:id="@+id/btn1_alert"
    android:text="dialog"
    android:layout_marginTop="20dp"
    android:layout_width="200dp"
    android:layout_height="wrap_content" />
<Button
    android:id="@+id/btn2_custom"
    android:text="custom dialog"
    android:layout_marginTop="20dp"
    android:layout_width="200dp"
    android:layout_height="wrap_content" />
<Button
    android:id="@+id/btn3_date"
    android:text="Date picker dialog"
    android:layout_marginTop="20dp"
    android:layout_width="200dp"
    android:layout_height="wrap_content" />
<Button
    android:id="@+id/btn4_time"
    android:text="Time picker dialog"
    android:layout_marginTop="20dp"
    android:layout_width="200dp"
    android:layout_height="wrap_content" />
<Button
    android:id="@+id/btn5_porgress"
    android:text="Progress dialog"
    android:layout_marginTop="20dp"
    android:layout_width="200dp"
    android:layout_height="wrap_content" />
</LinearLayout>

그럼 다음과 같은 화면이 나올것이다.

먼저 기본 다이얼로그를 확인해 볼것인데 메인 액티비티에 다음과 같은 코드를 작성해주도록 하자.

기본 다이얼로그

	// 1. 기본 다이얼로그
    binding.btn1Alert.setOnClickListener {
        var builder = AlertDialog.Builder(this)
        builder.setTitle("기본 다이얼로그 타이틀")
        builder.setMessage("기본 다이얼로그 메세지")
        builder.setIcon(R.mipmap.ic_launcher)

        // 버튼 클릭시에 무슨 작업을 할 것인가!
        val listener = object : DialogInterface.OnClickListener {
            override fun onClick(p0: DialogInterface?, p1: Int) {
                when (p1) {
                    DialogInterface.BUTTON_POSITIVE ->
                        binding.tvTitle.text = "BUTTON_POSITIVE"
                    DialogInterface.BUTTON_NEUTRAL ->
                        binding.tvTitle.text = "BUTTON_NEUTRAL"
                    DialogInterface.BUTTON_NEGATIVE ->
                        binding.tvTitle.text = "BUTTON_NEGATIVE"
                }
            }
        }

        builder.setPositiveButton("Positive", listener)
        builder.setNegativeButton("Negative", listener)
        builder.setNeutralButton("Neutral", listener)

        builder.show()
    }

그리고서 맨위의 버튼을 누르면 다음과 같은 화면이 출력이 될것이다.

다음은 커스텀 다이얼로그를 보도록하자 코드는 다음과 같이 작성해준다.

커스텀 다이얼로그

	// 2. 커스텀 다이얼로그
	binding.btn2Custom.setOnClickListener {
    val builder = AlertDialog.Builder(this)
    builder.setTitle("커스텀 다이얼로그")
    builder.setIcon(R.mipmap.ic_launcher)
    val v1 = layoutInflater.inflate(R.layout.dialog, null)
    builder.setView(v1)
    // p0에 해당 AlertDialog가 들어온다. findViewById를 통해 view를 가져와서사용
    val listener = DialogInterface.OnClickListener { p0, p1 ->
    val alert = p0 as AlertDialog
    val edit1: EditText? = alert.findViewById<EditText>(R.id.editText)
    val edit2: EditText? = alert.findViewById<EditText>(R.id.editText2)
    binding.tvTitle.text = "이름 : ${edit1?.text}"
    binding.tvTitle.append(" / 나이 : ${edit2?.text}")
        }
    builder.setPositiveButton("확인", listener)
    builder.setNegativeButton("취소", null)
    builder.show()
    }

그리고 추가로 다이얼XML을 하나 더 만들어서 작성해준다.

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:orientation="vertical">
    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name" />
    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="AGE" />
</LinearLayout>
</LinearLayout>

그리고 버튼을 누르면 다음과 같은 결과 화면이 나올것이다.

날짜 다이얼로그

 // 3. 날짜 다이얼로그
    binding.btn3Date.setOnClickListener {
        val calendar = Calendar.getInstance()
        val year = calendar.get(Calendar.YEAR)
        val month = calendar.get(Calendar.MONTH)
        val day = calendar.get(Calendar.DAY_OF_MONTH)
        val listener = DatePickerDialog.OnDateSetListener { datePicker, i, i2, i3 ->
            // i년 i2월 i3일
            binding.tvTitle.text = "${i}년 ${i2 + 1}월 ${i3}일"
        }
        var picker = DatePickerDialog(this, listener, year, month, day)
        picker.show()
    }

결과 화면

시간 다이얼로그

	// 4. 시간 다이얼로그
    binding.btn4Time.setOnClickListener {
        val calendar = Calendar.getInstance()
        val hour = calendar.get(Calendar.HOUR)
        val minute = calendar.get(Calendar.MINUTE)
        val listener = TimePickerDialog.OnTimeSetListener { timePicker, i, i2 ->
            binding.tvTitle.text = "${i}시 ${i2}분"
        }
        val picker = TimePickerDialog(this, listener, hour, minute, false) // true하면 24시간 제
        picker.show()
    }

진행 다이얼로그

	// 5. 프로그레스 다이얼로그
    binding.btn5Porgress.setOnClickListener {
        // 권장하진 않지만 사용은 가능하다.
        pro = ProgressDialog.show(this, "타이틀입니다.", "메시지입니다.")

        // 핸들러를 통해서 종료 작업을 한다.
        val handler = Handler()
        val thread = Runnable { pro?.cancel() }
        handler.postDelayed(thread, 5000) // 딜레이는 5초
    }

	//6. 프로그래스 다이얼로그 다른 방식. (커스텀과 비슷)
	binding.btn5Porgress.setOnClickListener {
        val builder = AlertDialog.Builder(this)
        builder.setTitle("프로그래스바")
        builder.setIcon(R.mipmap.ic_launcher)

        val v1 = layoutInflater.inflate(R.layout.progressbar, null)
        builder.setView(v1)

        builder.show()
    }

커스텀 다이얼로그와 마찬가지로 여기도 XML을 추가해준다

	<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ProgressBar
    android:id="@+id/progressbar"
    android:layout_width="match_parent"
    android:layout_height="76dp"
    android:layout_gravity="center"
    android:layout_marginTop="48dp"
    android:indeterminate="false"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="loading..."
    android:textSize="16sp"
    android:layout_marginTop="16dp"/>
 </LinearLayout>